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个参数：
- 要发送的请求的类型：get、post、put、delete等等。
- 请求的URL（这个URL既可以是绝对路径，也可以是相对路径）。
- 是否异步发送请求的布尔值：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中截屏所得，大家可以对照参考：
