ajax的核心对像XHR

Ajax：A new Approach to web Applications。

Ajax技术的核心是XMLHttpRequest对象（简称XHR),由微软首先引入。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。可以以异步的方式从服务器取得更多的信息。虽然名字中包含了XML。

IE7+，Chrome，Firfox，Opera，safari都支持原生的XHR对象，建立方法：

var xhr=new XMLHttpRequest();

兼容全部浏览器的建立办法（包括IE7如下）

function creatXHR()

{

if ( typeof XMLHttpRequest !="undefined")

   {

       return new XMLHttpRequest();

    }

else if ( typeof ActiveXObject !="undefined" )

  {

  if ( typeof arguments.callee.activeXString!="string")

   {

        var vertion=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],

         i,len;

    for(i=0,len=vertion.length;i<len;i++){

         try{

                  new ActiveXObject(vertion[i]);

                  arguments.callee.activeXString=vertion[i];

                 break;

              }

          catch(ex){

                        / /跳过

                }

         }

    }

  }

}

 var xhr=creatXHR();  //建立

 

 XHR的用法

便用XHR时要调用的第一个方法是open（method,url,false），有3个参数：如：xhr.open("get","example.html",false);

参数1：请求的类型（get、post等）；

参数2：URL地址。末尾的查询字符串必须经学正确的编码才行 ；

参数3：是否异步发送请求的布尔值。false是同步javascript会等到收到服务器响应之后再执行；true是异步。

 

注意：只能在同一个域中使用相同端口和协议的URL发送请求。若是URL与启动请求的页面有任何差异，都会引起安全错误。

 

send（parm）方法发送请求

参数parm：请求主体发送的数据，若是不须要请求主体发送数据时必须传入null 。

发送请求后，收到服务器的响应后，响应会自动填充XHR的属性。属性介绍以下：

• responseText：做为响应主体被返回的文本；
• responseXML：若是响应的内容类型是“text/xml"或"application/xml"，这个数据中将保存着包含响应数据的XML DOM文档，非XML数据时属性为null。
• status：响应的Http状态，通常状态码是200就能够作为成功的标致，状态码304表示请求的数据没有改变，能够使用浏览器中的缓存版本，也是有效的响应；
• statusText：响应Http状态的说明。

收到服务器的响应后，第一步是检查 status 属性，以肯定响应已经成功返回。

为了接受到适当的响应能够检查如下状态码：

var xhr=new XMLHttpRequest();
xhr.open("get,"example/detais",false);
xhr.send(null);
if(xhr.status>=200&&xhr.status<300||xhr.status==304)
{
alert(xhr.responseText);
}
else
{
alert("unsuccessful:"+xhr.status);
}

 

有的浏览器会错误的报告204状态代码。IE中的XHR的ActiveX版本会装204设置成1223，而IE中的原生XHR则会将204规范化为200。Opera会在取得204时报告的值为0。

 

 readyState 属性

 有的时候为了不等待，使用异步发送请求。这时能够检测readyState 属性来肯定请求\响应过程的当前活动状态。

   0：未初始化（未调用open())；

   1：启动。调用了open(),还未调用send()方法；

   2：发送。发送但未接收到响应；

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

   4：完成。已经接收完响应数据，并且能够在客户端使用了。

 只要readyState的属性值由一个变成另一个值，都会触发readystatechange事件。

必须在调用open（）方法前指定onReadyStateChange事件处理程序才能确保跨浏览器兼容性

 如：

var xhr=creatXHR();
xhr.onreadystatuschange=function(){
if(xhr.readyStatus==4){ //在事件中使用了xhr而非this,缘由是onreadystatuschange赶快件处理程序的做用域问题。若是使用this,在有的浏览器中会致使函数执行失败。

if(xhr.status>=200&&xhr.status<300||xhr.status==403) 
  { 
     alert(xhr.response.Text); 
  }
else 
   { 
   alert("unsuccessful:"+xhr.status); } 
   } 
} 
xhr.open("get","url",false);
xhr.send(null);

XHR的abort()方法取消导步请求。调用这个方法XHR会中止触发事件，中止后并且不容许访问任何与响应有关的对象属性。

 

 

http头部信息

每一个HTTP请求或者响应都会带有相应的头部信息，XHR的请求和响应也带有相应的。发送XHR请求时会发送相应的头部信息：

• Accept：浏览器可以处理的内容类型；
• Accept-Charset：浏览器可以显示的字符集；
• Accept-Encoding：浏览器可以处理的压缩编码；
• Accept-Language：浏览器当前设置的语言；
• Connection：浏览器与服务器以前链接的类型；
• Cookie：当前页面设置的任何cookie；
• Host：发送请求的页面所在的域；
• Referer：发送请求页面的URL；
• User-Agent：浏览器的用户代理字符串；

 XHR的setRequestHeader(header,value)方法能够设置自定义的请求头部信息，必须在open()方法以后，send()方法以前调用。

• header：头部字段名称；
• value：头部字段值；

 

获取相应的相应信息：

 getRequestHeader(header)：获取头部字段名称为header的值；

 getAllRequestHeaders()：获取全部头部信息的长字符串；

 

GET请求和POST请求

服务器对post提交请求和提交表单处理不同，能够用XHR模拟表单提交

将 Content-Type 头部信息设置为 application/x-www-form-urlencoded，也就是表单
提交时的内容类型

xhr.open("post","example.php",false");
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");   //XHR模拟表单提交
var form=document.getElementById("formid"); xhr.send(serialize(form));

与get请求相比，post请求消耗的资源更多，从性能上讲，发送相同的数据，get请求的速度最多可达到post请求的两倍。

 

 

XMLHttpRequest 2

var x =new FormData;

x.append("title","hellow");

或

var data=new FormData(document.forms(0));

支持 FormData 的浏览器有 Firefox 4+、 Safari 5+、 Chrome 和 Android 3+版 WebKit。