Ajax (3) --- 剖析XMLHttpRequest

前端之家收集整理的这篇文章主要介绍了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对象的属性方法。据了解得:这种实现方法是常用的。

猜你在找的Ajax相关文章