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",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",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的两倍。

原文链接：https://www.f2er.com/ajax/161948.html

Ajax的XMLHttoRequest对象