异步JavaScript和XML(AJAX).ppt

《异步JavaScript和XML(AJAX).ppt》由会员分享，可在线阅读，更多相关《异步JavaScript和XML(AJAX).ppt（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、异步异步 JavaScript 和和 XML(AJAX)与与 Java Enterprise Edition 2006.11前言使用过 Flickr、GMail、Google Suggest 或 Google Maps 的任何用户都会意识到，将出现一种新型的动态 Web 应用程序。这些应用程序的外观和作用与传统的桌面应用程序非常类似，它们不依赖于插件或特定于浏览器的功能。传统的 Web 应用程序是一组 HTML 页，必须重新装入这些页面，才能更改内容的任何部分。在过去几年间，诸如 JavaScript 和层叠样式表(CSS)之类的技术已经发展成熟，可以有效地使用这些技术创建在所有主要浏览器上运

2、行的动态性很强的 Web 应用程序。前言本文档及其相关的解决方案将详细论述这几种技术，目前您可以使用这些技术使 Web 应用程序成为内容更丰富、交互性更强的应用程序，就像桌面应用程序一样 异步JavaScript和XML(AJAX)简介 1 HTML 页使用 JavaScript 可以异步调用装入该页的服务器并获取 XML 文档。然后 JavaScript 可以使用 XML 文档更新或修改 HTML 页的文档对象模型(DOM)。最近使用“异步 JavaScript 和 XML”(Asynchronous JavaScript and XML，AJAX)术语来描述此交互模型。异步JavaScri

3、pt和XML(AJAX)简介 2AJAX 不是一项新兴技术，对于在 Windows 平台上开发 Internet Explorer(IE)的开发者来说，多年来他们一直在使用这些技术。直到最近，这项技术才被称为 Web 远程处理或远程脚本。一段时间以来，Web 开发者还结合使用插件、Java Applet 和隐藏框架来仿真此交互模型。而最近发生的变化就是：在所有平台的主流浏览器中都包含了对 XMLHttpRequest 对象的支持。真正的神奇之处在于产生了 JavaScript XMLHttpRequest 对象。虽然未在正式的 JavaScript 规范中指定此对象，但是目前所有的主流浏览器都

4、支持它。与当前一代浏览器（如 Firefox、IE 和 Safari）中的 JavaScript 和 CSS 支持稍有不同之处在于：它们是可管理的。如果要求您支持较旧的浏览器，则 AJAX 可能不是您的最佳选择。异步JavaScript和XML(AJAX)简介 3基于 AJAX 的客户端的独特之处在于，客户端包含了作为 JavaScript 嵌入的特定于页面的控制逻辑。页面基于事件（如装入的文档、鼠标单击、焦点更改，甚至是计时器）与 JavaScript 进行交互。通过 AJAX 交互，可以清晰地将表示逻辑与数据分开。与每次要显示一个变化时必须重新装入整个页面相比，HTML 页可以根据需要装入

5、很小的数据片段。异步JavaScript和XML(AJAX)简介 4AJAX 需要使用一种不同的服务器端体系结构来支持此交互模型。传统的服务器端 Web 应用程序着重为产生服务器调用的每个客户端事件生成 HTML 文档，并且在每次响应时客户端都会刷新并重新呈现完整的 HTML 页。内容丰富的 Web 应用程序着重于获取 HTML 文档的客户端，该客户端充当一个模板或容器，根据客户端事件使用从服务器端组件检索的 XML 数据在其中添加内容。使用AJAX交互的用例 1实时的表单数据验证：实时的表单数据验证：在用户提交表单之前，可以在表单中验证要求服务器端验证的表单数据，如用户 ID、序列号、邮政编

