深入理解Ajax

AJAX（异步 JavaScript 和 XML）是 synchronous JavaScript and XML 的简称。

AJAX不是一门新的编程语言，它是 JavaScript 的一部分，主要用来与后台交换数据，并在不重新加载（刷新）页面的情况下，更新部分页面。

使用 AJAX 的例子：

• 用户注册时，输入完用户名立即提交到后台验证，检测用户名是否存。
• 静态页面实现登录功能。
• 瀑布流的实现。

AJAX在提高用户体验方面有很大的作用，它可以“不知不觉”的与后台交换数据，不需要刷新页面，不需要用户等待。

GET 还是 POST

与 POST 相比，GET 更简单也更快，在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）；
• 向服务器发送大量数据（POST 没有数据量限制）；
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

是否异步请求

对于 open() 方法：
    open(method,url,async)
async 为 true 或 false。

async=true 时，JavaScript 无需等待服务器的响应，可以在等待服务器响应的同时执行其他脚本，当响应完成后再对返回的数据进行处理，所以，AJAX 请求与其他脚本的执行是分开的，互不影响。

async=false 时，JavaScript 会等到服务器响应完成后才继续执行其他脚本，如果服务器繁忙或缓慢，JavaScript 会一直等待，可能会挂起或停止。这种方式只适用于一些小而简单的请求。

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML），对于 web 开发人员来说，发送异步请求是一个巨大的进步，能在很大程度上减少服务器的开销，提高客户端脚本的执行速度。AJAX 重在“异步”，如果 async=false ，AJAX 就是去了意义。 所以，如无特殊要求，一般是 async=true ，既能充分发挥 AJAX 的作用，也不会遇到莫名其妙的错误。

XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载整个网页（刷新）的情况下，对网页进行部分更新。

XMLHttpRequest 对象是 AJAX 的基础，讲 AJAX ，大部分是在讲 XMLHttpRequest 对象。

所有现代浏览器（IE 7.0+、Chrome、FireFox、Opera、Safari）均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作，本教程讲解的内容都是基于标准化的工作草案。

对于较新的浏览器，创建 XMLHttpRequest 对象的语法：

    
    
var xmlhttp=new XMLHttpRequest();

对于比较老的IE浏览器（IE5 和 IE6），使用 ActiveX 来创建：

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

兼容所有浏览器的创建 XMLHttpRequest 对象的代码：

    
    
<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

如果担心浏览器出现错误提示，请用 try..catch 代替 if...else ，如下所示：

    
    
<script type="text/javascript">
var xmlhttp;
try{
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}catch(e){
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

XMLHttpRequest 对象有多个属性和方法，还有一个事件句柄。

XMLHttpRequest 对象属性和方法

属性	说明
readyState	HTTP 请求的状态。当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
responseText	从服务器接收到的数据（不包括头部）（解析为一个字符串）。
responseXML	从服务器接收到的数据（不包括头部）（解析为 XML 并作为 Document 对象返回）。
status	由服务器返回的 HTTP 状态代码。如 200 表示成功， 404 表示 "Not Found" 错误。
statusText	这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。
事件句柄	说明
onreadystatechange	每次 readyState 属性改变的时候调用的事件句柄函数。
方法	说明
abort()	取消当前响应，关闭连接并且结束任何未完成的网络活动。
getAllResponseHeaders()	把 HTTP 响应头部（所有头部）作为一个字符串返回。
getResponseHeader()	返回指定的 HTTP 响应头部的值，其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
open()	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send()	发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
setRequestHeader()	向一个打开但未发送的请求设置或添加一个 HTTP 请求。