浏览器与服务器通讯技术——Ajax详解

使用BOM接口从服务器获取数据，获取的是整个页面，获得数据以后须要刷新整个页面。运用ajax技术无须刷新页面便可从服务器取得数据。ajax的核心是XMLHttpRequest对象。

1、 建立XHR对象

var xhr=new XMLHttpRequest();

2、启动和发送请求

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

open方法接受3个参数：要发送的请求的类型，请求的URL和表示是否异步发送请求的布尔值。URL相对于执行代码的当前页面。

xhl.send(null);

send方法接受一个参数，即要做为请求主体发送的数据。若是不须要经过请求主体发送数据，则必须传入null。

3、 处理响应

调用send()以后，请求就会被分派到服务器，等待服务器的响应。在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性简介以下：
responseText：做为响应主体被返回的文本。
responseXML：若是响应内容类型为"text/xml",这个数据将保存包含响应数据的XML DOM文档。
status：响应的HTTP状态说明。通常来讲，能够将HTTP状态代码200做为成功的标志，此时能够取得responseText属性的值。状态代码304表示请求的资源并无被修改，可使用浏览器缓存中的版本。
statusText：HTTP状态的说明。

1 xhr.open("get","example.php",false);
2 xhr.send(null);
3 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
4      alert("成功"+xhr.responseText);
5 }else{
6     alert("失败"+xhr.responseText);
7 }    

4、异步获取数据

XHR对象有一个readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值以下：

0：未初始化。还没有调用open()方法。

1：启动。已经调用open()方法，但还没有调用send()方法。

3. 发送。已经调用send()方法，但还没有接受到响应。

3. 接受。已经接受到部分响应数据。

4. 完成。已经接受到所有响应数据，并且已经能够在客户端使用了。

只要readyState的属性值改变一次，就会触发一次readystatechange事件。

 1 var xhr=new XMLHttpRequest();
 2 xhr.onreadystatechange=function(){
 3     if(xhr.readyState==4){
 4         if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 5             alert(xhr.responseText);
 6         }else{
 7             alert("失败"+xhr.responseText);
 8         }
 9     }    
10 };
11 xhr.open("get","example.php",true);
12 xhr.send(null);    

调用xhr.abort()方法，XHR对象会中止触发事件。

5、get请求

get请求经常使用于向服务器查询某些信息，能够将查询字符串追加到url的末尾：

xhr.open("get","example.php?age=20&name=xiaoming",true);

查询字符串中每一个参数的名称和值都必须使用encodeURIComponent()进行编码，而后才能放到URL的末尾。下面这个函数能够辅助向现有URL的末尾添加查询字符串参数：

1 function addURLParam(url,name,value){
2 　　url+=(url.indexOf("?")==-1?"?":"&");
3 　　url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
4 　　return url;
5 }

6、POST请求

POST请求，一般用于向服务器发送应该被保存的数据。POST请求的主体能够包含很是多的数据，并且格式不限。若是服务器上的PHP想经过$_POST超级全局变量获取数据，可使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次以适当方式建立一个字符串。

1 xhr.open("post","test.php",true);
2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 var data="age=20&name=dongfeng"
4 xhr.send(data);

也能够经过serialize()函数将页面中表单的数据进行序列化，而后经过XHR发送到服务器。

1 xhr.open("post","test.php",true);
2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 var form=document.getElementById("user-info");
4 xhr.send(serialize(form));

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

7、FormData

FormData为序列化表单以及建立与表单格式相同的数据提供了便利。使用FromData的方便之处体如今没必要明确地在XHR对象上设置请求头部。XHR对象可以识别传入的数据类型是FormData的实例，并配置适当的头部信息。

1 xhr.open("post","test.php",true);
2 var form=document.getElementById("user-info");
3 xhr.send(new FormData(form));

可使用append方法向FromData对象中追加数据：

var data=new FormData();
data.append("name","snsart");

8、进度事件

有如下6个进度事件：

loadstart:在接受到响应数据的第一个字节时触发。

progress:在接受响应期间持续不断的触发。

error:在请求发生错误时触发。

abort：在由于调用abort()方法而终止链接时触发。

load：在接受到完整的响应数据时触发。

loadend:在通讯完成或者触发error、abort或load事件后触发。

其中onprogress事件处理程序会接收到一个envent对象，其target属性时XHR对象，而且有三个额外的属性：lengthComputable、position和totalSize。其中，lengthComputable是一个表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据

Content-Length响应头部肯定的预期字节数。有了这些数据，就能够建立一个进度指示器了：

1 xhr.onprogress=function(event){
2 　　var divStatus=document.getElementById("status");
3 　　if(event.lengthComputable){
4 　　　　divStatus.innerHTML="接收："+event.position+"总共："+"event.tatalSize"+"字节";
5 　　}
6 };
7 xhr.open("get","altevents.php",true);
8 xhr.send(null);