Ajax (3) --- 剖析XMLHttpRequest

缺乏、安全感 2022-09-18 13:47 34阅读 0赞

在 [ (1)入门篇中][_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);
                    }
                }

结果如下：

![SouthEast][]

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

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

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

[_1]: http://blog.csdn.net/lishuangzhe7047/article/details/16810039
[SouthEast]: /images/20220828/18f5652d0cc2491ea3426110fe5e326d.png