1、毕业设计(论文)外文资料翻译学 院： 计算机工程学院 专业班级： 计算机科学与技术 056 学生姓名： 学 号： 指导教师： 外文出处：(外文) /technicalArticles 附 件：1.外文资料翻译译文； 2.外文原文 指导教师评语：签名： 年 月 日异步JavaScript技术和XML （ AJAX ）与Java平台使用过Flickr、GMail,、Google、Suggest或Google地图的人都知道一种全新的动态WEB应用正在成型、这些应用看上去和传统桌面应用非常相似、他们不依赖于插件或者浏览器特效。传统意义上的WEB应用就是一组网页、当页面上有任何一点内容有所变化的时候必须
2、更新整个网页。一些技术比如JavaScript和CSS已经非常成熟、你可以使用他们高效的创建动态网页、并可以跑在大多数主流浏览器上。本文将细述数种可以使你的WEB应用更丰富更具交互性（就象桌面应用一样）的技术。使用JavaScript技术、HTML网页可以异步调用生成它的服务器上的服务并可以获取返回的XML文档形式的结果。JavaScript再使用这个XML文档更新或改动本网页的文档对象模型（DOM）、名词AJAX就是近年来出现的用与描述这种交互模式的新名词。AJAX并不是新事物、数年前使用微软IE浏览器的开发者们就在使用它、直到最近、这项技术被冠以远程脚本而更出名了。以前WEB开发者使用插件
3、applets或者隐藏框架来仿效这种交互模式。但是现在由于XMLHttpRequest对象技术已经在各大平台的主流浏览器上普及、所以这种模仿的情况越来越少了。真正神奇的事情在于JavaScript和XMLHttpRequest对象技术的结合、尽管XMLHttpRequest对象技术并不属于JavaScript标准规范、但是现代的主流浏览器都支持、在Firefox、IE、 Safari这些浏览器对JavaScript和CSS的执行有微小不同、但这些不同之处很容易理解和处理。如果你一定要兼容老一代浏览器那还是不要用AJAX了。是什么使得基于AJAX的客户端如此独特？那就是客户端所嵌入的页面特定的
4、控制逻辑、这些控制逻辑以JavaScript代码的形式存在。页面与JavaScript的交互建立在事件的基础上（比如文档加载事件、鼠标点击事件、焦点变化事件、甚至一个时钟事件）。AJAX清楚的将表示逻辑和数据分离开来、一个HTML网页能够在需要的时候获取以比特为单位的数据片段！这不同于以前的有一点变化就必须刷新整个页面的做法。同时AJAX也需要一种完全不同的服务端架构来支持这种交互模式。以前的传统服务端WEB应用专注于为每一个客户端的每一次请求生成HTML页面、每一次客户端接到响应都要刷新和重新渲染整个页面。而我们所谈的WEB应用专注于客户端把HTML文档当作模版或容器、客户端向这个容器中插入
5、内容、作到这些的原理就是每当客户端发生事件、客户端都可以向服务端发出请求并使用服务端返回的XML数据。一些AJAX的应用如下：实时数据验证表单：实时的表单数据验证：象ID号、序列号、邮政编码、优惠卷号码这样的表单数据可以在用户提交整个表单之前就得到验证！自动补全：一些特定表单数据比如email、姓名、城市名可以根据用户的类型自动填写。负荷需求：基于客户端的事件，一个HTML页面可以在后台获取更多的数据，让网页浏览器加载更快智能客户端接口控制：诸如树，菜单，数据表，丰富的文本编辑器，日历和进度条允许用户更好地互动和互动的HTML网页，一般而言不需要重新加载页面。更新数据和服务器推： HTML网页
6、可能从一个服务器获得最新数据，如分数，股票报价，天气预报，或适用的具体数据。 A client may use Ajax techniques to get a set of current data without reloading a full page.客户可以使用Ajax技术得到了一套最新数据不重载整页。 Polling is not the most effecient means of ensuring that data on a page is the most current.民调不是最有效的手段来确保数据在网页上是最电流。 Emerging techniques such
7、 as Comet are being developed to provide true server-side push over HTTP by keeping a persistent connection between the client and server.新兴技术，如彗星正在制定，提供真正的服务器端通过HTTP的推动保持持久连接用户端与服务器之间。 See this blog entry on Comet using Grizzly for more on the development of server push with Java technology.看到这个博客条
8、目对彗星使用灰熊更多的发展，推动服务器与Java技术。部分更新：一个HTML页面可以提交表单数据的需要，而不需要一整页刷新。混搭：一个HTML页面可以获取数据使用的是服务器端的代理或由包括外部脚本组合外部数据与您的应用程序或您的服务的资料。 For example, you can mix content or data from a third-party application such as Google Maps with your own application.例如，您可以混合内容或数据的第三方应用程序，例如谷歌地图与您自己的应用程序。网页作为一种应用：Ajax技术，可创造单一网页
9、的应用程序的外观和感觉很像一个桌面应用程序。See the article on the use of Ajax and portlets for more on how you can use portlet applications today.看到一篇关于使用Ajax和门户提供更多关于如何使用的portlet应用的。这些用处并不全、但是它们说明了AJAX交互使得WEB应用可以作到大量以前无法作到的事情。解剖一个AJAX交互：现在我们已经讨论了Ajax与一些较高级别的问题，让我们把所有的放在一起，看一个基于AJAX的Java应用程序。Lets consider an example.让我们
10、考虑一个例子。 A web application contains a static HTML page, or an HTML page generated in JSP technology contains an HTML form that requires server-side logic to validate form data without refreshing the page.一个web应用包含一个静态的网页，或HTML页面中生成的JSP技术包含HTML表单，需要服务器端的逻辑来验证表单数据而无需刷新页面。 A server-side web component (
11、servlet ) named ValidateServlet will provide the validation logic.服务器端Web组件（ servlet的）命名ValidateServlet将提供验证逻辑。 Figure 1 describes the details of the Ajax interaction that will provide the validation logic.图1描述的细节，AJAX的相互作用，将提供验证逻辑。 下列项目代表设置的一个AJAX的交互，如图1:1.客户端事件发生。2.An XMLHttpRequest object is crea
12、ted and configured.一个XMLHttpRequest对象的创建和配置。 3.The XMLHttpRequest object makes a call.XMLHttpRequest对象提出了要求。 4.The request is processed by the ValidateServlet .请求处理的ValidateServlet 。 5.The ValidateServlet returns an XML document containing the result.该ValidateServlet返回一个XML文件 ， 其中载有结果。 6.The XMLHttp
13、Request object calls the callback() function and processes the result. XMLHttpRequest对象调用callback()函数和过程的结果。 7. The HTML DOM is updated.在HTML的DOM更新。现在让我们来详细看看每一步AJAX互动1A client event occurs.客户端事件发生。 JavaScript technology functions are called as the result of an event. JavaScript技术的功能就是一个结果的事件。 In th
14、is case, the function validate() may be mapped to a onkeyup event on a link or form component.在这种情况下，功能validate()可能会映射到onkeyup事件的链接或形式的组成部分。点击链接或表单元素的键盘事件引发JavaScript函数validate()： 2 .A XMLHttpRequest object is created and configuredXMLHttpRequest对象的创建和配置。 An XMLHttpRequest object is created and conf
15、igured.创建和配置一个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.
16、XMLHTTP); req.open(GET, url, true); req.onreadystatechange = callback; req.send(null);该validate()函数创建一个XMLHttpRequest对象，并要求公开功能的对象。 The open function requires three arguments: the HTTP method, which is GET or POST ; the URL of the server-side component that the object will interact with; and a boole
17、an indicating whether or not the call will be made asynchronously.open功能需要三个参数： HTTP方法，这是GET或POST ;URL服务器端组件，该对象将互动;和一个布尔说明是否要求将异步。这个API是AXMLHttpRequest.open(String method, String URL, boolean asynchronous)，如果一个互动设置为异步（ true ）则必须有一个The callback function for this interaction is set with the statement
18、 req.onreadystatechange = callback; .回调函数：req.onreadystatechange = callback; See section 6 for more details.见第6条的更详细的信息。3The XMLHttpRequest object makes a call. .XMLHttpRequest对象提出了要求。When the statement req.send(null); is reached, the call will be made.执行到req.send(null)的时候发出请求。 In the case of an HTT
19、P GET , this content may be null or left blank.如果一个HTTP GET ，此内容可能是null或空白。 When this function is called on the XMLHttpRequest object, the call to the URL that was set during the configuration of the object is called.当此功能要求XMLHttpRequest对象，调用的URL是在配置的对象是所谓的。 In the case of this example, the data tha
20、t is posted ( id ) is included as a URL parameter.如这个例子中，数据公布（ id ）是作为一个URL参数。 Use an HTTP GET when the request is idempotent, meaning that two duplicate requests will return the same results.使用HTTP GET请求时，是幂等，也就是说，两个重复的请求将返回同样的结果。 When using the HTTP GET method, the length of URL, including escaped
21、 URL parameters, is limited by some browsers and by server-side web containers.当使用HTTP GET方法，长度的网址，包括转义网址参数，限制了一些浏览器和服务器端的Web容器。 The HTTP POST method should be used when sending data to the server that will affect the server-side application state.在HTTP POST法时，应当使用发送数据到服务器，这将影响服务器端的应用程序状态。 An HTTP P
22、OST requires a Content-Type header to be set on the XMLHttpRequest object by using the following statement:一个HTTP POST需要一个Content-Type标头设置上XMLHttpRequest对象使用了如下声明： req.setRequestHeader(Content-Type, application/x-www-form-urlencoded); req.send(id= + escape(idTextField.value);如果用JavaScript产生表单元素值、必须确
23、保值编码的正确、JavaScript有一个escape()函数用于保障正确的编码、并把特定字符正确的忽略掉。 4 .请求被ValidateServlet所处理: A servlet mapped to the URI validate checks whether the user ID is in the user database.映射到一个servlet的URI “验证”检查用户是否ID是在用户数据库。 servlet处理XMLHttpRequest就和处理其他HTTP请求一样：The following example show a server extracting the id p
24、arameter from the request and validating whether the parameter has been taken.下面的例子显示一个服务器提取id参数的要求，并确认是否已采取参数。public class ValidateServlet extends HttpServlet private ServletContext context; private HashMap users = new HashMap(); public void init(ServletConfig config) throws ServletException this.c
25、ontext = 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(tar
26、getId.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); 在这个例子中，一个简单的hashmap是用来控制用户。在这个例子中，我们假设，使用者输入duke的编
27、号。5 . The ValidateServlet returns an XML document containing the results.ValidateServlet返回一个包含结果的XML文档。 用户ID duke是本列表中的用户ID的users HashMap 。ValidateServlet生成一个XML文档作为响应、更复杂的情况可能用到DOM、XSLT等。 response.setContentType(text/xml); response.setHeader(Cache-Control, no-cache); response.getWriter().write(inva
28、lid); 开发者必须了解两件事：第一：Content-Type必须设置为text/xml；第二：Cache-Control必须设置为no-cache。是XMLHttpRequest对象将只处理请求并在Content-Type的唯一text/xml ，并设置Cache-Control ，以no- cache将浏览器从本地缓存响应情况下，重复请求相同的URL （包括URL参数）可能会返回不同的反应。 6 .The XMLHttpRequest object calls the callback() function and processes the result.XMLHttpRequest对
29、象调用callback()函数并处理结果。The XMLHttpRequest object was configured to call the callback() function when there are changes to the readyState of the XMLHttpRequest object. XMLHttpRequest对象的准备状态有所变化的时候则调用callback()方法、我们假定已经请求完毕ValidateServlet、准备状态为4、表示XMLHttpRequest调用已经完成、HTTP状态码为200、表示HTTP交互已经成功。 function
30、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提供了一种搜索文档内容以及根据搜索结果改变网页D
31、OM的手段。可以使用req.responseText来访问返回的XML文档的字符串表示、如下所示： valid 上面的例子是一个简单的XML片段、实际应用可能包含更多： function parseMessage() var message = req.responseXML.getElementsByTagName(message)0; setMessage(message.childNodes0.nodeValue); parseMessages()方法处理从服务端返回的XML文档、该方法使用message元素的值去调用setMessage()方法来改变HTML DOM。 7. HThe
32、HTML DOM is updaTML文档对象被更新。JavaScript technology can gain a reference to any element in the HTML DOM using a number of APIs. JavaScript可以获得HTML DOM中任何元素（对象）的引用、推荐使用document.getElementById(userIdMessage)方法来获取。userIdMessage就是网页上任意元素的ID属性、有了元素（对象）的引用、JavaScript就可以改变这个元素的属性以及这个元素的样式属性、还可以增加删除或改变这个元素的子元素
33、通用的方法是设置innerHTML属性、如下所示： function setMessage(message) var userMessageElement = document.getElementById(userIdMessage); userMessageElement.innerHTML = + message + ; innerHTML属性被改变以后网页可以立即体现出变化、如果innerHTML属性内部包含象、这样的元素、那么其所指定的资源内容一样被浏览器解析显示。 这种方法最大的缺点是在JavaScript代码里面难于以字符串形式书写HTML、内嵌于JavaScript中的HTM
34、L也难以看懂、维护和更改。另外的改变HTML DOM的方法是动态创建新元素然后将其作为子元素插入目标元素下、如下所示： function setMessage(message) var userMessageElement = document.getElementById(userIdMessage); var userIdMessageFont = document.getElementById(userIdMessageFont); var messageElement = document.createTextNode(message); if (userMessageElement.
35、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.ap
36、pendChild(fontElement); fontElement.appendChild(messageElement); 代码示例显示了DOM API 的JavaScript的技术可能被用来创造一个因素，或者改变元素编程。The support for JavaScript technology DOM APIs can differ in various browsers, so you must take care when developing applications.支持的JavaScript的DOM API的技术可以在各种不同的浏览器，所以你必须照顾到正在发展中的应用软件。
37、最后的想法:这些事情可能并不多么引人注目、而且还有一些缺陷：复杂性：服务器端的开发将需要演示的逻辑的理解是，将需要在客户端的HTML网页，以及在服务器端的逻辑来生成XML内容所需要的客户端的HTML网页。 HTML page developers need to have a basic understanding of JavaScript technology to create new Ajax functionality. HTML网页开发人员需要有一个基本的了解的JavaScript技术来创造新的Ajax功能。 Other options such as Project jMaki
38、and Project Dynamic Faces provide a way for Java developers to better use Ajax functionality without requiring deep knowledge of JavaScript technology.其他选项，如项目jMaki和项目动态工作面提供一种面向Java开发人员能够更好地利用Ajax功能，而不需要深入了解的JavaScript技术。标准化XMLHttpRequest对象：XMLHttpRequest对象是尚未加入的JavaScript技术规范，这意味着行为可能会有所变化，这取决于客户端
39、 Its best to use libraries such as Dojo , which provides fallback solutions for making Ajax interactions transparently even on older browsers that do not support the XMLHttpRequest Object: .这是最有效地利用图书馆，如道场 ，提供备用的解决方案使AJAX互动透明甚至旧版本的浏览器不支持XMLHttpRequest对象：JavaScript的技术实施： Ajax的相互作用在很大程度上取决于JavaScript
40、的技术，具有微妙的差异取决于客户端。 See QuirksMode.org for more details on browser-specific differences.见QuirksMode.org的更详细的针对特定浏览器的差别。 Consider using a library such as Dojo , which addresses many of the differences.考虑使用的图书馆，如道场 ，其中涉及许多分歧。调试： Ajax应用也很难调试，因为处理逻辑是嵌入在客户端和服务器上。 Browser add-ons such as Mozilla Firebug ha
41、ve emerged to make debuging easier.浏览器加载项，如Mozilla的萤火虫出现，使调试更加容易。 Frameworks such as the Google Web Toolkit have emerged to allow for client and server round-trip debugging.框架，如谷歌的Web工具包已经出现，使客户端和服务器来回调试。Securing resources and protecting your data: You can view client-side JavaScript technology simp
42、ly by selecting View Source from an Ajax-enabled HTML p获取资源和保护您的数据：您可以查看客户端JavaScript技术只需通过 选择查看源文件从一个基于AJAX的网页。 A poorly designed Ajax-based application could open itself up to hackers or plagiarism.不善的设计基于Ajax的应用程序可以打开自己黑客的攻击或剽窃。 When providing Ajax services, you should take care to make sure that
43、 those services are made available only to those intended.当提供AJAX服务后，你就可以确保这些服务只提供给那些已打算好的。 See Restricting Access to Your Ajax Services for more information on protecting your services.见限制进入您的Ajax服务的更多信息，保护您的服务。 我们已经看到， Ajax的相互作用可以解决许多问题。 Java technology provides a good base to develop and deploy A
44、jax-based applications with APIs for tying in HTTP processing, databases, web services, XML processing, and business objects. Java技术提供了一个良好的基础，以开发和部署基于Ajax的应用程序的API的滞留在HTTP处理，数据库， Web服务， XML处理，和Business Objects 。 With a better understanding of this interaction model, todays applications can become m
45、ore interactive, providing the end user with a better experience.更好地了解这种互动模式，今天的应用可以成为更具互动性，为最终用户提供一个更好的经验。Using Ajax requires that you use the latest browser versions that support the XMLHttpRequest object needed for Ajax interactions. Using Ajax also requires a great deal of client-side JavaScript
46、 technology and CSS.使用AJAX ，您需要使用最新的浏览器版本它支持XMLHttpRequest对象需要AJAX的相互作用。使用AJAX还需要大量的客户端JavaScript技术和CSS 。 As an application architect or developer, you will need to weigh the needs of having a rich application against browser support, architecture complexity, and developer training.作为应用架构师或开发人员，您将要权衡这样的需要-具有丰富的应用程序对浏览器的支持，结构复杂，技术和开发培训。 As the Ajax programming model evolves, exi
免费区 
