Ajax总结

一、全称：Asynchronous JavaScript And XML。

这一项技术能够向数据库请求额外的数据而无需卸载页面。

会带来更好的用户体验。

  Ajax技术的核心是XMLHttpRequest对象（简称XHR），能够能够以异步方式从服务器端取得更多信息，意味着用户单击后可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中来。另外，虽然名字中包含XML部分，但ajax通信与数据格式无关；

注意：在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0

兼容创建一个XHR对象如下：

  function createXHR(){

   //当在非IE低版本浏览器情况下

   if(typeof XMLHttpRequest !="undefined"){

    alert("as")

    createXHR=function(){ return new XMLHttpRequest();}

   }else if(typeof ActiveXObjet !="undefined"){//当在IE低版本的情况下

    createXHR=function(){

    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("version[i]");

       arguments.callee.activeXString =versions[i];

       break;

      }catch(ex){

       //跳过

      }

     }

    }

    return new ActiveXObject(arguments.callee.activeXString);

   }

   }else{

    createXHR=function(){

    throw new Error("No XHR Object avaliable！");}

   }

   return createXHR();

  }

二、XHR的用法

在使用XHR对象时，要调用的第一个方法是：open()它接受三个参数，要发送请求的类型（“get","post"等），请求的URL地址，和是否异步发送请求的布尔值。

  注意：只能向同一个域中使用相同端口和协议的URL发送请求。

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

eg:

xhr.open("get","login.do",false);

xhr.send(null);

其中send方法接受一个参数，即要作为请求主体发送的数据。如不需要请求主体发送数据，必须传入null。调用send之后请求就会被发送到服务器上。

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

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

 * responseXML:如果相应的内容类型为”text/xml“或者”application/xml“,这个属性中将包含着响应数据的XML DOM文档。

 * status: 相应的HTTP状态。 一般来说值为200作为成功的标志。304表示请求资源并没有被修改

 * statusTest:Http状态的说明 

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

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

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

 2：发送。已调用send方法，但尚未接收到响应。

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

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

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

  另外，在接收到响应之前还可以调用abort（）方法来取消异步请求。

三、GET请求

 使用get请求时，查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。

然后才能放到URL的末尾。以便将信息发给服务器。

而所有名值对都必须用和号（&）分隔。

辅助向现有URL添加参数。

function addURLParam(url,name,value){

url+=(url.indexOf("?")==-1 ? "?":"&");

url+=encodeURIComponent(name)+"="+encodeURIComponent(value);

return url;

}

三、POST请求

通常用于向服务器发送应该被保存的数据。

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

利用serialize()函数序列化表单数据，并通过post方法进行发送。

eg:

xhr.open("post","ajax_test,do",true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

var form =document.getElementById("user-info");

xhr.send(serialize(form));

与get请求相比，post请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，Get请求最多

四、XMLHttpRequest 2高级

XHR1只是把已有的XHR对象的实现细节描述出来，XHR2级则进一步发展了XHR并非所有浏览器都实现了XHR2级规范。但所有浏览器都实现了它规定的部分内容。

（1）FormData

FormData为序列化表单以及创建与表单格式相同的数据格式提供了遍历。

eg:

var data =new FormData();

data.append("name",Nicholas)

而通过向FormData 构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对。

var data =new FormData(document.form[0]);

创建了FormData实例后，可以将他们直接传给XHR的send方法。

使用FormData的方便之处在于不必明确的在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

支持FormData的浏览器有：Firefox4+，Safari5+,Chrome和Android3+版Webkit

 五、超时设置

xhr.timeout 设置超时时间，

ontimeout当超时触发的事件

eg:

xhr.open("post","ajax_test,do",true);

xhr.timeout=1000//设置为一秒

xhr,ontimeout=function(){};

xhr.send(serialize(form));

注意：IE8+是唯一支持超时设定的浏览器。

 六、跨域资源共享

通过 XHR实现Ajax通信的一个主要限制来源于跨域安全策略。默认 情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。CORS是W3C的一个工作草案，定义了在必须必须访问跨域资源时，浏览器和服务器应该如何   沟通。

跨域技术：

CORS、图像Ping 、JSONP(JSON with padding 填充式JSON)

七、Comet

Comet指的是一种更高级的Ajax技术（经常有人称为服务器推送）

Comet能够让信息近乎实时的被推送到页面上，非常适合处理体育比赛的分数和股票报价。

有两种实现Comet的方式，

（1）长轮询：浏览器定时向服务器发送请求，看有没有更新的数据。

（2）HTTP流：它在页面的整个生命周期内只使用一个HTTP连接。

八、安全

对于未被授权系统有权访问某个资源的情况我们称之为：CSRF.

为确保通过XHR访问的URL安全，通行的做法就是验证发送请求者是否有权限访问相应的资源。有下列几种方案可供选择。

（1）要求以SSL连接来访问可以通过XHR请求的资源。

（2）要求每一次请求都要附带经过相应算法计算得到的验证码。