6、码，甚至是特殊优惠券代码。自动完成：自动完成：表单数据的特定部分（如电子邮件地址、姓名或城市名称）可以在用户键入时自动完成。主要详细操作：主要详细操作：基于客户端事件，HTML 页可以获取有关数据的更详细信息，例如，在不刷新页面的情况下，客户端可以查看个别产品信息的产品清单。使用AJAX交互的用例 2复杂的用户界面控件：复杂的用户界面控件：可以提供不需要页面刷新的控件，如树状结构的控件、菜单和进度栏。刷新页面上的数据：刷新页面上的数据：HTML 页可以轮询服务器中的数据以获取最新的数据，如分数、股票报价、天气预报或特定于应用程序的数据。服务器端通知：服务器端通知：HTML 页可以通过轮询服务器

7、获取事件通知来模拟服务器端推送，包括发送消息通知客户端、刷新页面数据或将客户端重定向到其他页。使用AJAX交互的用例 3此列表并不详尽，但是它表明了利用 AJAX 交互，Web 应用程序可以实现比以往更多的功能。尽管该技术有许多引人注目的优点，但是也存在一些缺点：复杂性：复杂性：服务器端开发者需要了解，在 HTML 客户端页以及服务器端逻辑中需要表示逻辑，才能生成客户端 HTML 页所需的 XML 内容。HTML 页开发者需要具备 JavaScript 技术。随着时间的推移，当创建了新框架，并且为现有框架提供了交互模型支持后，创建支持 AJAX 的应用程序会变得更容易。使用AJAX交互的用例

8、4XMLHttpRequest 对象的标准化：对象的标准化：XMLHttpRequest 还不是 JavaScript 规范的一部分，这表明其行为会随着客户端而发生变化。JavaScript 实现：实现：AJAX 交互在很大程度上依赖 JavaScript（取决于客户端的不同而稍有差异），有关特定于浏览器的差异的详细信息，请访问 QuirksMode.org。调试：调试：很难调试 AJAX 应用程序，这是因为在客户端和服务器中均嵌入了处理逻辑。可查看的源文件：可查看的源文件：在客户端只需从支持 AJAX 的 HTML 页选择“查看源文件”，即可查看客户端 JavaScript。如果基于 AJA

9、X 的应用程序的设计很差，则可能会受到黑客或剽窃者的攻击。使用AJAX交互的用例 5随着开发者编写使用 AJAX 交互模型的应用程序的经验日益丰富，使用 AJAX 技术构建的各种框架和模式可能会纷纷出现。在 AJAX 交互中强调“以部分更改适用全局更改”的框架仍然为时尚早，本文档着重说明现有的 Java 2 Enterprise Edition(J2EE)技术（如 Servlet、JavaServer Pages、JavaServer Faces 和 Java 标准标记库(JSTL)）目前是如何支持 AJAX 交互的。AJAX 交互的分析交互的分析 1到目前为止，已经论述了 AJAX 的含义以

10、及存在的一些疑难问题，现在将所有内容结合起来演示支持 AJAX 的 J2EE 应用程序。让我们来看一个示例，Web 应用程序包含了一个静态 HTML 页，或者用 JSP 技术生成的 HTML 页，该页包含了一个 HTML 表单，要求服务器端逻辑验证表单数据而不刷新页面。名为 ValidateServlet 的服务器端 Web 组件(Servlet)将提供验证逻辑。下图描述了提供验证逻辑的 AJAX 交互的详细信息。AJAX 交互图AJAX 交互的分析交互的分析 2下面的项表示了 AJAX 交互的设置，如上图显示的那样。发生客户端事件。创建并初始化 XMLHttpRequest 对象。XMLHt

11、tpRequest 对象发出调用。请求由 ValidationServlet 进行处理。ValidationServlet 返回包含结果的 XML 文档。XMLHttpRequest 对象调用 callback()函数并处理结果。更新 HTML DOM。现在让我们更详细地了解 AJAX 交互的每个步骤。1.发生客户端事件调用 JavaScript 函数是事件产生的结果。在本例中，函数 validate()会映射到链接或表单组件上的 onkeyup 事件。每次在表单字段中按下键时，上面的表单元素都将调用 validate()。2.创建并初始化 XMLHttpRequest 对象 1初始化并配置

