Ajax基础

Ajax
1、什么是Ajax?
 Asynchronous javascript and xml:
 异步的javascript和xml
 其实质是一种动态页面生成技术，js通过调用
 浏览器内置的一个对象(XmlHttpRequest)向服务器
 发送请求，服务器将生成的结果返回给XmlHttpRequest，
 然后，js通过操作dom，来生成动态页面。
 传统的web编程：
 浏览器向服务器发送请求，会丢弃整个页面，然后等待服务器
 的响应，在服务器响应到达浏览器之前，浏览器什么都不能做。
 服务器返回的也是一个完整的页面，然后浏览器加载这个
 页面生成相应的界面。
  Ajax改进了“发送-等待-响应”这种编程模型，使用ajax
  引擎（即浏览器内置的一个对象 XmlHttpRequest）向服务器
  发请求。此时，浏览器并没有丢弃页面。
2、Ajax编程的基本步骤
 step1 获得浏览器内置的 XmlHttpReuqest对象。
 XmlHttpRequest对象仍然没有标准化，所以对不同的
 浏览器，要使用不同的方式来创建。
  function getXmlHttpRequest(){
    var xmlHttpRequest = null;
                if ((typeof XMLHttpRequest) != 'undefined') {
                    xmlHttpRequest = new XMLHttpRequest();
                }
                else {
                    xmlHttpRequest =
                    new ActiveXObject('Microsoft.XMLHttp');
                }
                return xmlHttpRequest;
  }
 
 step2 使用XMLHttpRequest对象向服务器发送请求(get/post)
  发送get请求
                var url="some";
                xmlHttpRequest.open('GET', url, true);
                三个参数：
                 1)请求方式 get/post
         2)要访问的组件的地址,如果带参数: some?name=zs
                 3)true:异步发送请求。
                xmlHttpRequest.onreadystatechange = fun1;
                注册一个回调函数：
                xmlHttpRequest对象与服务器交互的过程当中，
                有几个状态，每当状态发生改变，就会产生
                readystatechange事件，该事件由fun1来处理。
                xmlHttpRequest.send(null);
                send方法里，必须填写null。
   发送post请求
    xmlHttpRequest.open("POST",url,true);
              xmlHttpRequest
              .setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded");
              xmlHttpRequest.send("name=zs&age=22");
     step3 服务器处理请求
     step4 在回调函数当中，处理服务器的响应。
       function fun1(){
        if(xmlHttpRequest.readyState == 4){
         var rs = xmlHttpRequest.responseText;
         //var rs = xmlHttpRequest.responseXML;
         dom操作
        }
       }
    3、比较get/post方式发送请求
      get方式：
        在ajax应用当中，采用get方式发送请求，
      不同的浏览器对于中文采用不同的编码。
      对于Firefox，采用的是utf-8编码，而ie,
      采用的是gb2312，为了统一客户端的编码
      可以使用
       encodeURI : 对整个url地址进行utf-8编码。
       encodeURIComponent：对部分url参数进行utf-8编码。
      post方式：
       在ajax应用当中，采用post方式发送请求，
       采用浏览器打开该页面时的编码来对中文进行编码。
      结论：
       如果要考虑中文，最好使用post方式，另外，post方式
       发送的数据量更大。 
     4、XmlHttpRequest对象的常用属性
         onreadystatechange: 绑订回调函数 
         readyState:返回XmlHttpRequest与服务器之间交互的状态
         status:返回状态码
         responseText:返回服务器送回的文本数据。
         responseXML:返回服务器送回的xml数据。
      一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。
       例如 ：
                    var url = "login.jsp?user=XXX&pwd=XXX";
                    xmlHttpRequest.open("GET",url,true);
                    xmlHttpRequset.send(null);
       此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
       例如：
                   xmlHttpRequest.open("POST","login.jsp",true);
                   xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
                   xmlHttpRequest.send("user="+username+"&pwd="+password);
        需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法