面向Java程序员的Ajax:构建动态Java程序(二)

2014-11-23 21:59:43 · 作者: · 浏览: 8
pRequest 实例。

  返回示例的购物车场景,我想要当用户在目录项目上点击 Add to Cart 时启动 Ajax 交互。名为 addToCart() 的 onclick 处理函数负责通过 Ajax 调用来更新购物车的状态(请参阅 清单 1)。正如清单 3 所示,addToCart() 需要做的第一件事是通过调用清单 2 的 newXMLHttpRequest() 函数得到 XMLHttpRequest 对象。接下来,它注册一个回调函数,用来接收服务器响应(我稍后再详细解释这一步;请参阅 清单 6)。 因为请求会修改服务器上的状态,所以我将用 HTTP POST 做这个工作。通过 POST 发送数据要求三个步骤。第一,需要打开与要通信的服务器资源的 POST 连接 ―― 在这个示例中,服务器资源是一个映射到 URL cart.do 的 servlet。然后,我在 XMLHttpRequest 上设置一个头,指明请求的内容是表单 编码的数据。最后,我用表单编码的数据作为请求体发送请求。

  清单 3 把这些步骤放在了一起。

  清单 3. 分派 Add to Cart XMLHttpRequest

/*
* Adds an item, identified by its product code, to the shopping cart
* itemCode - product code of the item to add.
*/
function addToCart(itemCode) {

 // Obtain an XMLHttpRequest instance
 var req = newXMLHttpRequest();

 // Set the handler function to receive callback notifications
 // from the request object
 var handlerFunction = getReadyStateHandler(req, updateCart);
 req.onreadystatechange = handlerFunction;

 // Open an HTTP POST connection to the shopping cart servlet.
 // Third parameter specifies request is asynchronous.
 req.open("POST", "cart.do", true);

 // Specify that the body of the request contains form data
 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 // Send form encoded data stating that I want to add the
 // specified item to the cart.
 req.send("action=add&item="+itemCode);
}

  这就是建立 Ajax 往返过程的第一部分,即创建和分派来自客户机的 HTTP 请求。接下来是用来处理请求的 Java servlet 代码。
servlet 请求处理

  用 servlet 处理 XMLHttpRequest,与处理普通的浏览器 HTTP 请求一样。可以用 HttpServletRequest.getParameter() 得到在 POST 请求体中发送的表单编码数据。Ajax 请求被放进与来自应用程序的常规 Web 请求一样的 HttpSession 中。对于示例购物车场景来说,这很有用,因为这让我可以把购物车状态封装在 JavaBean 中,并在请求之间在会话中维持这个状态。

  清单 4 是处理 Ajax 请求、更新购物车的简单 servlet 的一部分。Cart bean 是从用户会话中获得的,并根据请求参数更新它的状态。然后 Cart 被序列化成 XML,XML 又被写入 ServletResponse。重要的是把响应的内容类型设置为 application/xml,否则 XMLHttpRequest 不会把响应内容解析成 XML DOM。

  清单 4. 处理 Ajax 请求的 servlet 代码

public void doPost(HttpServl