Ajax

Ajax（Asynchronous JavaScript and XML）技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说XHR对象取得新数据，然后通过DOM将新数据插入到页面中。Ajax通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。

一、XMLHttpRequst对象

IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。因此，在IE中可能会遇到三种不同版本的XHR对象。其他浏览器都支持原生的XHR对象，在这些浏览器中创建XHR对象直接使用new XMLHTTPRequest()

跨浏览器方案

function createXHR(){
  if(typeof XMLHTTPRequest!='undefined'){
       return new XMLHTTPRequest(); 
  }else if(typeof ActiveXObject!='undefined'){
       if(typeof arguments.callee.activeXString!='string'){
            var versions=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'],i,len;
            for(i=0,len=versions.length;i<len;i++){
               try{
                   new ActiveXObject(versions[i]);
                   arguments.callee.ActiveXString=versions[i];
                   break;
                } catch(ex){}
            }
        } 
     return new ActiveXObject(arguments.callee.ActiveXString);
  }else{
        throw new Error('No XHR  object  available');
  }
}
var xhr=createXHR();

1.1 XHR的用法

1）open(要发送的请求类型，请求的URL，是否异步发送请求)

xhr.open('get','example.php',false);

调用open不会真正发送请求，而只是启动一个请求以备发送。

false:同步，JS代码会等到服务器响应之后再继续执行

true：异步

 

2）send(请求主体发送的数据||null)

要发送特定的请求，必须调用send()方法

send接受一个参数，如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。调用send()之后，请求就会被分派到服务器。

 

3）XHR属性

在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下：

responseText:作为响应主体返回的文本

responseXML:如果响应内容是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。

无论内容类型是什么，响应主体都保存在responseText属性中，而对于非XML数据，responseXML属性的值将为null。

status:响应的HTTP状态。建议通过检测status来决定下一步操作

statusText:HTTP状态的说明。跨浏览器使用时不太可靠

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。可以将HTTP状态代码200作为成功的标志。此时responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此时状态代码304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；也意味着响应是有效的。

为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

xhr.open('get','example.txt',false);

xhr.send(null);

if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

　　alert(xhr.responseText);

}else{

　　alert('request was unsuccessful:'+xhr.status);

}

 

4）HTTP状态码

200:访问成功（表示一切正常，返回的是正常请求结果）
302：临时重定向（指出被请求的文档已被临时移动到别处，此文档的新的URL在Location响应头中给出）
304：未修改（表示客户机缓存的版本是最新的，客户机应该继续使用它。）
404：访问的文件不存在（服务器上不存在客户机所请求的资源）
500：内部服务器错误（服务器端的CGI、ASP、JSP等程序发生错误）

 

5）readyState属性

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让JS继续执行而不必等待响应。此时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0:未初始化。尚未调用open()方法

1：启动。已经调用了open()方法，但尚未调用send()方法。

2：发送。已经调用send()方法，但尚未接受到响应

3：接收。已经接收到部分响应数据。

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。通常我们只对readyState值为4的阶段感兴趣，因为这时数据已经就绪。不过必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

var xhr=createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if((xhr.status>200&&xhr.status<300)||xhr.status==304){
            alert(xhr.responseText);
        }else{
            alert('request was unsuccessful'+xhr.status);
        }
    }
};
xhr.open('get','example.php',true);
xhr.send(null);

 

与其他事件处理程序不同，这里没有向onreadystatechange事件处理程序中传递event对象；必须通过XHR对象本身来确定下一步该怎么做。并且在处理程序中使用的是xhr对象，没有使用this对象，因为this对象在这的使用在有些浏览器中可能会导致函数执行失败，或者导致错误发生。

 

6）取消异步请求

在接收到响应之前可以调用abort()方法来取消异步请求：xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存问题，不建议重用XHR对象。

 

1.2 HTTP头部信息

XHR也提供了操作请求头部和响应头部信息的方法。

默认情况下，在发送XHR请求的同时，还会发送下列头部信息。

Accept:浏览器能够处理的内容类型

Accept-Charset:浏览器能够显示的字符集

Accept-Encoding:浏览器能够处理的压缩编码

Accept-Language:浏览器当前设置的语言

Connection:浏览器与服务器之间连接的类型

Cookie:当前页面设置的任何cookie

Host:发出请求的页面所在的域

Referer:发出请求的页面的URI。

User-Agent:浏览器的用户代理字符串

使用setRequstHeader(头部字段的名称，头部字段的值)方法可以设置自定义的请求头部信息。要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequstHeader()

var xhr=createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
       if((xhr.status>200&&xhr.status<300)||xhr.status==304){
           alert(xhr.responseText);
        }else{
           alert('Request was unsuccessful'+xhr.status);
        }
    }
};
xhr.open('get','example.php',true);
xhr.setRequestHeader('Myheader','Myvalue');
xhr.send(null);

 

建议使用自定义的头部字段名称时，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器的响应。

getResponseHeader(头部字段名称)可以取得响应的响应头部信息。

getAllResponseHeaders()可以取得一个包含所有头部信息的长字符串。

在服务器端也可以利用头部信息向浏览器发送额外的、结构化数据。

 

1.3 GET请求

最常用于向服务器查询某些信息。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。查询字符串中每个参数名称和值都必须使用encodeURIComponent()编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号（&）分隔。

function addURLParam(url,name,value){
    url+=(url.indexOf('?')==-1?'?':'&');
    url+=encodeURIComponent(name)+'='+encodeURIComponent(value);
　　return url;
}

 

 

1.4 POST请求

通常用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交，而GET请求传统上不是这样。POST请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入post，就可以初始化一个POST请求。

发送POST请求的第二步就是向send()方法中传入某些数据。

使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。POST数据的格式与查询字符串格式相同。如果需要将页面中表单的数据进行序列化，然后再通过XHR发送到服务器，那么就可以使用serialize()函数来创建这个字符串。

function submitData(){
    var xhr=createXHR();
     xhr.onreadystatechange=function(){
　　　　if(xhr.readyState==4){
　　　　　　if((xhr.status>200&&xhr.status<300)||xhr.status==304){
　　　　　　　　alert(xhr.responseText);
　　　　　　}else{
　　　　　　　　alert('request was unsuccessful'+xhr.status);
　　　　　　}
　　　　}
　　};
　　xhr.open('post','postexample.php',true);
　　xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
　　var form=document.getElementById('user-info');
　　xhr.send(serialize(form));
  
}

 

与get请求相比，post请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可达到POST请求的两倍。