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
? "[b]?":"&");[/b]
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return
url;
}

[b]三、POST请求
[/b]

[b][b]通常用于向服务器发送应该被保存的数据。
[/b][/b]
[b][b]发送post请求的第二步就是向send方法中传入某些数据。[/b][/b]
[b][b]利用serialize()函数序列化表单数据，并通过post方法进行发送。[/b][/b]
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+是唯一支持超时设定的浏览器。
[b] 六、跨域资源共享
[/b]

[b][/b]

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

[b][/b]

跨域技术：

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

七、Comet

[b][b][b][/b][/b][/b]

[b][/b]

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

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

有两种实现Comet的方式，

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

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

[b][b][b][b][b][b][b][/b][/b][/b][/b][/b][/b][/b]

[b][/b]

[b][b][b][b][/b][/b][/b][/b]

[b][/b]

[b]八、安全[/b]

[b][b][b][b][/b][/b][/b][/b]

[b][b][b][/b][/b][/b]

[b][b][b][b][b][/b][/b][/b][/b][/b]

[b][/b]

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

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

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

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

[b][b][b][/b][/b][/b]

[b][/b]