毕业设计（论文）外文资料

Asynchronous JavaScript Technology and XML(Ajax) With the Java Platform

By Greg Murray

June 9,2005

Anyone who has used Flickr, GMail, Google Suggest, or Google Maps will realize that a new breed of dynamic web applications is emerging. These applications look and act very similar to traditional desktop applications without relying on plug-ins or browser-specific features. Web applications have traditionally been a set of HTML pages that must be reloaded to change any portion of the content. Technologies such as JavaScript programming language and cascading style sheets (CSS) have matured to the point where they can be used effectively to create very dynamic web applications that will work on all of the major browsers. This article will detail several techniques that you can use today to enable your web applications to be more rich and interactive like desktop applications.

1. Introducing Asynchronous JavaScript Technology and XML (Ajax)

Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML ( Ajax) has emerged recently to describe this interaction model.

Ajax is not new. These techniques have been available to developers targeting Internet Explorer on the Windows platform for many years. Until recently, the technology was known as web remoting or remote scripting. Web developers have also used a combination of plug-ins, Java applets, and hidden frames to emulate this interaction model for some time. What has changed recently is the inclusion of support for the XMLHttpRequest object in the JavaScript runtimes of the mainstream browsers. The real magic is the result of the JavaScript technology#39;s XMLHttpRequest object. Although this object is not specified in the formal JavaScript technology specification, all of today#39;s mainstream browsers support it. The subtle differences with the JavaScript technology and CSS support among current generation browsers such as Mozilla Firefox, Internet Explorer, and Safari are manageable. JavaScript libraries such as Dojo, Prototype, and the Yahoo User Interface Library have emerged to fill in where the browsers are not as manageable and to provide a standardized programming model. Dojo, for example, is addressing accessibility, internationalization, and advanced graphics across browsers -- all of which had been thorns in the side of earlier adopters of Ajax. More updates are sure to occur as the need arises.

What makes Ajax-based clients unique is that the client contains page-specific control logic embedded as JavaScript technology. The page interacts with the JavaScript technology based on events such as the loading of a document, a mouse click, focus changes, or even a timer. Ajax interactions allow for a clear separation of presentation logic from the data. An HTML page can pull in bite-size pieces to be displayed. Ajax will require a different server-side architecture to support this interaction model. Traditionally, server-side web applications have focused on generating HTML documents for every client event resulting in a call to the server. The clients would then refresh and re-render the complete HTML page for each response. Rich web applications focus on a client fetching an HTML document that acts as a template or container into which to inject content, based on client events using XML data retrieved from a server-side component.

Some uses for Ajax interactions are the following:

