JavaScript之Ajax之美~

　　曾经有一段时期，因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期，不被大家看好，后来，到了2005年，Google公司的很多技术都是用了ajax之后，JavaScript才又火热了起来，可以说，是Ajax拯救了JavaScript，就目前来说，熟练使用Ajax已经成为了所有web开发人员必须掌握的技能。那么Ajax又是什么呢？ 它的作用是什么呢?

第一部分：Ajax简介

　　Ajax即Asynchronous JavaScript +XML的简写，这一技术能够向服务器请求额外的数据而无需卸载页面，会带来更好地用户体验。Ajax的核心是XMLHttpRequest对象（简称XHR，这一对象受到chrome、safari、FF、opera等主流浏览器的支持），这是由微软首先引入的一个特性，IE 浏览器使用 ActiveXObject，后来浏览器提供商都提供了相同的实现。XHR对象的存在，意味着当用户点击之后，不必刷新页面也可以从后台取得新数据，也就是说，可以试用XHR对象取得新数据，然后通过DOM方式将新数据插入到页面中，达到对网页的某部分进行更新的效果。值得注意的是：虽然，Ajax中包含了xml，但是我们在无需刷新页面就得到的数据不一定是xml数据。

第二部分：XHR对象的创建

　　上面讲到，Ajax的核心是XMLHttpRequest对象，那么我们如何创建一个XMLHttpRequest对象呢？

　　首先，我们应当知道：所有浏览器都支持XMLHttpRequest对象，其中IE5和IE6使用ActiveXObject对象。并且现在所有浏览器（IE7+、FireFox、Chrome、Safari以及Opera）均内建了XMLHttpRequest对象。于是创建XMLHttpRequest对象的语法是：

var xhr = new XMLHttpRequest（）;

　　刚刚提到老版本的Internet Explorer(IE5和IE6)使用的是ActiveXObject对象，所以语法是：

var axo = new ActiveXObject("Microsoft.XMLHTTP");

　　注意：其中传入的“Microsoft.XMLHTTP”是不能改变的。

　　于是，为了应对所有的现代浏览器（包括IE5和IE6），请首先检查是否支持XMLHttpRequest对象：如果支持，则创建XMLHttpRequest对象；如果不支持，则创建ActiveXObject对象：

var xmlHttp=null;if(window.XMLHttpRequest){       xmlHttp=new XMLHttpRequest();}else{    xlmHttp=new ActiveXObject("Microsoft.XMLHTTP");}

　　关于这个应对所有现代浏览器的代码应当注意：

• 我将xmlHttp的值设置为null，是因为null值表示一个空对象指针，而这也正是使用typeof操作符检测null值是会返回“object”的原因，因此：如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。
• 之所以可以试用window.XMLHttpRequest来检测其是否存在，是因为XMLHttpRequest是window对象的属性。

第三部分：XHR对象的用法(属性与方法等)

　　上面两部分，我们介绍XHR对象是什么以及怎么创建，这一部分我将谈一谈XHR对象的用法。

　　⑴.open（）方法

　　既然XHR是一个对象，那么它就一定有自己的属性和方法。在使用XHR对象时，要调用的第一个方法是open()。它接受3个参数：

1. 要发送的请求的类型：get、post、put、delete等等。
2. 请求的URL（这个URL既可以是绝对路径，也可以是相对路径）。
3. 是否异步发送请求的布尔值：true表示异步发送请求，false表示同步发送请求。

　  举例如下：

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

　　此时，这段代码会启动一个针对example.php的GET请求。注意：open()方法并不会真正的发送请求而只是启动一个请求以备发送。那么怎么才能发送特定的请求呢，这是就要用到send()方法了。

　　⑵.send（）方法

　　刚刚说到open()方法，只是开启（open），还没有发送，而send才是真正地发送。它接受一个参数：

• 作为请求主体发送的数据

　　注意：如果不需要通过请求主体发送数据，则必须传入null。一般get请求不需要传入参数，而对于post请求，如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。这一部分会详细介绍，下面举一个简单例子：

xhr.open("get","example.php",true);xhr.send(null);

　　(3).XHR对象的几个属性

　　通过send()发送之后，会接受到响应，响应的数据会自动填充XHR对象的属性。主要有以下几种：

• responseText:作为响应主体被返回的文本
• responseXML：如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着相应数据的XML DOM文档。
• status：响应的http状态
• statusText:Http状态的说明

　　在接收到响应后，一般是先检查status属性，来确定响应是否成功返回，一般状态代码200表示成功（以2开头即表示成功），这是responseText就可以被访问了。而状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本，因此这种响应也是有效的。于是可以通过下面的代码检测这两种状态：

	xhr.open("get","example.php",false);	xhr.send(null);	if((xhr.status>=200&&xhr.status<300)||xhr.status==304){		alert(xhr.responseText);	}else{		alert("Request waw unseccessful:"+"xhr.status");	}

　　XHR对象的readystate属性

　　使用Ajax我们当然还是希望发送异步请求的：如果发送同步请求，那么一旦网卡住了，这个页面就不会有任何反应而是继续等待响应，但是发送异步请求，即使网卡住，也不用担心，因为它是异步的。而readystate属性可以检测到请求/响应过程的当前活动阶段。它有5个取值，分别如下：

　 关键：只要readystate的值改变（比如从0变为1，从1变为2等等），那么每次地改变都会触发readystatechange事件。并且可以通过这个时间检测每次状态变化后的readystate的值。当值为4是最重要的，因为这事所有的数据已经准备就绪。看一个例子：

	var xhr=new XMLHttpRequest();	xhr.open("get","example.php",false);	xhr.onreadystatechange=function(){		if(readystate==4){			if((xhr.status>=200&&xhr.status<300)||xhr.status==304){				alert(xhr.responseText);			}else{				alert("Request waw unseccessful:"+"xhr.status");			}		}	};	xhr.send(null);

　　　注意以下几点：

• xhr.onreadystatechange前面有一个on，这是因为我们使用的是DOM0级方法为XHR对象添加了时间处理程序，没有利用addEventListener这种DOM2级方法，是因为并非所有的浏览器都支持DOM2级方法。
• 这个例子中我们没有使用this对象，是因为onreadystatechange时间处理程序的作用域问题。如果使用this对象，在有的浏览器中会导致函数执行失败或者导致发生错误。因此，使用实际的XHR对象实例便利那个是一种较为可靠的方式。

　　(4).abort（）方法

　　在接受到响应之前，我们还可以使用abort()方法来取消异步请求，如下所示：

xhr.abort();

　　在调用了这个方法之后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。

第四部分：HTTP头部信息

　　因为使用Ajax和后台交互，那么就一定离不开http协议了。而HTTP请求和响应都会带有相应的头部信息。

　　在默认情况下，在发送XHR请求的同时，还会发送以下头部信息。

• Accept:浏览器能够处理的内容类型
• Accept-Charset:浏览器能够显示的字符集
• Accept-Encodding:浏览器能够处理的压缩编码
• Accept-Language:浏览器当前设置的语言
• Connection:浏览器与服务器之间链接的类型
• Cookie：当前页面设置的任何Cookie
• Host：发出请求的页面所在的域
• Referer：发出请求页面的URI
• User-Agent:浏览器的用户代理字符串   

　　下面这张图片是我的chrome浏览器开发者工具下的network中截屏所得，大家可以对照参考：

JavaScript之Ajax之美~