12、XMLHttpRequest 对象。var req;function validate()var idField=document.getElementById(idField);var url=validate?id=+escape(idField.value);if(window.XMLHttpRequest)req=new XMLHttpRequest();else if(window.ActiveXObject)req=new ActiveXObject(Microsoft.XMLHTTP);req.open(GET,url,true);req.onreadystatechange=c

13、allback;req.send(null);创建并初始化 XMLHttpRequest 对象 2validate()函数会初始化 XMLHttpRequest 对象。open 方法需要三个参数，即表示要使用的 HTTP 方法的 GET 或 POST 的 url 字符串、目标 URL 的字符串以及表明是否发出异步调用的布尔值。如果将交互设置为异步(true)，则必须指定回调函数。此交互的回调函数是使用语句 req.onreadystatechange=callback;设置的。有关详细信息，请参见标题为“XMLHttpRequest 对象调用 callback()函数并处理结果”的部分。3.X

14、MLHttpRequest 对象发出调用 1执行到语句 req.send(null);时，将发出调用。对于 HTTP 获得的内容可能是 null 或空值。为 XMLHttpRequest 对象调用此函数时，会调用初始化对象期间设置的 URL。在本示例中，是以 URL 参数的形式包含传递的数据(id)。当请求为幂等时（意味着两个重复的请求将返回相同的结果），请使用 HTTP GET。使用 HTTP GET 方法时，包括转义的 URL 参数在内的 URL 长度受某些浏览器以及服务器端 Web 容器的限制。将数据发送到影响服务器端应用程序状态的服务器时，应该使用 HTTP POST 方法。HTTP

