科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道Ajax技术:构建动态的Java应用程序2

Ajax技术:构建动态的Java应用程序2

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

  页面重载提出了一个在Web应用开发中最大的可用性障碍,对于java开发来说也是一个重大的挑战。在本系列中,作者Philip McCarthy介绍了通过后台通道的方法来创建动态Web应用的经验。

作者:Philip McCarthy 来源:IT专家网 2008年5月13日

关键字: 动态 构建 AJAX java

  • 评论
  • 分享微博
  • 分享邮件
 发送一个XMLHttpRequest

      我将从Ajax时序图的起点开始:从浏览器创建并发送一个XMLHttpRequest。不幸的是,在不同的浏览器中创建XMLHttpRequest的方法都不一样。列表2中示例的JavaScript函数消除了这些与浏览器种类相关的问题,正确检测与当前浏览器相关的方法,并返回一个可以使用的XMLHttpRequest。最好将它看成备用代码,将它简单拷贝到你的JavaScript库中,在需要一个XMLHttpRequest时使用它即可。

列表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购物车对象中,并可以序列化。

      列表4是处理Ajax请求并更新购物车的简单servlet的代码片断。从用户会话中检索出一个Cart Bean,并按请求的参数更新它。之后Cart Bean被序列化到XML,并被写回ServletRespone。注意,一定要将响应内容的类型设置为application/xml,否则,XMLHttpRequest将不能将响应内容解析为一个XML DOM。

      列表4:处理Ajax请求的Servlet代码

public void doPost(HttpServletRequest req, HttpServletResponse res)
                        throws java.io.IOException {
  Cart cart = getCartFromSession(req);
  String action = req.getParameter("action");
  String item = req.getParameter("item");
  if ((action != null)&&(item != null)) {
    // 在购物车中添加或移除一个条目
    if ("add".equals(action)) {
      cart.addItem(item);
    } else if ("remove".equals(action)) {
      cart.removeItems(item);
    }
  }
  // 将购物车状态序列化到XML
  String cartXml = cart.toXml();
  // 将XML写入response.
  res.setContentType("application/xml");
  res.getWriter().write(cartXml);
}

      列表5展示了由Cart.toXml()方法生成的XML。注意到生成的cart元素的属性,是一个通过System.currentTimeMillis()生成的时间戳。

      列表5:Cart对象序列化得到的XML

<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
  <item code="hat001">
    <name>Hat</name>
    <quantity>2</quantity>
  </item>
  <item code="cha001">
    <name>Chair</name>
    <quantity>1</quantity>
  </item>
  <item code="dog001">
    <name>Dog</name>
    <quantity>1</quantity>
  </item>
</cart>

      如果你观察一下下载站点提供的例子应用源码中的Cart.java,你将会看到它通过简单地追加字符串来生成XML。对于本例子来说,它已经足够了,我将会在本系统文章的以后一期中介绍一些更好的方法。

      现在你知道了CartServlet如何响应一个XMLHttpRequest。下一步是返回到客户端,如何用服务器响应来更新页面状态。

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章