• Real-time form data validation: Form data such as user IDs, serial numbers, postal codes, or even special coupon codes that require server-side validation can be validated in a form before the user submits a form. See Realtime Form Validation for details.
• Autocompletion: A specific portion of form data such as an email address, name, or city name may be autocompleted as the user types.
• Load on demand: Based on a client event, an HTML page can fetch more data in the background, allowing the browser to load pages more quickly.
• Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich text editors, calendars, and progress bars allow for better user interaction and interaction with HTML pages, generally without requiring the user to reload the page.
• Refreshing data and server push: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. A client may use Ajax techniques to get a set of current data without reloading a full page. Polling is not the most effecient means of ensuring that data on a page is the most current. Emerging techniques such as Comet are being developed to provide true server-side push over HTTP by keeping a persistent connection between the client and server. See this blog entry on Comet using Grizzly for more on the development of server push with Java technology.
• Partial submit: An HTML page can submit form da

  全文共20991字，剩余内容已隐藏，支付完成后下载完整资料

  ---

  
  异步JavaScript技术和XML（Ajax）与Java平台

  作者：Greg Murray

  2005 年 6 月 9 日

  使用过Flickr、GMail,、Google Suggest或Google地图的人都知道一种全新的动态WEB应用正在成型，这些应用看上去和传统桌面应用非常相似，他们不依赖于插件或者浏览器特效。传统意义上的WEB应用就是一组网页，当页面上有任何一点内容有所变化的时候必须更新整个网页。一些技术比如JavaScript和CSS已经非常成熟，你可以使用他们高效的创建动态网页，并可以跑在大多数主流浏览器上。本文将细述数种，可以使你的WEB应用更丰富更具交互性（就象桌面应用一样）的技术。

  1. 介绍异步JavaScript技术和XML（Ajax）

  使用JavaScript技术，HTML网页可以异步调用生成它的服务器上的服务并可以获取返回的XML文档形式的结果。JavaScript再使用 这个XML文档更新或改动本网页的文档对象模型（DOM），名词AJAX就是近年来出现的用与描述这种交互模式的新名词。许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web服务中包含了，就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。综合各种变化的技术和强耦合的客户服务端环境，AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

  AJAX并不是新事物，数年前使用微软IE浏览器的开发者们就在使用它。直到最近，这项技术被冠以远程脚本而更出名了。以前WEB开发者使用插件， applets或者隐藏框架来仿效这种交互模式。但是现在由于XMLHttpRequest对象技术已经在各大平台的主流浏览器上普及，所以这种模仿的情况越来越少了。真正神奇的事情在于JavaScript和XMLHttpRequest对象技术的结合，尽管XMLHttpRequest对象技术并不属 于JavaScript标准规范。但是现代的主流浏览器都支持，在Firefox、IE、Safari这些浏览器中，对JavaScript和CSS的执行有微小不同，但这些不同之处很容易理解和处理。如果你一定要兼容老一代浏览器那还是不要用 AJAX了。如名字所示，AJAX的概念中最重要而最易被忽视的是它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。在大部分时间，JavaScript通常被服务端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来自以前编写JavaScript代码的经历：繁杂而又易出错的语言。类似的，它也被认为将应用逻辑任意地散布在服务端和客户端中，这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。

  基于AJAX的客户端独特之处在于包含特定页面控制逻辑的客户端嵌入到JavaScript的技术中。页面与JavaScript的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX清楚的将表示逻辑和数据分离开来，一个HTML网页能够在需要的时候获取以比特为单位的数据片段。这跟以前的有一点变化就必须刷新整个页面的做法是不同。同时 AJAX也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端WEB应用专注于为每一个客户端的每一次请求生成HTML页面，每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的WEB应用专注于客户端把HTML文档当作模版或容器，客户端向这个容器中插入内容，每当客户端发生事件，客户端都可以向服务端发出请求并使用服务端返回的XML数据。

  一些AJAX的使用例子如下：

  • 实时的表单数据验证：如用户ID，序列号，邮政编码，优惠券代码这样的表单数据可以在用户提交整个表单之前就得到验证。
  • 自动完成：一种特定表单数据，如电子邮件地址、姓名、城市名称可以根据用户的类型自动填写。
  • 负荷需求：在一个客户端事件的基础上，一个HTML页面可以在后台获取更多的数据，使浏览器载入网页更迅速。
  • 智能客户端接口控制：诸如树、菜单、工具条都可以在不刷新页面的情况下随时提供服务。
  • 刷新的数据和服务器推送：HTML页面可以从服务端筛选动态数据并显示，如分数，股票报价，天气预报等。客户可以使用Ajax技术来获得无需刷新整个页面的当前数据集。投票并不是一种确保当前数据是最新的有效手段。如彗星正在开发新兴技术，提供客户端和服务器端之间通过HTTP的推动保持真正持久的连接。看到这篇彗星博客条目使用的灰色技术更加推动了Java服务端技术的发展。
  • 部分提交：提交一个HTML页面可以无需刷新整个页面需要的表单数据。
  • 混搭：HTML页面可以获取数据，使用服务器端代理或由包括外部脚本混合使用您的应用程序或服务的数据的外部数据。例如，你可以混合从如谷歌地图的第三方使用自己的应用程序的内容或数据。
  • 页作为一个应用：Ajax技术，可创建单页的应用程序的外观和桌面应用程序非常相似的感觉。参见关于使用Ajax的文章，教您如何使用今天的Portlet应用程序和更多的portlet。

  虽然不是包罗万象，这份清单显示，允许Web应用程序使用Ajax交互做的远远超过他们在过去所做的那样。

  2. 一个Ajax交互解剖

  现在，我们已经讨论了什么是Ajax，现在来看Ajax一些高层次的问题，让我们把所有的拼在一起，看看支持Ajax的Java应用程序。

  让我们考虑一个例子。一个Web应用程序包含一个静态的HTML页或HTML页面生成的JSP技术中包含一个HTML表单，需要在服务器端验证逻辑，而不用刷新页面的表单数据。一个服务器端的Web组件（servlet的）命名ValidateServlet将提供验证逻辑。图1描述了Ajax交互的细节，将提供验证逻辑。

  图1：Ajax交互提供验证逻辑

  下列项目代表了一个Ajax交互设置，它们在图1中显示。步骤如下：

  1）客户端事件发生。

  2）一个XMLHttpRequest对象被创建并配置。

  3）XMLHttpRequest对象发出请求。

  4）请求被ValidateServlet处理。

  5）ValidateServlet返回一个包含结果的XML文档。

  6）XMLHttpRequest对象调用callback()函数并处理结果。

  7）HTML 文档对象被更新。

  现在让我们来看看每个Ajax更详细的一步。

  2.1 客户端事件发生

  JavaScript技术功能称为一个事件的结果。在这种情况下，函数的validate()可能被映射到一个链接或表单组件的onkeyup事件。

  lt;input type='text'

  size='20'

  id='userid'

  name='id'

  onkeyup='validate();'gt;

  这种形式下，每次用户点击相应按钮，就将调用该validate()函数。

  2.2 一个XMLHttpRequest对象被创建并配置

  创建一个XMLHttpRequest对象和配置。

  var req;

  function validate() {

  var idField = document.getElementById('userid');

  var url = 'validate?id=' encodeURIComponent(idField.value);

  if (typeof XMLHttpRequest != 'undefined') {

  req = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

  req = new ActiveXObject('Microsoft.XMLHTTP');

  }

  req.open('GET', url, true);

  req.onreadystatechange = callback;

  req.send(null);

  }

  调用XMLHttpRequest对象的open方法，url为请求的服务端组件路径，true表示这个调用是异步的，如果设置为异步就必须还要有一个callback函数如：req.onreadystatechange = callback;。 open函数需要三个参数：HTTP方法，这是GET或POST;的服务器端组件，该对象将与网址，以及一个布尔值，指示是否将作出异步调用。 API是XMLHttpRequest.open(String method, String URL, boolean asynchronous)。详情请参照第6条。

  2.3 XMLHttpRequest对象发送请求

  执行到req.send(null)的时候发出请求。如果是GET请求那么内容可以为空，在url附加参数。在这个例子中，即posted ( id)的数据是作为URL参数。

  使用HTTP GET请求时，这意味着两个重复的请求将返回相同的结果。当使用HTTP GET方法，URL的长度，包括转义URL参数，是由某些浏览器限制和服务器端的Web容器。 如果是HTTP POST方法时，应当使用发送数据到服务器，将影响服务器端应用程序的状态。一个HTTP POST要求的内容类型头的XMLHttpRequest对象上设置使用以下语句：

  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  req.send('id=' encodeURIComponent(idTextField.value));

  如果用JavaScript产生表单元素值，必须确保值编码的正确，JavaScript有一个encodeURIComponent() ()函数用于保障正确的编码，并把特定字符正确的忽略掉。

  2.4 请求被ValidateServlet所处理

  一个servlet映射到URI“验证“检查用户ID是否在用户数据库中。

  servlet处理XMLHttpRequest就和处理其他HTTP请求一样。下面的例子显示了服务器从请求中提取参数，并验证身份证是否已采取的参数。

  public class ValidateServlet extends HttpSe

  全文共10030字，剩余内容已隐藏，支付完成后下载完整资料

  ---

  资料编号：[9249]，资料为PDF文档或Word文档，PDF文档可免费转换为Word

您可能感兴趣的文章

• 使用金属伪影减少算法从 CT 数据生成的数字模型的准确性外文翻译资料
• 彩色光流外文翻译资料
• 云环境下基于虚拟机配置文件针对DDOS攻击的最优网络攻击探测方法外文翻译资料
• 监控大视频数据分析中的模糊逻辑: 综述、挑战和研究方向外文翻译资料
• PeopleSoft人力资源管理系统实施外文翻译资料
• 图像绗缝的纹理合成与转移外文翻译资料
• 管理云中的资源:Chrome扩展到OpenStack外文翻译资料
• 一种基于凸显区域检测和SPBVM的美学QR码新算法外文翻译资料
• 微信小程序-所有你需要知道外文翻译资料
• Java核心技术卷II高级特性外文翻译资料