Ajax的XMLHttoRequest对象

Ajax在我们的网页中无处不在，我们平常开发中也都会使用Ajax，可是我们对它的认识又有多少啦，又有多少人知道它的全名，又有多少人会把它当成阿贾克斯

Ajax的由来

2005年，Jesse James Garrett 介绍了一种技术，用他的话说就叫Ajax,是对Asynchronous JavaScript+XML的简写，这一技术能够向服务器请求额外的数据而无需卸载页面，会带来更好的用户体验。这一技术改变了自WEB诞生以来就一直沿用的"单击“，“等待的交互模式”；

XMLHttpRequest对象

Ajax技术的核心是XMLHttpRequest对象(简称XHR),在IE5中，XHR对象时通过MSXML库中的一个ActiveX对象实现的。因此IE中会有三种不同版本的XHR对象，即MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0；

创建XHR对象

function createXHR(){
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(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(ex){

}
}

}
return new ActiveXObject(arguments.callee.activeXString);
}

var xhr=createXHR();在IE7和火狐谷歌等主流浏览器里可以直接创建var xhr2=new XMLHttpRequest();

XHR的用法

在使用XHR对象时，要调用的第一个方法是open(),它接受3个参数，要发送的请求类型("get","post"),请求的URL和表示是否异步发送请求的布尔值。
var xhr2=new XMLHttpRequest();
xhr2.open("get","login.do",false);
这段代码会发送一个路径为login.do的get请求，这里的URL可以是相对于执行代码的页面路径，也可以是绝对路径，调用open()方法并不会发送真正的请求，而只是启动一个请求，以备发送，如果要发送请求的话可以调用send（）方法。var xhr2=new XMLHttpRequest();
xhr2.open("get","login.do",false);
xhr2.send();这里send可以传入一个参数，作为我们的请求参数发送过去，当我们请求发送完成后，会填充我们的XHR，得到一些响应,这里介绍几个主要的responseURL：请求的URL绝对路径地址
Status：返回的响应状态，比较出名的有200成功，400找不到路径，405参数或者类型不匹配，500服务器错误

responseURL：请求的URL绝对路径地址

timout：响应时间
response:响应信息
responseText:响应主体返回的文本内容
如果是发送异步请求的话，我们可以检测XHR对象的readyState属性，该属性表示响应过程中的活动阶段
0：未初始化，尚未调用open()方法。
1：启动。已经调用open（）方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但是尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange时间。

HTTP头部信息

每个HTTP请求和响应都会带有对应的头部信息，XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。
Host 请求的域名
User-Agent 浏览器端浏览器型号和版本
Accept 可接受的内容类型
Accept-Language 语言
Accept-Encoding 可接受的压缩类型 gzip,deflate
Accept-Charset 可接受的内容编码 UTF-8,*
服务器端的响应Header(response header)
Date 服务器端时间
Server 服务器端的服务器软件 Apache/2.2.6
Etag 文件标识符
Content-Encoding传送启用了GZIP压缩 gzip
Content-Length 内容长度
Content-Type 内容类型

GET请求

GET请求和POST的请求的具体区别，我在一篇文章里面已经讲过，这里就不说了，具体说一下对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。在传入的时候使用decodeURIComponent() 进行编码，在服务器接收的时候再使用这个函数解码。
function get(){
//获取xhr对象
var xhr = getXhr();
//规定请求类型
//url
var url=encodeURIComponent("login.do?username=123");
xhr.open("get",url,true);
//发送请求
xhr.send();
//处理服务器响应事件
xhr.onreadystatechange = function (){
//判读是否处理完毕 与判读服务器是否处理成功！
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
}
}

POST请求：

默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析成有用的部分，不过我们可以使用XHR来模仿表单提交。
function post(){
//获取xhr对象
var xhr = getXhr();
//规定请求类型
xhr.open("post","login.do",true);
//设置头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//发送参数
xhr.send("username=345&pass=123");
//相应事件处理
xhr.onreadystatechange = function (){
//判读是否处理完毕 与判读服务器是否处理成功！
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
} 注意：
设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")  
与get请求相比，POST请求消耗的资源会多一些，如果发送相同的数据，get的请求速度最多可以达到post的两倍。