异步 JavaScript 和 XML (AJAX) .ppt

使用AJAX交互的用例 1
实时的表单数据验证：在用户提交表单之前， 实时的表单数据验证： 可以在表单中验证要求服务器端验证的表单 数据，如用户 ID、序列号、邮政编码，甚 至是特殊优惠券代码。 自动完成：表单数据的特定部分（如电子邮 自动完成： 件地址、姓名或城市名称）可以在用户键入 时自动完成。 主要详细操作：基于客户端事件，HTML 页 主要详细操作： 可以获取有关数据的更详细信息，例如，在 不刷新页面的情况下，客户端可以查看个别 产品信息的产品清单。
4. 请求由 ValidationServlet 进行处理 映射到 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 ServletException { 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(targetId.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"); } } }
AJAX 交互图
AJAX 交互的分析 2
下面的项表示了 AJAX 交互的设置，如上图显示 的那样。
– – – – – – – 发生客户端事件。 创建并初始化 XMLHttpRequest 对象。 XMLHttpRequest 对象发出调用。 请求由 ValidationServlet 进行处理。 ValidationServlet 返回包含结果的 XML 文档。 XMLHttpRequest 对象调用 callback() 函数并处理结果。 更新 HTML DOM。
前言
本文档及其相关的解决方案将详细论述这几 种技术，目前您可以使用这些技术使 Web 应用程序成为内容更丰富、交互性更强的应 用程序，就像桌面应用程序一样
异步JavaScript和XML(AJAX)简介 1
HTML 页使用 JavaScript 可以异步调用装入 该页的服务器并获取 XML 文档。然后 JavaScript 可以使用 XML 文档更新或修改 HTML 页的文档对象模型 (DOM)。 最近使用“异步 JavaScript 和 XML” (Asynchronous JavaScript and XML， AJAX) 术语来描述此交互模型。
异步JavaScript和XML(AJAX)简介 3
基于 AJAX 的客户端的独特之处在于，客户 端包含了作为 JavaScript 嵌入的特定于页 面的控制逻辑。页面基于事件（如装入的文 档、鼠标单击、焦点更改，甚至是计时器） 与 JavaScript 进行交互。 通过 AJAX 交互，可以清晰地将表示逻辑与 数据分开。与每次要显示一个变化时必须重 新装入整个页面相比，HTML 页可以根据需 要装入很小的数据片段。
异步JavaScript和XML(AJAX)简介 4
AJAX 需要使用一种不同的服务器端体系结 构来支持此交互模型。传统的服务器端 Web 应用程序着重为产生服务器调用的每 个客户端事件生成 HTML 文档，并且在每 次响应时客户端都会刷新并重新呈现完整的 HTML 页。 内容丰富的 Web 应用程序着重于获取 HTML 文档的客户端，该客户端充当一个模 板或容器，根据客户端事件使用从服务器端 组件检索的 XML 数据在其中添加内容。
XMLHttpRequest 对象发出调用2
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send("id=" + escape(idTextField.value));
通过 JavaScript 发送表单值时，应该考虑字 段值的编码。JavaScript 包括一个 escape() 函数，应该使用该函数确保对本地化的内容 进行正确编码并且正确转义特殊字符。
使用AJAX交互的用例 2
复杂的用户界面控件：可以提供不需要页面 复杂的用户界面控件： 刷新的控件，如树状结构的控件、菜单和进 度栏。 刷新页面上的数据：HTML 页可以轮询服务 刷新页面上的数据： 器中的数据以获取最新的数据，如分数、股 票报价、天气预报或特定于应用程序的数据。 服务器端通知：HTML 页可以通过轮询服务 服务器端通知： 器获取事件通知来模拟服务器端推送，包括 发送消息通知客户端、刷新页面数据或将客 户端重定向到其他页。
使用AJAX交互的用例 3
此列表并不详尽，但是它表明了利用 AJAX 交互， Web 应用程序可以实现比以往更多的功能。尽管 该技术有许多引人注目的优点，但是也存在一些缺 点： 复杂性：服务器端开发者需要了解，在 HTML 客 复杂性： 户端页以及服务器端逻辑中需要表示逻辑，才能生 成客户端 HTML 页所需的 XML 内容。HTML 页开 发者需要具备 JavaScript 技术。随着时间的推移， 当创建了新框架，并且为现有框架提供了交互模型 支持后，创建支持 AJAX 的应用程序会变得更容 易。
3. XMLHttpRequest 对象发出调用 1
执行到语句 req.send(null); 时，将发出调用。对于 HTTP 获得的内容可能是 null 或空值。为 XMLHttpRequest 对象调用此函数时，会调用初始 化对象期间设置的 URL。在本示例中，是以 URL 参数的形式包含传递的数据 (id)。 当请求为幂等时（意味着两个重复的请求将返回相 同的结果），请使用 HTTP GET。使用 HTTP GET 方法时，包括转义的 URL 参数在内的 URL 长度受某些浏览器以及服务器端 Web 容器的限制。 将数据发送到影响服务器端应用程序状态的服务器 时，应该使用 HTTP POST 方法。HTTP POST 要求使用以下语句为 XMLHttpRequest 对象设置 Content-Type 头：
2. 创建并初始化 XMLHttpRequest 对象 1 初始化并配置 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 = callback; req.send(null); }
Байду номын сангаас AJAX 交互的分析 1
到目前为止，已经论述了 AJAX 的含义以及 存在的一些疑难问题，现在将所有内容结合 起来演示支持 AJAX 的 J2EE 应用程序。 让我们来看一个示例，Web 应用程序包含 了一个静态 HTML 页，或者用 JSP 技术生 成的 HTML 页，该页包含了一个 HTML 表 单，要求服务器端逻辑验证表单数据而不刷 新页面。名为 ValidateServlet 的服务器端 Web 组件 (Servlet) 将提供验证逻辑。下图 描述了提供验证逻辑的 AJAX 交互的详细信 息。
使用AJAX交互的用例 5
随着开发者编写使用 AJAX 交互模型的应用 程序的经验日益丰富，使用 AJAX 技术构建 的各种框架和模式可能会纷纷出现。 在 AJAX 交互中强调“以部分更改适用全局 更改”的框架仍然为时尚早，本文档着重说 明现有的 Java 2 Enterprise Edition (J2EE) 技术（如 Servlet、JavaServer Pages、 JavaServer Faces 和 Java 标准标记库 (JSTL)）目前是如何支持 AJAX 交互的。