Ajax (3) --- 剖析XMLHttpRequest

在 (1)入门篇中 使用了XMLHttpRequest对象说明Ajax异步传输的过程，本篇文章将详细介绍XMLHttpRequest对象。

以执行顺序为XMLHttpRequest对象说明主线，牵涉出来那部分用那功能。如下：

1，创建对象实例

最简单的创建：

 var req = new XMLHttpRequest();

但是由于浏览器兼容问题，最简单的可能不是最好的，所以兼容浏览器的代码产生了：

  try {
        req = new XMLHttpRequest();
  } catch (e) {
         //IE
        var xmlhttp_ids = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP');
        var success = false;
        for (var i = 0; i < xmlhttp_ids.length && !success; i++) {
             try {
                  req = new ActiveXObject(xmlhttp_ids[i]);
                        success = true;
             } catch (e) { }
        }

        if (!success) {
              throw new Error('Unable to create XMLHttpRequest');
        }

  }

2，设置回掉函数

告诉XMLHttpRequest对象，哪个函数会处理对象状态的改变。即设置onreadystatechange属性

3，指定请求的属性

使用对象的方法open()，方法会制指定发出的请求。其中true表示请求是异步的，false表示请求是同步的。

.open("GET or POST","URL","true or boolean")

参数URL很好理解，就是请求的地址；Boolean值呢，设置是否异步传送，至于GET Or Post怎么选取得看他们有什么不同：

1），用“GET”请求时，send()方法没有参数；用“POST”请求时，send()方法有参数。这个是表面不同

2），“GET”方式，将参数追加到URL中发送，“POST”方式，将参数串放在请求体中发送。这也就是为什么send()方法一个有参数，一个没有参数。

3），使用“POST”方式，要设置对象的Content-Type首部，格式如下：

     req.onreadyStateChange = handleStateChange;
     req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

     req.open('POST',url,true)
     req.send(name1=bill);

如何选取：

大多情况下是选择“GET”,原因是简单且速度快。

使用“POST”的情况：

• 无法使用缓存文件，更新服务器上的文件
• 向服务器发送大量的数据
• 发送用户输入的未知字符时

4，请求发送给服务器

这里用到对象的一个方法.send()

.send()，方法会将请求发送到指定的目标。如果open()中使用的是“GET”，则send()方法无参数

5，返回信息

这里用到XMLHttpRequest对象的三个属性分别为：readyState responseText responseXML

readyState ： 返回请求的当前状态。

有5个属性值，一般常用属性值为“4”表示数据接收完毕了，下一步就可以设置显示了。如入门(1)中的实例

//设置回调函数  
               xmlHttp.onreadystatechange = function () {  
                  
                //4==请求已完成，可以访问  
                   if (xmlHttp.readyState == 4) {  
                    //从服务器的response获取数据  
                       document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据  
                }  

responseText ：将获取的信息以字符串的形式返回

responseXML：将获取的信息以xml document对象返回。

如上代码中，使用的是responseText我们运行出来，得到的是一些字符串内容，换成responseXML呢

  //设置回调函数  
            req.onreadystatechange = function () {

                //4==请求已完成，可以访问  
                if (req.readyState == 4) {
                    //从服务器的response获取数据  
//                    document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据  
                    alert(req.responseXML);
                }
            } 

结果如下：

从图中可以看出，返回的是一个对象，如何取得对象中的内容，后面文章将有介绍。

这两个属性很重要的，是返回信息的载体。具体是用responseText呢还是responseXML呢，据具体情况而定，responseText传过来的是一堆的字符串，不好控制；而responseXML呢，传来的信息，我们可以根据自己需要适当选择取舍，可以选择获取，这个较好一些，本人看法。

以上就是整个异步调用过程。可以看出，没有控件的实现也是很简单，就是得多用几个XMLHttpRequest对象的属性和方法。据了解得：这种实现方法是常用的。

原文地址：https://www.jb51.cc/ajax/165534.html