15、POST 要求使用以下语句为 XMLHttpRequest 对象设置 Content-Type 头：XMLHttpRequest 对象发出调用2通过 JavaScript 发送表单值时，应该考虑字段值的编码。JavaScript 包括一个 escape()函数，应该使用该函数确保对本地化的内容进行正确编码并且正确转义特殊字符。req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);req.send(id=+escape(idTextField.value);4.请求由 ValidationServlet 进行处理

16、映射到 URI“验证”的 Servlet 会检查用户 ID 是否在用户数据库中。Servlet 就像处理任何其他 HTTP 请求那样处理 XMLHttpRequest。下面的示例显示了一个服务器，该服务器从请求中提取 id 参数，并验证是否使用了该参数。public class ValidationServlet extends HttpServlet private ServletContext context;private HashMap users=new HashMap();public void init(ServletConfig config)throws ServletExc

17、eption this.context=config.getServletContext();users.put(greg,account data);users.put(duke,account data);public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException String targetId=request.getParameter(id);if(targetId!=null)&!users.containsKey(target

18、Id.trim()response.setContentType(text/xml);response.setHeader(Cache-Control,no-cache);response.getWriter().write(valid);else response.setContentType(text/xml);response.setHeader(Cache-Control,no-cache);response.getWriter().write(invalid);5.ValidationServlet 返回 XML 文档用户 id duke 在 users HashMap 中的用户 i

19、d 列表中。ValidationServlet 会将一个 XML 文档写入包含值为 invalid 的 message 元素的响应。更复杂的用例可能需要 DOM、XSLT 或其他 API 才能生成响应。response.setContentType(text/xml);response.setHeader(Cache-Control,no-cache);response.getWriter().write(invalid);开发者需要注意的两点是：Content-Type 需要设置为 text/xml；Cache-Control 需要设置为 no-cache。XMLHttpRequest 对象

20、只处理 Content-Type 为 text/xml 的请求；在重复请求相同的 URL（包括 URL 参数）却返回不同的响应时，将 Cache-Control 设置为 no-cache 会阻止浏览器在本地缓存响应。6.XMLHttpRequest 对象调用 callback()函数并处理结果 1当 XMLHttpRequest 对象的 readyState 发生更改时，XMLHttpRequest 对象被配置为调用 callback()函数。假定发出了对 ValidationServlet 的调用，并且 readyState 为 4，表示 XMLHttpRequest 调用完成。HTTP 状

21、态代码为 200，表示 HTTP 交互成功。function callback()if(req.readyState=4)if(req.status=200)/update the HTML DOM based on whether or not message is valid XMLHttpRequest 对象调用 callback()函数并处理结果 2浏览器保留被显示文档的对象表示（称为文档对象模型(DOM)）。HTML 页中的 JavaScript 可以访问 DOM，并且可以通过 API 在装入页面后修改 DOM。请求成功后，JavaScript 代码会修改 HTML 页的 DOM。使

22、用 req.responseXML（其中 req 是 XMLHttpRequest 对象）的 JavaScript 代码，可以使用从 ValidationServlet 检索的 XML 文档的对象表示。DOM API 为 JavaScript 提供了一种方法，可以导航文档内容并使用该内容修改 HTML 页的 DOM。通过调用 req.responseText 检索的文档的字符串表示。现在，让我们通过查看从 ValidateServlet 返回的以下 XML 文档，了解如何在 JavaScript 中使用 DOM API。XMLHttpRequest 对象调用 callback()函数并处理结果

23、 3 valid 上面的示例是一个简单的 XML 片段，它包含了 message 元素（只是字符串 valid 或 invalid）的发送方。更高级的样例可能包含了显示给用户的多条消息和有效名称。parseMessages()函数会处理从 ValidationServlet 检索的 XML 文档。此函数将使用 message 元素的值调用 setMessage()以更新 HTML DOM。function parseMessage()var message=req.responseXML.getElementsByTagName(message)0;setMessage(message.chi

24、ldNodes0.nodeValue);7.更新 HTML DOM 1JavaScript 可以使用许多 API 获得对 HTML DOM 中任何元素的引用。获得元素引用的建议方法是调用 document.getElementById(“userIdMessage”)，其中“userIdMessage”是在 HTML 文档中出现的元素的 id 属性。通过对元素的引用，现在可以使用 JavaScript 修改元素的属性，修改元素的样式属性，或者添加、删除或修改子元素。更新 HTML DOM 2更改元素的主体内容的一种常用方法是为元素设置 innerHTML 属性，如以下示例所示。在设置 inne

25、rHTML 之后，会立即重新呈现 HTML 页中受影响的部分。如果 innerHTML 属性包含诸如 或 之类的元素，则会同时获取并呈现那些元素指定的内容。function setMessage(message)var userMessageElement=document.getElementById(userIdMessage);userMessageElement.innerHTML=+message+;更新 HTML DOM 3使用此方法的一个主要缺点是：设置为 元素主体的 HTML 将被硬编码为 JavaScript 中的字符串，包括其他标记，如 元素。在字符串表示中如果混有 Jav

26、aScript 代码，则会使页面难以理解和编辑。另一种修改 HTML DOM 的方法是动态创建新元素，并将它们作为子级元素附加到目标元素中，如下例所示。function setMessage(message)var userMessageElement=document.getElementById(userIdMessage);var userIdMessageFont=document.getElementById(userIdMessageFont);var messageElement=document.createTextNode(message);if(userMessageEle

27、ment.childNodes0)/update the elements userIdMessageFont.replaceChild(messageElement,userIdMessageFont.childNodes0);else /create the new elements var fontElement=document.createTextNode(font);fontElement.setAtribute(id,userIdMessageFont);fontElement.setAtribute(color,red);userMessageElement.appendChi

28、ld(fontElement);fontElement.appendChild(messageElement);更新 HTML DOM 4上述代码样例显示了如何使用 JavaScript DOM API 以编程方式创建元素或更改元素。不同浏览器中的 JavaScript DOM API 支持可能是不同的，因此在开发应用程序时需要小心。最终的想法最终的想法我们已经看到了可能有许多 AJAX 交互可以解决的问题。J2EE 技术为开发和部署使用 API 的基于 AJAX 的应用程序结合使用 HTTP 处理、数据库、Web 服务、XML 处理和业务对象提供了良好的基础。通过更好地了解此交互模型，当前应用程序可以具有更强的交互性，为最终用户提供更佳的体验。本文档描述了常见用例、涉及的技术，并分析了 AJAX 交互。有关更具体的示例，请参阅其他解决方案。谢谢大家