1、毕业设计( 论文)外文资料翻译学 院 ：计算机工程学院 专 业 班 级 ：计算机科学与技术 056 附 件 ：1.外文资料翻译译文； 2.外文原文 指导教师评语：签名： 年 月 日异步 JavaScript 技术和 XML （ AJAX ）与 Java 平台使用过 Flickr、GMail,、Google、Suggest 或 Google 地图的人都知道一种全新的动态 WEB 应用正在成型、这些应用看上去和传统桌面应用非常相似、他们不依赖于插件或者浏览器特效。传统意义上的 WEB 应用就是一组网页、当页面上有任何一点内容有所变化的时候必须更新整个网页。一些技术比如 JavaScript 和 C
2、SS 已经非常成熟、你可以使用他们高效的创建动态网页、并可以跑在大多数主流浏览器上。本文将细述数种可以使你的 WEB 应用更丰富更具交互性（就象桌面应用一样）的技术。使用 JavaScript 技术、HTML 网页可以异步调用生成它的服务器上的服务并可以获取返回的 XML 文档形式的结果。JavaScript 再使用这个 XML 文档更新或改动本网页的文档对象模型（DOM） 、名词 AJAX 就是近年来出现的用与描述这种交互模式的新名词。AJAX 并不是新事物、数年前使用微软 IE 浏览器的开发者们就在使用它、直到最近、这项技术被冠以远程脚本而更出名了。以前 WEB 开发者使用插件、apple
3、ts 或者隐藏框架来仿效这种交互模式。但是现在由于XMLHttpRequest 对象技术已经在各大平台的主流浏览器上普及、所以这种模仿的情况越来越少了。真正神奇的事情在于 JavaScript 和XMLHttpRequest 对象技术的结合、尽管 XMLHttpRequest 对象技术并不属于 JavaScript 标准规范、但是现代的主流浏览器都支持、在 Firefox、IE、 Safari 这些浏览器对 JavaScript 和 CSS 的执行有微小不同、但这些不同之处很容易理解和处理。如果你一定要兼容老一代浏览器那还是不要用 AJAX 了。是什么使得基于 AJAX 的客户端如此独特？那就
4、是客户端所嵌入的页面特定的控制逻辑、这些控制逻辑以 JavaScript 代码的形式存在。页面与JavaScript 的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX 清楚的将表示逻辑和数据分离开来、一个 HTML 网页能够在需要的时候获取以比特为单位的数据片段！这不同于以前的有一点变化就必须刷新整个页面的做法。同时 AJAX 也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端 WEB应用专注于为每一个客户端的每一次请求生成 HTML 页面、每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的 WEB 应用专注于客户端
5、把 HTML 文档当作模版或容器、客户端向这个容器中插入内容、作到这些的原理就是每当客户端发生事件、客户端都可以向服务端发出请求并使用服务端返回的 XML 数据。一些 AJAX 的应用如下：实时数据验证表单：实时的表单数据验证：象 ID 号、序列号、邮政编码、优惠卷号码这样的表单数据可以在用户提交整个表单之前就得到验证！自动补全：一些特定表单数据比如 email、姓名、城市名可以根据用户的类型自动填写。负荷需求：基于客户端的事件，一个 HTML 页面可以在后台获取更多的数据，让网页浏览器加载更快智能客户端接口控制：诸如树，菜单，数据表，丰富的文本编辑器，日历和进度条允许用户更好地互动和互动的
6、HTML 网页，一般而言不需要重新加载页面。更新数据和服务器推： HTML 网页可能从一个服务器获得最新数据，如分数，股票报价，天气预报，或适用的具体数据。 客户可以使用 Ajax 技术得到了一套最新数据不重载整页。 民调不是最有效的手段来确保数据在网页上是最电流。 新兴技术，如 彗星 正在制定，提供真正的服务器端通过 HTTP的推动保持持久连接用户端与服务器之间。 看到这个博客条目对 彗星使用灰熊更多的发展，推动服务器与 Java 技术。部分更新：一个 HTML 页面可以提交表单数据的需要，而不需要一整页刷新。混搭：一个 HTML 页面可以获取数据使用的是服务器端的代理或由包括外部脚本组合外
7、部数据与您的应用程序或您的服务的资料。 例如，您可以混合内容或数据的第三方应用程序，例如谷歌地图与您自己的应用程序。网页作为一种应用：Ajax 技术，可创造单一网页的应用程序的外观和感觉很像一个桌面应用程序。看到一篇关于使用 Ajax 和门户提供更多关于如何使用的 portlet 应用的。这些用处并不全、但是它们说明了 AJAX 交互使得 WEB 应用可以作到大量以前无法作到的事情。解剖一个 AJAX 交互：现在我们已经讨论了 Ajax 与一些较高级别的问题，让我们把所有的放在一起，看一个基于 AJAX 的 Java 应用程序。让我们考虑一个例子。 一个 web 应用包含一个静态的网页，或 H
8、TML 页面中生成的 JSP 技术包含 HTML 表单，需要服务器端的逻辑来验证表单数据而无需刷新页面。 服务器端 Web 组件（ servlet 的）命名 ValidateServlet 将提供验证逻辑。 图 1 描述的细节，AJAX 的相互作用，将提供验证逻辑。 下列项目代表设置的一个 AJAX 的交互，如图 1:1.客户端事件发生。2.一个 XMLHttpRequest 对象的创建和配置。 3.XMLHttpRequest 对象提出了要求。 4.请求处理的 ValidateServlet 。 5.该 ValidateServlet 返回一个 XML 文件 ， 其中载有结果。 6. XML
9、HttpRequest 对象调用 callback()函数和过程的结果。 7. 在 HTML 的 DOM 更新。现在让我们来详细看看每一步 AJAX 互动1客户端事件发生。 JavaScript 技术的功能就是一个结果的事件。 在这种情况下，功能validate()可能会映射到 onkeyup 事件的链接或形式的组成部分。点击链接或表单元素的键盘事件引发 JavaScript 函数 validate()： 2 .XMLHttpRequest 对象的创建和配置。 创建和配置一个 XMLHttpRequest 对象。var req;function validate() var idField =
10、 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 = callba
11、ck;req.send(null);该 validate()函数创建一个 XMLHttpRequest 对象，并要求公开功能的对象。open 功能需要三个参数： HTTP 方法，这是 GET 或 POST ;URL 服务器端组件，该对象将互动;和一个布尔说明是否要求将异步。这个 API 是XMLHttpRequest.open(String method, String URL, boolean asynchronous)，如果一个互动设置为异步（ true ）则必须有一个回调函数：req.onreadystatechange = callback; 见第 6 条的更详细的信息。3 .XMLH
12、ttpRequest 对象提出了要求。执行到 req.send(null)的时候发出请求。 如果一个 HTTP GET ，此内容可能是 null 或空白。 当此功能要求 XMLHttpRequest 对象，调用的 URL 是在配置的对象是所谓的。 如这个例子中，数据公布（ id ）是作为一个URL 参数。 使用 HTTP GET 请求时，是幂等，也就是说，两个重复的请求将返回同样的结果。 当使用 HTTP GET 方法，长度的网址，包括转义网址参数，限制了一些浏览器和服务器端的 Web 容器。 在 HTTP POST 法时，应当使用发送数据到服务器，这将影响服务器端的应用程序状态。 一个 HT
13、TP POST 需要一个Content-Type 标头设置上 XMLHttpRequest 对象使用了如下声明：req.setRequestHeader(“Content-Type“, “application/x-www-form-urlencoded“); req.send(“id=“ + escape(idTextField.value);如果用 JavaScript 产生表单元素值、必须确保值编码的正确、JavaScript 有一个 escape()函数用于保障正确的编码、并把特定字符正确的忽略掉。 4 .请求被 ValidateServlet 所处理: 映射到一个 servlet 的
14、 URI “验证”检查用户是否 ID 是在用户数据库。 servlet 处理 XMLHttpRequest 就和处理其他 HTTP 请求一样：下面的例子显示一个服务器提取 id 参数的要求，并确认是否已采取参数。public class ValidateServlet extends HttpServlet private ServletContext context; private HashMap users = new HashMap(); public void init(ServletConfig config) throws ServletException this.contex
15、t = 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) response.setHeader(
16、“Cache-Control“, “no-cache“); response.getWriter().write(“valid“); else response.setContentType(“text/xml“); response.setHeader(“Cache-Control“, “no-cache“); response.getWriter().write(“invalid“); 在这个例子中，一个简单的 hashmap 是用来控制用户。在这个例子中，我们假设，使用者输入 duke 的编号。5 . ValidateServlet 返回一个包含结果的 XML 文档。 用户 ID duk
17、e 是本列表中的用户 ID 的 users HashMap 。ValidateServlet 生成一个 XML 文档作为响应、更复杂的情况可能用到 DOM、XSLT 等。 response.setContentType(“text/xml“); response.setHeader(“Cache-Control“, “no-cache“); response.getWriter().write(“invalid“); 开发者必须了解两件事：第一：Content-Type 必须设置为 text/xml；第二：Cache-Control 必须设置为 no-cache。是 XMLHttpReques
18、t 对象将只处理请求并在 Content-Type 的唯一 text/xml ，并设置 Cache-Control ，以 no- cache 将浏览器从本地缓存响应情况下，重复请求相同的 URL （包括 URL 参数）可能会返回不同的反应。 6 .XMLHttpRequest 对象调用 callback()函数并处理结果。XMLHttpRequest 对象的准备状态有所变化的时候则调用 callback()方法、我们假定已经请求完毕 ValidateServlet、准备状态为 4、表示 XMLHttpRequest调用已经完成、HTTP 状态码为 200、表示 HTTP 交互已经成功。func
19、tion callback() if (req.readyState = 4) if (req.status = 200) / update the HTML DOM based on whether or not message is valid 浏览器维护着一个文档的对象表示模型、既：DOM。网页中的 JavaScript方法可以访问这个模型、并且可以在页面已经全部加载完成后再次改变这个模型。 使用 JavaScript 代码：req.responseXML 可以得到服务端返回的 XML 文档、req 为 XMLHttpRequest 对象、DOM 为 JavaScript 提供了一种搜索
20、文档内容以及根据搜索结果改变网页 DOM 的手段。可以使用 req.responseText 来访问返回的XML 文档的字符串表示、如下所示： valid 上面的例子是一个简单的 XML 片段、实际应用可能包含更多： function parseMessage() var message = req.responseXML.getElementsByTagName(“message“)0; setMessage(message.childNodes0.nodeValue); parseMessages()方法处理从服务端返回的 XML 文档、该方法使用 message元素的值去调用 setMe
21、ssage()方法来改变 HTML DOM。 7. HTML 文档对象被更新。JavaScript 可以获得 HTML DOM 中任何元素（对象）的引用、推荐使用document.getElementById(“userIdMessage“)方法来获取。 userIdMessage 就是网页上任意元素的 ID 属性、有了元素（对象）的引用、 JavaScript 就可以改变这个元素的属性以及这个元素的样式属性、还可以增加删除或改变这个元素的子元素。通用的方法是设置 innerHTML 属性、如下所示：function setMessage(message) var userMessageEle
22、ment = document.getElementById(“userIdMessage“); userMessageElement.innerHTML = “ + message + “ “; innerHTML 属性被改变以后网页可以立即体现出变化、如果 innerHTML 属性内部包含象 、这样的元素、那么其所指定的资源内容一样被浏览器解析显示。 这种方法最大的缺点是在 JavaScript 代码里面难于以字符串形式书写HTML、内嵌于 JavaScript 中的 HTML 也难以看懂、维护和更改。另外的改变 HTML DOM 的方法是动态创建新元素然后将其作为子元素插入目标元素下、如
23、下所示：function setMessage(message) var userMessageElement = document.getElementById(“userIdMessage“); var userIdMessageFont = document.getElementById(“userIdMessageFont“); var messageElement = document.createTextNode(message); if (userMessageElement.childNodes0) / update the elements userIdMessageFont
24、.replaceChild(messageElement, userIdMessageFont.childNodes0); else / create the new elements var fontElement = document.createTextNode(“font“); fontElement.setAtribute(“id“, “userIdMessageFont“); fontElement.setAtribute(“color“, “red“); userMessageElement.appendChild(fontElement); fontElement.append
25、Child(messageElement); 代码示例显示了 DOM API 的 JavaScript 的技术可能被用来创造一个因素，或者改变元素编程。支持的 JavaScript 的 DOM API 的技术可以在各种不同的浏览器，所以你必须照顾到正在发展中的应用软件。最后的想法:这些事情可能并不多么引人注目、而且还有一些缺陷：复杂性：服务器端的开发将需要演示的逻辑的理解是，将需要在客户端的HTML 网页，以及在服务器端的逻辑来生成 XML 内容所需要的客户端的HTML 网页。 HTML 网页开发人员需要有一个基本的了解的 JavaScript 技术来创造新的 Ajax 功能。 其他选项，如
26、项目 jMaki 和项目动态工作面提供一种面向 Java 开发人员能够更好地利用 Ajax 功能，而不需要深入了解的 JavaScript技术。标准化 XMLHttpRequest 对象：XMLHttpRequest 对象是尚未加入的JavaScript 技术规范，这意味着行为可能会有所变化，这取决于客户端。 这是最有效地利用图书馆，如道场 ，提供备用的解决方案使 AJAX 互动透明甚至旧版本的浏览器不支持 XMLHttpRequest 对象：JavaScript 的技术实施： Ajax 的相互作用在很大程度上取决于 JavaScript的技术，具有微妙的差异取决于客户端。 见 QuirksMode.org 的更详细的针对特定浏览器的差别。 考虑使用的图书馆，如道场 ，其中涉及许多分歧。
