原文地址：Ajax
Ajax全称为“Asynchronous Javascript and XML”（异步javascript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式网页相关的技术所形成的结合体，它的出现结束了“单击，等待”的传统交互模式，开启了无刷新更新页面的新时代。
Ajax的优点
-
不需要插件支持
ajax不需要任何浏览器插件，就可以被绝大多数的主流浏览器所支持，用户只需要允许javascript在浏览器上执行即可。 -
优秀的用户体验
这是ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得web应用程序能更为迅速地回应用户的操作。 -
提高web程序的性能
与传统模式相比，ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据是通过提交表单来实现的，而数据获取是靠全页面刷新来重新获取整页的内容。ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。 -
减轻服务器和带宽的负担
ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。
Ajax的缺点
-
破坏浏览器 “后退”按钮的正常功能
在ajax中，“前进”和“后退”按钮的功能都会失效。用户经常会遇到这情况，当单击一个按钮触发一个ajax交互后，如果点击“后退”按钮，浏览器会直接后退到前一个页面，而不是仅仅是回退到ajax交互操作前。 - 需要处理浏览器兼容性问题
创建XMLHttpRequest对象
XMLHttpRequest对象简称XHR对象，它是ajax技术的核心，发送异步请求、接收响应及执行回调都是通过它来完成的。ie7+、firefox、opera、chrome和safari都支持原生的XHR对象，在这些现代浏览器中这样创建：
var xhr = new XMLHttpRequest();
在ie5和ie6中，是以ActiveXObject的方式引入XHR对象的：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
如果你既想支持现代浏览器又不想放弃ie5和ie6，那么你需要做一个逻辑判断：
var xhr
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}else if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
XMLHttpRequest对象的属性
readyState
该属性表示请求/响应过程中的当前活动阶段。该属性可取的值如下：
- 0：未初始化。尚未调用open()方法。
- 1：启动。已经调用open()方法，但尚未调用send()方法。
- 2：发送。已经调用send()方法，但尚未接收到响应。
- 3：接收。已经接收到部分响应数据。
- 4：已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值发生变化，就会触发readystatechange事件，可以利用这个事件来检测每次变化后的readyState的值。通常我们只对readyState值为4的阶段感兴趣，因为这个时候所有的数据都已经就绪。
responseText
作为响应主体被返回的文本。无论内容类型是什么，响应主体的内容都会保存在这里，如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
responseXML
如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。对于非XML数据而言，responseXML属性值将为null。
status
响应的http状态。检查status属性可以确定响应是否已成功返回（在readyState>3时才可以读取）。
- http状态码200是响应成功返回的标志，此时responseText属性的内容已经就绪，而且在内容类型正确的情况下（XML类型），responseXML属性也能够访问了。
- http状态码304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本，当然也意味着响应式有效的。
- http状态码404表示请求错误。
······
statusText
http状态的说明。比如在状态码为200时，statusText的值为“OK”。
XMLHttpRequest对象的方法
open()
在使用XHR对象时，要调用的第一个方法是open()，它接受三个参数：
- 要发送的请求类型，如“get”“post”等。
- 请求要访问的URL。
- 选择同步或异步的布尔值。true表执行异步操作，false表示同步。
- 同步：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
- 异步：客户端发出一个请求后，无需等待服务器响应结束后，就能发出第二个请求。
send()
send方法接收一个参数，将被写入到请求报文里面传递，即要做为请求主体发送的数据。调用send()之后，请求就会被分派到服务器。
- 如果不需要通过请求主体发送数据，比如请求类型是“get”时，参数是直接写到url里面，则必须传入null，因为这个参数对于某些浏览器来说是必须的。
- 请求类型是“post”时，请求参数需要写入到send方法里。
abort()
调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问与响应有关的对象属性。
http头部信息
默认情况下，在发送XHR请求的同时，还会发送头部信息，虽然不同的浏览器实际发送的头部信息会有所不同，但是基本上是所有浏览器都会发送的有以下这些：
- Accept：浏览器能够处理的内容类型。
- Accept-Charset：浏览器能够显示的字符集。
- Accept-Encoding：浏览器能够处理的压缩编码。
- Accept-Language：浏览器当前设置的语言。
- Connection：浏览器与服务器之间连接的类型。
- Cookie：当前页面设置的任何Cookie。
- Host：发出请求的页面所在的域。
- Referer：发出请求的页面的URI。
- User-Agent:浏览器用户代理字符串。
getResponseHeader()
这个方法可以设置自定义的请求头部信息，它接收两个参数：
- 头部字段的名称
- 头部字段的值
要想成功发送请求头部信息，getResponseHeader()方法必须在open()与send()之间调用。
getAllResponseHeaders()
这个方法可以取得一个包含所有头部信息的长字符串。
GET请求
GET是最常见的请求类型，常用于向服务器查询某些信息。使用GET请求时常用到encodeURIComponent()方法。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，才能放到URL末尾。完整的函数如下：
function addURLParam(url,name,value){
url+=(url.indexOf("?") == -1 ? "?" : "&");
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
POST请求
POST请求通常用于向服务器发送应该被保存的数据。
虽然大部分情况下都能用更简单、更快的GET请求，但在以下情况中，请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
默认情况下，服务器对POST请求和提交表单的请求并不会一视同仁，不过我们可以使用XHR来模仿表单提交。
xhr.open("POST","example.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置表单提交时的内容类型
var form = document.getElementById("#test"); //得到表单中的数据
xhr.send(serialize(form)); //表单中的数据序列化后发送给服务器
实例
下面看一个完整的栗子：
html代码段
<input type="button" value="ajax提交" onclick="Ajax();">
<div id="resText"></div>
javascript代码段：
function Ajax() {
var xhr; //声明一个对象用来装入XMLHttpRequest
if(window.ActiveXObject){ //IE5 IE6实例化XHR对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){ //现代浏览器实例化XHR对象
xhr = new XMLHttpRequest();
}
xhr.open("get","test.php",true); //启动请求
xhr.onreadystatechange=fun; //触发回调函数
xhr.send(null); //发送请求
function fun() { //定义回调函数
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("resText").innerHTML=xhr.responseText;
}
}
}
}
