发送一个XMLHttpRequest
我将从Ajax时序图的起点开始：从浏览器创建并发送一个XMLHttpRequest。不幸的是，在不同的浏览器中创建XMLHttpRequest的方法都不一样。列表2中示例的JavaScript函数消除了这些与浏览器种类相关的问题，正确检测与当前浏览器相关的方法，并返回一个可以使用的XMLHttpRequest。最好将它看成备用代码，将它简单拷贝到你的JavaScript库中，在需要一个XMLHttpRequest时使用它即可。
列表2：跨浏览器创建一个XMLHttpRequest
/*
* 返回一个新建的XMLHttpRequest对象，若浏览器不支持则失败
*/
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// 在非Microsoft浏览器中创建XMLHttpRequest对象
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//通过MS ActiveX创建XMLHttpRequest
try {
// 尝试按新版InternetExplorer方法创建
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// 创建请求的ActiveX对象失败
try {
// 尝试按老版InternetExplorer方法创建
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// 不能通过ActiveX创建XMLHttpRequest
}
}
}
return xmlreq;
}
稍后，我将讨论如何对待不支持XMLHttpReauest的浏览器的一些技巧。现在，列表2中展示的示例函数将总是可以返回一个XMLHttpReauest实例。
回到购物车例子的场景中，只要用户针对某一个目录条目点击了Add to Cart按钮，我就要调用一个Ajax交互。名为addToCart()的onclick函数通过Ajax调用（如列表1中所示）来负责更新购物车的状态。在列表3中，addToCart()要做的第一件事就是通过调用newXMLHttpReauest函数（如列表2中所示）来获取一个XMLHttpRequest的实例，并且注册一个回调函数来接受服务器响应（我将在稍后详细解释，请参见列表6）。
因为，此请求将会修改服务器状态，我将使用一个HTTP POST来处理它。通过POST传送数据需要三个步骤：首先，我需要打开一个到进行通讯的服务器资源的POST连接—在现在例子中是一个URL映射为cart.do的服务器端servlet。下一步，设置XMLHttpRequest的头信息，以标志请求的内容为form-encoded。最后，将form-encoded数据作为请求体，并发送此请求。
列表3中集中展示了这些步骤。
列表3：发送一个添加到购物车XMLHttpRequest
/*
* 通过产品编码，在购物车中添加一个条目
* itemCode – 需要添加条目的产品编码
*/
function addToCart(itemCode) {
// 获取一个XMLHttpRequest实例
var req = newXMLHttpRequest();
// 设置用来从请求对象接收回调通知的句柄函数
var handlerFunction = getReadyStateHandler(req, updateCart);
req.onreadystatechange = handlerFunction;
// 打开一个联接到购物车servlet的HTTP POST联接
// 第三个参数表示请求是异步的
req.open("POST", "cart.do", true);
// 指示请求体包含form数据
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 发送标志需要添加到购物车中条目的form-encoded数据
req.send("action=add&item="+itemCode);
}
结合以上内容，你可以了解到Ajax处理过程的第一部分—就是在客户端创建并发送HTTP请求。下一步是用来处理请求的Java Servlet代码。
