if (window.XMLHttpRequest) {// 在非Microsoft浏览器中创建XMLHttpRequest对象xmlreq = new XMLHttpRequest();} else if (window.ActiveXObject){//通过MS ActiveX创建XMLHttpRequesttry {// 尝试按新版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)。
列表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购物车对象中,并可以序列化。
列表4是处理Ajax请求并更新购物车的简单servlet的代码片断。从用户会话中检索出一个Cart Bean,并按请求的参数更新它。
之后Cart Bean被序列化到XML,并被写回ServletRespone。注意,一定要将响应内容的类型设置为application/xml,否则,XMLHttpRequest将不能将响应内容解析为一个XML DOM。
列表4:处理Ajax请求的Servlet代码