列表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代码。

Servlet请求处理

通过一个servlet来处理XMLHttpRequest与处理一个来自浏览器的普通的HTTP请求基本上相似。可以通过调用HttpServletRequest.getParameter()来获取由POST请求体传送过来的form-encoded数据。

Ajax请求也与普通的WEB请求样都成为此应用同一HttpSession会话进程的一部分。这对于购物车例子来说很有肜，因为我们可以通过会话将多个请求的状态都保存到同一个JavaBean购物车对象中，并可以序列化。