注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发AJAX → 文章内容

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

作者:佚名 来源:不详 发布时间:2007-12-10 21:58:18

    用 JavaScript 进行响应处理

  XMLHttpRequest 的 readyState 属性是一个数值,它指出请求生命周期的状态。它从 0(代表“未初始化”)变化到 4(代表“完成”)。每次 readyState 变化时,readystatechange 事件就触发,由 onreadystatechange 属性指定的事件处理函数就被调用。

  在 清单 3 中已经看到了如何调用 getReadyStateHandler() 函数创建事件处理函数。然后把这个事件处理函数分配给 onreadystatechange 属性。getReadyStateHandler() 利用了这样一个事实:函数是 JavaScript 中的一级对象。这意味着函数可以是其他函数的参数,也可以创建和返回其他函数。getReadyStateHandler() 的工作是返回一个函数,检查 XMLHttpRequest 是否已经完成,并把 XML 响应传递给调用者指定的事件处理函数。清单 6 是 getReadyStateHandler() 的代码。

  清单 6. getReadyStateHandler() 函数

/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes its XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {

 // Return an anonymous function that listens to the
 // XMLHttpRequest instance
 return function () {

  // If the request's status is "complete"
  if (req.readyState == 4) {

   // Check that a successful server response was received
   if (req.status == 200) {

    // Pass the XML payload of the response to the
    // handler function
    responseXmlHandler(req.responseXML);
   } else {
    // An HTTP problem has occurred
    alert("HTTP error: "+req.status);
   }
  }
 }
}

  HTTP 状态码

  在清单 6 中,检查 XMLHttpRequest 的 status 属性以查看请求是否成功完成。status 包含服务器响应的 HTTP 状态码。在执行简单的 GET 和 POST 请求时,可以假设任何大于 200 (OK)的码都是错误。如果服务器发送重定向响应(例如 301 或 302),浏览器会透明地进行重定向并从新的位置获取资源;XMLHttpRequest 看不到重定向状态码。而且,浏览器会自动添加 Cache-Control: no-cache 头到所有 XMLHttpRequest,这样客户代码永远也不用处理 304(未经修改)服务器响应。

  关于 getReadyStateHandler()

  getReadyStateHandler() 是段相对复杂的代码,特别是如果您不习惯阅读 JavaScript 的话。但是通过把这个函数放在 JavaScript 库中,就可以处理 Ajax 服务器响应,而不必处理 XMLHttpRequest 的内部细节。重要的是要理解如何在自己的代码中使用 getReadyStateHandler()。

  在 清单 3 中看到了 getReadyStateHandler() 像这样被调用:handlerFunction = getReadyStateHandler(req, updateCart)。在这个示例中,getReadyStateHandler() 返回的函数将检查在 req 变量中的 XMLHttpRequest 是否已经完成,然后用响应的 XML 调用名为 updateCart 的函数。

  提取购物车数据

  清单 7 是 updateCart() 本身的代码。函数用 DOM 调用检查购物车的 XML 文档,然后更新 Web 页面(请参阅 清单 1),反映新的购物车内容。这里的重点是用来从 XML DOM 提取数据的调用。cart 元素的 generated 属性是在 Cart 序列化为 XML 时生成的一个时间戳,检查它可以保证新的购物车数据不会被旧的数据覆盖。Ajax 请求天生是异步的,所以这个检查可以处理服务器响应未按次序到达的情况。

  清单 7. 更新页面,反映购物车的 XML 文档

function updateCart(cartXML) {

 // Get the root "cart" element from the document
 var cart = cartXML.getElementsByTagName("cart")[0];

 // Check that a more recent cart document hasn't been processed
 // already
 var generated = cart.getAttribute("generated");
 if (generated > lastCartUpdate) {
  lastCartUpdate = generated;

  // Clear the HTML list used to display the cart contents
  var contents = document.getElementById("cart-contents");
  contents.innerHTML = "";

  // Loop over the items in the cart
  var items = cart.getElementsByTagName("item");
  for (var I = 0 ; I < items.length ; I++) {
   var item = items[I];

   // Extract the text nodes from the name and quantity elements
   var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;

   var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue;

   // Create and add a list item HTML element for this cart item
   var li = document.createElement("li");
   li.appendChild(document.createTextNode(name+" x "+quantity));
   contents.appendChild(li);
  }
 }

 // Update the cart's total using the value from the cart document
 document.getElementById("total").innerHTML =
 cart.getAttribute("total");
}

  到此,整个 Ajax 往返过程完成了,但是您可能想让 Web 应用程序运行一下查看实际效果(请参阅 下载 一节)。这个示例非常简单,有很多需要改进之处。例如,我包含了庸何锍抵星宄钅康姆衿鞫舜耄俏薹ù?UI 访问它。作为一个好的练习,请试着在应用程序现有的 JavaScript 代码之上构建出能够实现这个功能的代码。
更多内容请看PCdog.com--Ajax技术  Ajax框架与实例  JAVA和.Net开发专题
上一页  [1] [2] [3] [4] [5]  下一页


  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体
关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved