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。

原文地址:https://www.cnblogs.com/guanguan-/p/7686382.html