`
javadingle2008
  • 浏览: 66334 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax: 构建动态的 Java 应用程序(图)

阅读更多
在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java? 开发人员来说也是一个严峻的挑战。在这个系列中,作者 Philip McCarthy 介绍了一种创建动态应用程序体验的开创性方式。Ajax(异步 JavaScript 和 XML)是一种编程技术,它允许为基于 Java 的 Web 应用程序把 Java 技术、XML 和 JavaScript 组合起来,从而打破页面重载的范式。
  
  Ajax(即异步 JavaScript 和 XML)是一种 Web 应用程序开发的手段,它采用客户端脚本与 Web 服务器交换数据。所以,不必采用会中断交互的完整页面刷新,就可以动态地更新 Web 页面。使用 Ajax,可以创建更加丰富、更加动态的 Web 应用程序用户界面,其即时性与可用性甚至能够接近本机桌面应用程序。
  
  Ajax 不是一项技术,而更像是一个 模式 —— 一种识别和描述有用的设计技术的方式。Ajax 是新颖的,因为许多开发人员才刚刚开始知道它,但是所有实现 Ajax 应用程序的组件都已经存在若干年了。它目前受到重视是因为在 2004 和 2005 年出现了一些基于 Ajax 技术的非常棒的动态 Web UI,最著名的就是 Google 的 GMail 和 Maps 应用程序,以及照片共享站点 Flickr。这些用户界面具有足够的开创性,有些开发人员称之为“Web 2.0”,因此对 Ajax 应用程序的兴趣飞速上升。
  
  在这个系列中,我将提供使用 Ajax 开发应用程序需要的全部工具 。在第一篇文章中,我将解释 Ajax 背后的概念,演示为基于 Java 的 Web 应用程序创建 Ajax 界面的基本步骤。我将使用代码示例演示让 Ajax 应用程序如此动态的服务器端 Java 代码和客户端 JavaScript。最后,我将指出 Ajax 方式的一些不足,以及在创建 Ajax 应用程序时应当考虑的一些更广的可用性和访问性问题。
  
  更好的购物车
  
  可以用 Ajax 增强传统的 Web 应用程序,通过消除页面装入从而简化交互。为了演示这一点,我采用一个简单的购物车示例,在向里面添加项目时,它会动态更新。这项技术如果整合到在线商店,那么用户可以持续地浏览和向购物车中添加项目,而不必在每次点击之后都等候完整的页面更新。虽然这篇文章中的有些代码特定于购物车示例,但是演示的技术可以应用于任何 Ajax 应用程序。清单 1 显示了购物车示例使用的有关 HTML 代码,整篇文章中都会使用这个 HTML。
  
  清单1. 购物车示例的有关片断
  
  <!-- Table of products from store's catalog, one row per item -->
  <th>Name</th> <th>Description</th> <th>Price</th> <th></th>
  ...
  <tr>
  <!-- Item details -->
  <td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
  <td>
  <!-- Click button to add item to cart via Ajax request -->
  <button onclick="addToCart('hat001')">Add to Cart</button>
  </td>
  </tr>
  ...
  
  <!-- Representation of shopping cart, updated asynchronously -->
  <ul id="cart-contents">
  
  <!-- List-items will be added here for each item in the cart -->
  
  </ul>
  
  <!-- Total cost of items in cart displayed inside span element -->
  Total cost: <span id="total">$0.00</span>
  
  Ajax 往返过程
  
  Ajax 交互开始于叫作 XMLHttpRequest 的 JavaScript 对象。顾名思义,它允许客户端脚本执行 HTTP 请求,并解析 XML 服务器响应。Ajax 往返过程的第一步是创建 XMLHttpRequest 的实例。在 XMLHttpRequest 对象上设置请求使用的 HTTP 方法(GET 或 POST)以及目标 URL。
  
  现在,您还记得 Ajax 的第一个 a 是代表 异步(asynchronous) 吗?在发送 HTTP 请求时,不想让浏览器挂着等候服务器响应。相反,您想让浏览器继续对用户与页面的交互进行响应,并在服务器响应到达时再进行处理。为了实现这个要求,可以在 XMLHttpRequest 上注册一个回调函数,然后异步地分派 XMLHttpRequest。然后控制就会返回浏览器,当服务器响应到达时,会调用回调函数。
  
  在 Java Web 服务器上,请求同其他 HttpServletRequest 一样到达。在解析了请求参数之后,servlet 调用必要的应用程序逻辑,把响应序列化成 XML,并把 XML 写入 HttpServletResponse。
  
  回到客户端时,现在调用注册在 XMLHttpRequest 上的回调函数,处理服务器返回的 XML 文档。最后,根据服务器返回的数据,用 JavaScript 操纵页面的 HTML DOM,把用户界面更新。图 1 是 Ajax 往返过程的顺序图。
  
   图 1. Ajax 往返过程
  
  现在您对 Ajax 往返过程有了一个高层面的认识。下面我将放大其中的每一步骤,进行更详细的观察。如果过程中迷了路,请回头看图 1 —— 由于 Ajax 方式的异步性质,所以顺序并非十分简单。
  
  分派 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 代码。
  
  servlet 请求处理
  
  用 servlet 处理 XMLHttpRequest,与处理普通的浏览器 HTTP 请求一样。可以用 HttpServletRequest.getParameter() 得到在 POST 请求
分享到:
评论

相关推荐

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

    在Java应用程序中,Ajax技术被广泛应用于构建交互性强、响应速度快的Web应用,克服了传统页面重载导致的用户体验中断问题。 在传统的Web应用中,用户与服务器之间的交互通常涉及整个页面的刷新,这不仅可能导致用户...

    面向Java开发人员的Ajax之1:构建动态的Java应用程序

    面向Java开发人员的Ajax技术是构建现代Web应用程序的关键技术之一,尤其对于提升用户体验至关重要。Ajax,全称为异步JavaScript和XML,它打破了传统的Web应用程序页面重载模式,使得用户可以在不进行完整页面刷新的...

    面向 Java 开发人员的 Ajax 构建动态的 Java 应用程序

    对于Java开发人员来说,理解并掌握Ajax技术是构建交互性强、用户体验良好的Web应用程序的关键。本资源面向Java开发者,旨在帮助他们利用Ajax创建动态的Java应用。 首先,Ajax的核心原理在于XMLHttpRequest对象,它...

    用Ajax构建动态Java程序

    【Ajax:构建动态Java程序】 Ajax,全称Asynchronous JavaScript and XML,是一种用于创建富互联网应用(RIA)的技术,它可以实现在不刷新整个网页的情况下,通过客户端脚本与Web服务器交换数据并更新部分网页内容...

    AJax详解.chm

    第 12 部分:面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 第 13 部分:面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化 第 14部分:面向 Java 开发人员的 Ajax 结合 Direct Web Remoting 使用 Ajax ...

    面向 Java 开发人员的 Ajax: 使用 Jetty 和 Direct Web Remoting 编写可扩展的 Comet 应用程序

    面向Java开发人员的Ajax技术,特别是与Jetty服务器和Direct Web Remoting (DWR)框架的结合,为创建高性能、可扩展的Comet应用程序提供了强大的工具。Comet是一种Web交互模式,它允许服务器向客户端推送数据,而不...

    java+servlet+ajax程序

    Java、Servlet 和 Ajax 是构建动态网站的关键技术,它们共同为用户提供了交互性和实时更新的能力。本指南将深入解析这些技术,并结合实际应用,帮助您理解和掌握如何利用它们来开发高效、响应迅速的网络应用。 一、...

    用于Java应用程序的Ajax简介

    本项目“用于Java应用程序的Ajax简介”就是一个使用NetBeans构建的示例项目,旨在帮助开发者快速理解和应用Ajax技术。** **在项目中,我们可能会看到以下关键组成部分:** 1. **HTML页面**:HTML文件是用户界面的...

    ajax开发的java留言程序

    在Java编程环境中,Ajax常用于创建动态、交互性强的Web应用程序,比如本例中的“留言程序”。 Java留言程序的设计通常涉及到以下几个关键知识点: 1. **前端技术**: - HTML:构建页面结构。 - CSS:美化页面...

    Spring+Ajax+Orcale+java 应用实列

    在IT行业中,Spring、Ajax、Oracle和Java是四个非常关键的技术领域,它们组合起来可以构建出高效、可扩展的企业级应用程序。以下是对这些技术及其在实际应用中的结合的详细解释。 1. **Spring框架**:Spring是Java...

    DWR:java ajax application

    DWR (Direct Web Remoting) 是一种基于Ajax的Java框架,它简化了JavaScript与Java之间的通信过程,使得开发者能够更加高效地构建富客户端应用程序。 #### 二、DWR简介 DWR由Joe Walker创建,首次发布于2003年,是...

    Dojo构建Ajax应用程序

    《Dojo构建Ajax应用程序》是一本专注于利用Dojo框架创建高效、交互性强的Ajax应用程序的指南。这本书深入探讨了Dojo工具集的功能和用法,旨在帮助开发者更好地理解和运用这个强大的JavaScript库。Dojo是一个开源的...

    用案例学Java Web整合开发:Java+Eclipse+Struts 2+Ajax

    Java Web整合开发是构建Web应用程序的关键技术,涵盖了Java语言、Eclipse集成开发环境(IDE)、Struts 2框架以及Ajax异步JavaScript和XML技术。这个主题深入探讨了这些技术如何协同工作,创建出高效、用户友好的Web...

    Java Web应用程序设计

    Java Web应用程序设计是IT领域中的一个重要分支,它涵盖了多种技术和概念,用于构建基于Web的交互式应用程序。在Java平台上,这种技术通常涉及到Servlet、JSP(JavaServer Pages)、JavaBean、MVC(Model-View-...

    利用 Google Web Toolkit 在 Java 框架中开发 Ajax 应用程序

    "利用 Google Web Toolkit 在 Java 框架中开发 Ajax 应用程序" 这个标题提到了两个关键技术和一个目的。Google Web Toolkit(GWT)是主要工具,它允许开发者使用 Java 语言来编写前端的 AJAX 应用程序。Ajax,即异步...

    构建动态导航的Web应用程序

    6. **数据绑定和状态管理**:动态导航需要实时反映应用程序的状态。MVVM(Model-View-ViewModel)架构模式,如Angular的双向数据绑定和Vuex(Vue.js的状态管理库),可以帮助开发者管理全局状态,确保导航与数据的...

    面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax

    总结起来,学习并掌握如何在Java应用中使用DWR进行Ajax开发,可以帮助开发者创建更加动态和响应式的Web界面。通过理解DWR的架构和配置,以及如何与Java后端进行交互,开发者可以有效地提升Web应用的用户体验。而阅读...

    java+ajax

    Java是一种多平台、面向对象的编程语言,广泛用于构建服务器端应用程序,而Ajax(Asynchronous JavaScript and XML)则是一种用于创建动态和交互式网页的技术。让我们深入了解一下这两个技术以及它们如何协同工作。 ...

Global site tag (gtag.js) - Google Analytics