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

    分派 XMLHttpRequest

　　我将从 Ajax 序列的起点开始：创建和分派来自浏览器的 XMLHttpRequest。不幸的是，不同的浏览器创建 XMLHttpRequest 的方法各不相同。清单 2 的 JavaScript 函数消除了这些依赖于浏览器的技巧，它可以检测当前浏览器要使用的正确方式，并返回一个可以使用的 XMLHttpRequest。最好是把它当作辅助代码：只要把它拷贝到 JavaScript 库，并在需要 XMLHttpRequest 的时候使用它就可以了。

　　清单 2. 创建跨浏览器的 XMLHttpRequest

/*
* Returns a new XMLHttpRequest object, or false if this browser
* doesn't support it
*/
function newXMLHttpRequest() {

　var xmlreq = false;

　if (window.XMLHttpRequest) {

　　// Create XMLHttpRequest object in non-Microsoft browsers
　　xmlreq = new XMLHttpRequest();

　} else if (window.ActiveXObject) {

　　// Create XMLHttpRequest via MS ActiveX
　　try {
　　　// Try to create XMLHttpRequest in later versions
　　　// of Internet Explorer

　　　xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

　　} catch (e1) {

　　　// Failed to create required ActiveXObject

　　　try {
　　　　// Try version supported by older versions
　　　　// of Internet Explorer
　　　　xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
　　　} catch (e2) {
　　　　// Unable to create an XMLHttpRequest with ActiveX
　　　}
　　}
　}
　return xmlreq;
}
　　稍后我将讨论处理那些不支持 XMLHttpRequest 的浏览器的技术。目前，示例假设清单 2 的 newXMLHttpRequest 函数总能返回 XMLHttpRequest 实例。

　　返回示例的购物车场景，我想要当用户在目录项目上点击 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 代码。
更多内容请看PCdog.com--Ajax技术  Ajax框架与实例  JAVA和.Net开发专题
上一页  [1] [2] [3] [4] [5]  下一页

• 打印文档
• 推荐好友
• 
• 返回顶部
• 增大字体
• 减少字体

• 上一篇文章：利用AJAX技术开发应用程序实战发
• 下一篇文章：驳“AJAX 的七宗罪”