|
|
中英文對(duì)照如下、全是我自己譯的、水平有限（6級(jí)考78分）、歡迎指正：
Asynchronous JavaScript Technology and XML (AJAX)
With Java 2 Platform, Enterprise Edition
――《異步JavaScript+XML技術(shù)與J2EE》
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. ――使用過Flickr、GMail,、Google、Suggest或Google地圖的人都知道一種全新的動(dòng)態(tài)WEB應(yīng)用正在成型、這些應(yīng)用看上去和傳統(tǒng)桌面應(yīng)用非常相似、他們不依賴于插件或者瀏覽器特效。傳統(tǒng)意義上的WEB應(yīng)用就是一組網(wǎng)頁(yè)、當(dāng)頁(yè)面上有任何一點(diǎn)內(nèi)容有所變化的時(shí)候必須更新整個(gè)網(wǎng)頁(yè)。一些技術(shù)比如JavaScript和CSS已經(jīng)非常成熟、你可以使用他們高效的創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)、并可以跑在大多數(shù)主流瀏覽器上。本文將細(xì)述數(shù)種可以使你的WEB應(yīng)用更豐富更具交互性（就象桌面應(yīng)用一樣）的技術(shù)。
Introducing Asynchronous JavaScript Technology and XML (AJAX)
――AJAX介紹
Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch XML documents. The XML documents may then be used by the JavaScript technology 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. ――使用JavaScript技術(shù)、HTML網(wǎng)頁(yè)可以異步調(diào)用生成它的服務(wù)器上的服務(wù)并可以獲取返回的XML文檔形式的結(jié)果。JavaScript再使用這個(gè)XML文檔更新或改動(dòng)本網(wǎng)頁(yè)的文檔對(duì)象模型（DOM）、名詞AJAX就是近年來出現(xiàn)的用與描述這種交互模式的新名詞。
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 that the inclusion of support for the XMLHttpRequest object has became ubiquitous in the mainstream browsers across all platforms. The real magic is the result of the JavaScript technology’s XMLHttpRequest object. Although this object is not specified in the formal JavaScript technology specification, all of today’s mainstream browsers support it. The subtle differences with the JavaScript technology and CSS support among current generation browsers such as Firefox, InterNET Explorer, and Safari are manageable. If you are required to support older browsers, AJAX may not be the answer for you. ――AJAX并不是新事物、數(shù)年前使用微軟IE瀏覽器的開發(fā)者們就在使用它、直到最近、這項(xiàng)技術(shù)被冠以遠(yuǎn)程腳本而更出名了。以前WEB開發(fā)者使用插件、applets或者隱藏框架來仿效這種交互模式。但是現(xiàn)在由于XMLHttpRequest對(duì)象技術(shù)已經(jīng)在各大平臺(tái)的主流瀏覽器上普及、所以這種模仿的情況越來越少了。真正神奇的事情在于JavaScript和XMLHttpRequest對(duì)象技術(shù)的結(jié)合、盡管XMLHttpRequest對(duì)象技術(shù)并不屬于JavaScript標(biāo)準(zhǔn)規(guī)范、但是現(xiàn)代的主流瀏覽器都支持、在Firefox、IE、 Safari這些瀏覽器對(duì)JavaScript和CSS的執(zhí)行有微小不同、但這些不同之處很容易理解和處理。如果你一定要兼容老一代瀏覽器那還是不要用AJAX了。
//////////////////////////////////////////////////////////////////////////////////////////
1樓
BS 婁豬
2樓
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 document being loaded, 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 of data as needed rather than reloading the whole page every time a change needs 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.――是什么使得基于AJAX的客戶端如此獨(dú)特？那就是客戶端所嵌入的頁(yè)面特定的控制邏輯、這些控制邏輯以JavaScript代碼的形式存在。頁(yè)面與JavaScript的交互建立在事件的基礎(chǔ)上（比如文檔加載事件、鼠標(biāo)點(diǎn)擊事件、焦點(diǎn)變化事件、甚至一個(gè)時(shí)鐘事件）。AJAX清楚的將表示邏輯和數(shù)據(jù)分離開來、一個(gè)HTML網(wǎng)頁(yè)能夠在需要的時(shí)候獲取以比特為單位的數(shù)據(jù)片段！這不同于以前的有一點(diǎn)變化就必須刷新整個(gè)頁(yè)面的做法。同時(shí)AJAX也需要一種完全不同的服務(wù)端架構(gòu)來支持這種交互模式。以前的傳統(tǒng)服務(wù)端WEB應(yīng)用專注于為每一個(gè)客戶端的每一次請(qǐng)求生成HTML頁(yè)面、每一次客戶端接到響應(yīng)都要刷新和重新渲染整個(gè)頁(yè)面。而我們所談的WEB應(yīng)用專注于客戶端把HTML文檔當(dāng)作模版或容器、客戶端向這個(gè)容器中插入內(nèi)容、作到這些的原理就是每當(dāng)客戶端發(fā)生事件、客戶端都可以向服務(wù)端發(fā)出請(qǐng)求并使用服務(wù)端返回的XML數(shù)據(jù)。
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.
Autocompletion: A specific portion of form data such as an email address, name, or city name may be autocompleted as the user types.
Master Details Operations: Based on a client event, an HTML page can fetch more detailed information on data such as a product listing that enables the client to view the individual product information without refreshing the page.
Sophisticated User Interface Controls: Controls such as tree controls, menus, and progress bars may be provided that do not require page refreshes.
Refreshing Data on the Page: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data.
――一些AJAX的使用例子如下：
實(shí)時(shí)的表單數(shù)據(jù)驗(yàn)證：象ID號(hào)、序列號(hào)、郵政編碼、優(yōu)惠卷號(hào)碼這樣的表單數(shù)據(jù)可以在用戶提交整個(gè)表單之前就得到驗(yàn)證！
自動(dòng)補(bǔ)全：一些特定表單數(shù)據(jù)比如email、姓名、城市名可以根據(jù)用戶的類型自動(dòng)填寫。
細(xì)節(jié)操作：基于客戶端事件、客戶可以不刷新頁(yè)面就可以查看某一種產(chǎn)品的細(xì)節(jié)信息。
智能客戶端接口控制：諸如樹、菜單、工具條都可以在不刷新頁(yè)面的情況下隨時(shí)提供服務(wù)。
刷新實(shí)時(shí)數(shù)據(jù)：頁(yè)面可以從服務(wù)端篩選動(dòng)態(tài)數(shù)據(jù)并顯示、諸如：比分、股票報(bào)價(jià)、天氣預(yù)報(bào)等。
This list is not all-inclusive, but it shows that AJAX interactions allow web applications to do much more than they have done in the past. Although many of these benefits are noteworthy, this approach has some drawbacks as well:
Complexity: Server-side developers will need to understand that presentation logic will be required in the HTML client pages as well as in the server-side logic to generate the XML content needed by the client HTML pages. HTML page developers must have JavaScript technology skills. Creating AJAX-enabled applications will become easier as new frameworks are created and existing frameworks evolve to support the interaction model.
Standardization of the XMLHttpRequest Object: The XMLHttpRequest object is not yet part of the JavaScript technology specification, which means that the behavior may vary depending on the client.
JavaScript Technology Implementations: AJAX interactions depend heavily on JavaScript technology, which has subtle differences depending on the client. See QuirksMode.org for more details on browser-specific differences.
Debugging: AJAX applications are also difficult to debug because the processing logic is embedded both in the client and on the server.
Viewable Source: The client-side JavaScript technology may be viewed simply by selecting View Source from an AJAX-enabled HTML page. A poorly designed AJAX-based application could open itself up to hackers or plagiarism.
Frameworks and patterns for AJAX technology are likely to emerge as developers gain more experience writing applications that use the AJAX interaction model. It is still early to focus on a one-size-fits-all framework for AJAX interactions. This article and the associated solutions focus on how AJAX interactions can be supported today by existing Java 2 Platform, Enterprise Edition (J2EE) technologies such as servlets, JavaServer Pages (JSP) software, JavaServer Faces applications, and the Java Standard Tag Libraries (JSTL).
――這些用處并不全、但是它們說明了AJAX交互使得WEB應(yīng)用可以作到大量以前無(wú)法作到的事情。這些事情可能并不多么引人注目、而且還有一些缺陷：
復(fù)雜性：服務(wù)端開發(fā)者必須掌握XML、頁(yè)面開發(fā)者必須掌握JavaScript技術(shù)。
XMLHttpRequest對(duì)象的標(biāo)準(zhǔn)化：XMLHttpRequest對(duì)象仍不是JavaScript標(biāo)準(zhǔn)規(guī)范。
JavaScript技術(shù)實(shí)現(xiàn)：AJAX嚴(yán)重依賴與JavaScript技術(shù)?？蓞⒖糛uirksMode.org。
Debugging：AJAX難于調(diào)試。
查看原文件：使用這種方法可以容易的看到JavaScript源碼、給黑客、剽竊者以可乘之機(jī)。
AJAX技術(shù)框架和模式還在探索和經(jīng)驗(yàn)形成階段、固化形成一個(gè)真正的框架還為時(shí)過早。本文只是探討如何使用J2EE技術(shù)來支持AJAX交互。
The Anatomy of an AJAX Interaction
Now that we have discussed what AJAX is and what some higher-level issues are, let’s put all the pieces together and show an AJAX- enabled J2EE application.
Let’s consider an example. 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. A server-side web component (servlet) named ValidateServlet will provide the validation logic. Figure 1 describes the details of the AJAX interaction that will provide the validation logic
――AJAX交互剖析：來看一個(gè)AJAX使能的J2EE應(yīng)用：名為ValidateServlet的Servlet驗(yàn)證表單數(shù)據(jù)、但是要求不能對(duì)整個(gè)頁(yè)面刷新。步驟如下：
1、A client event occurs. ――客戶端事件發(fā)生。
2、An XMLHttpRequest object is created and configured. ――一個(gè)XMLHttpRequest對(duì)象被創(chuàng)建并配置。
3、The XMLHttpRequest object makes a call. ――XMLHttpRequest對(duì)象發(fā)出請(qǐng)求。
4、The request is processed by the ValidateServlet. ――請(qǐng)求被ValidateServlet處理。
5、The ValidateServlet returns an XML document containing the result. ――ValidateServlet返回一個(gè)包含結(jié)果的XML文檔。
6、The XMLHttpRequest object calls the callback() function and processes the result. ――XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)并處理結(jié)果。
7、The HTML DOM is updated.――HTML文檔對(duì)象被更新。
3樓
各個(gè)步驟細(xì)節(jié)如下：
1. A client event occurs.――客戶端事件發(fā)生：
點(diǎn)擊鏈接或表單元素的鍵盤事件引發(fā)JavaScript函數(shù)validate()：
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validate();">
2. A XMLHttpRequest object is created and configured.――一個(gè)XMLHttpRequest對(duì)象被創(chuàng)建并配置：
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");――創(chuàng)建XMLHttpRequest對(duì)象
}
req.open("GET", url, true);――調(diào)用XMLHttpRequest對(duì)象的open方法、url為所請(qǐng)求的服務(wù)端組件路徑、true表示這個(gè)調(diào)用是異步的、
如果設(shè)置為異步就必須還要有一個(gè)callback函數(shù)如下：
req.onreadystatechange = callback;
req.send(null);
}
3. The XMLHttpRequest object makes a call.――XMLHttpRequest對(duì)象發(fā)出請(qǐng)求：
執(zhí)行到req.send(null)的時(shí)候發(fā)出請(qǐng)求。
如果是GET請(qǐng)求那么內(nèi)容可以為空、在url附加參數(shù)。
如果是POST請(qǐng)求那么就需要一個(gè)Content-Type頭的設(shè)置如下：
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));
如果用JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、JavaScript有一個(gè)escape()函數(shù)用于保障正確的編碼、并把特定字符正確的忽略掉。
4. The request is processed by the ValidateServlet.――請(qǐng)求被ValidateServlet所處理:
servlet處理XMLHttpRequest就和處理其他HTTP請(qǐng)求一樣：
public class ValidateServlet 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");
}
}
}
5. The ValidateServlet returns an XML document containing the results.――ValidateServlet返回一個(gè)包含結(jié)果的XML文檔。
ValidateServlet生成一個(gè)XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到DOM、XSLT等。
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("invalid");
開發(fā)者必須了解兩件事：第一：Content-Type必須設(shè)置為text/xml；第二：Cache-Control必須設(shè)置為no-cache。
4樓
up
5樓
6. The XMLHttpRequest object calls the callback() function and processes the result.
――XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)并處理結(jié)果。
The XMLHttpRequest object was configured to call the callback() function when there are changes to the readyState of the XMLHttpRequest object. Let us assume the call to the ValidateServlet was made and the readyState is 4, signifying the XMLHttpRequest call is complete. The HTTP status code of 200 signifies a successful HTTP interaction.
――XMLHttpRequest對(duì)象的準(zhǔn)備狀態(tài)有所變化的時(shí)候則調(diào)用callback()方法、我們假定已經(jīng)請(qǐng)求完畢ValidateServlet、準(zhǔn)備狀態(tài)為4、表示XMLHttpRequest調(diào)用已經(jīng)完成、HTTP狀態(tài)碼為200、表示HTTP交互已經(jīng)成功。
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
}
}
}
Browsers maintain an object representation of the documents being displayed (referred to as the Document Object Model or DOM). JavaScript technology in an HTML page has access to the DOM, and APIs are available that allow JavaScript technology to modify the DOM after the page has loaded.
――瀏覽器維護(hù)著一個(gè)文檔的對(duì)象表示模型、既：DOM。網(wǎng)頁(yè)中的JavaScript方法可以訪問這個(gè)模型、并且可以在頁(yè)面已經(jīng)全部加載完成后再次改變這個(gè)模型。
Following a successful request, JavaScript technology code may modify the DOM of the HTML page. The object representation of the XML document that was retrieved from the ValidateServlet is available to JavaScript technology code using the req.responseXML, where req is an XMLHttpRequest object. The DOM APIs provide a means for JavaScript technology to navigate the content from that document and use that content to modify the DOM of the HTML page. The string representation of the XML document that was returned may be accessed by calling req.responseText. Now let’s look at how to use the DOM APIs in JavaScript technology by looking at the following XML document returned from the ValidateServlet.
――使用JavaScript代碼：req.responseXML可以得到服務(wù)端返回的XML文檔、req為XMLHttpRequest對(duì)象、DOM為JavaScript提供了一種搜索文檔內(nèi)容以及根據(jù)搜索結(jié)果改變網(wǎng)頁(yè)DOM的手段?？梢允褂胷eq.responseText來訪問返回的XML文檔的字符串表示、如下所示：
<message>
valid
</message>
This example is a simple XML fragment that contains the sender of the message element, which is simply the string valid or invalid. A more advanced sample may contain more than one message and valid names that might be presented to the user:
――上面的例子是一個(gè)簡(jiǎn)單的XML片段、實(shí)際應(yīng)用可能包含更多：
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
The parseMessages() function will process an XML document retrieved from the ValidateServlet. This function will call the setMessage() with the value of the message element to update the HTML DOM.
――parseMessages()方法處理從服務(wù)端返回的XML文檔、該方法使用message元素的值去調(diào)用setMessage()方法來改變HTML DOM。
6樓
厲害。佩服。。。謝謝樓主
7樓
不錯(cuò)不錯(cuò)！翻譯得很好！樓主得英語(yǔ)很好啊！6級(jí)啊…………嘻嘻……
8樓
7. The HTML DOM is updated.――HTML文檔對(duì)象被更新。
JavaScript technology can gain a reference to any element in the HTML DOM using a number of APIs. The recommended way to gain a reference to an element is to call document.getElementById("userIdMessage"), where "userIdMessage" is the ID attribute of an element appearing in the HTML document. With a reference to the element, JavaScript technology may now be used to modify the element’s attributes; modify the element’s style properties; or add, remove, or modify child elements.
One common means to change the body content of an element is to set the innerHTML property on the element as in the following example.
――JavaScript可以獲得HTML DOM中任何元素（對(duì)象）的引用、推薦使用document.getElementById("userIdMessage")方法來獲取。userIdMessage就是網(wǎng)頁(yè)上任意元素的ID屬性、有了元素（對(duì)象）的引用、JavaScript就可以改變這個(gè)元素的屬性以及這個(gè)元素的樣式屬性、還可以增加刪除或改變這個(gè)元素的子元素。通用的方法是設(shè)置innerHTML屬性、如下所示：
<script type="text/Javascript">
function setMessage(message) {
var userMessageElement = document.getElementById("userIdMessage");
userMessageElement.innerHTML = "<font color=/"red/">" + message + " </font>";
}
</script>
<body>
<div id="userIdMessage"></div>
</body>
The portions of the HTML page that were affected are re-rendered immediately following the setting of the innerHTML. If the innerHTML property contains elements such as <image> or <iframe>, the content specified by those elements is fetched and rendered as well.
――innerHTML屬性被改變以后網(wǎng)頁(yè)可以立即體現(xiàn)出變化、如果innerHTML屬性內(nèi)部包含象<image>、<iframe>這樣的元素、那么其所指定的資源內(nèi)容一樣被瀏覽器解析顯示。
The main drawback with this approach is that HTML elements are hardcoded as strings in the JavaScript technology code. Hardcoding HTML markup inside JavaScript technology code is not a good practice because it makes the code difficult to read, maintain, and modify. Consider using the JavaScript technology DOM APIs to create or modify HTML elements within JavaScript technology code. Intermixing presentation with JavaScript technology code as strings will make a page difficult to read and edit.
Another means of modifying the HTML DOM is to dynamically create new elements and append them as children to a target element as in the following example.
――這種方法最大的缺點(diǎn)是在JavaScript代碼里面難于以字符串形式書寫HTML、內(nèi)嵌于JavaScript中的HTML也難以看懂、維護(hù)和更改。另外的改變HTML DOM的方法是動(dòng)態(tài)創(chuàng)建新元素然后將其作為子元素插入目標(biāo)元素下、如下所示：
<script type="text/Javascript">
function setMessage(message) {
var userMessageElement = document.getElementById("userIdMessage");
var userIdMessageFont = document.getElementById("userIdMessageFont");
var messageElement = document.createTextNode(message);
if (userMessageElement.childNodes[0]) {
// update the elements
userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]);
} else {
// create the new elements
var fontElement = document.createTextNode("font");
fontElement.setAtribute("id", "userIdMessageFont");
fontElement.setAtribute("color", "red");
userMessageElement.appendChild(fontElement);
fontElement.appendChild(messageElement);
}
}
</script>
<body>
<div id="userIdMessage"></div>
</body>
――全文完、累死了。
9樓
精簡(jiǎn)版：
客戶端所嵌入的頁(yè)面特定的控制邏輯以JavaScript代碼的形式存在。頁(yè)面與JavaScript的交互建立在事件的基礎(chǔ)上（比如文檔加載事件、鼠標(biāo)點(diǎn)擊事件、焦點(diǎn)變化事件、甚至一個(gè)時(shí)鐘事件）。AJAX清楚的將表示邏輯和數(shù)據(jù)分離開來、一個(gè)HTML網(wǎng)頁(yè)能夠在需要的時(shí)候獲取以比特為單位的數(shù)據(jù)片段！這不同于以前的有一點(diǎn)變化就必須刷新整個(gè)頁(yè)面的做法。同時(shí)AJAX也需要一種完全不同的服務(wù)端架構(gòu)來支持這種交互模式。以前的傳統(tǒng)服務(wù)端WEB應(yīng)用專注于為每一個(gè)客戶端的每一次請(qǐng)求生成HTML頁(yè)面、每一次客戶端接到響應(yīng)都要刷新和重新渲染整個(gè)頁(yè)面。而我們所談的WEB應(yīng)用專注于客戶端把HTML文檔當(dāng)作模版或容器、客戶端向其中插入內(nèi)容、其原理就是每當(dāng)客戶端發(fā)生事件、客戶端都可以向服務(wù)端發(fā)出請(qǐng)求并使用服務(wù)端返回的XML數(shù)據(jù)。
名為ValidateServlet的Servlet驗(yàn)證表單數(shù)據(jù)、但是要求不能對(duì)整個(gè)頁(yè)面刷新。步驟如下：
1. A client event occurs.――客戶端事件發(fā)生：
點(diǎn)擊鏈接或表單元素的鍵盤事件引發(fā)JavaScript函數(shù)validate()：
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validate();">
2. A XMLHttpRequest object is created and configured.――一個(gè)XMLHttpRequest對(duì)象被創(chuàng)建并配置：
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");――創(chuàng)建XMLHttpRequest對(duì)象
}
req.open("GET", url, true);――調(diào)用XMLHttpRequest對(duì)象的open方法、url為所請(qǐng)求的服務(wù)端組件路徑、true表示這個(gè)調(diào)用是異步的、
如果設(shè)置為異步就必須還要有一個(gè)callback函數(shù)如下：
req.onreadystatechange = callback;
req.send(null);
}
3. The XMLHttpRequest object makes a call.――XMLHttpRequest對(duì)象發(fā)出請(qǐng)求：
如果是GET請(qǐng)求那么內(nèi)容可以為空、在url附加參數(shù)。
如果是POST請(qǐng)求那么就需要一個(gè)Content-Type頭的設(shè)置如下：
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));
如果用JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、JavaScript有一個(gè)escape()函數(shù)用于保障正確的編碼、并把特定字符正確的忽略掉。
4. The request is processed by the ValidateServlet.――請(qǐng)求被ValidateServlet所處理:
servlet處理XMLHttpRequest就和處理其他HTTP請(qǐng)求一樣：
public class ValidateServlet 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");
}
}
}
5. The ValidateServlet returns an XML document containing the results.――ValidateServlet返回一個(gè)包含結(jié)果的XML文檔。
ValidateServlet生成一個(gè)XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到DOM、XSLT等。
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("invalid");
開發(fā)者必須了解兩件事：第一：Content-Type必須設(shè)置為text/xml；第二：Cache-Control必須設(shè)置為no-cache。
6. The XMLHttpRequest object calls the callback() function and processes the result.
――XMLHttpRequest對(duì)象調(diào)用callback()函數(shù)并處理結(jié)果。
XMLHttpRequest對(duì)象的準(zhǔn)備狀態(tài)有所變化的時(shí)候則調(diào)用callback()方法、我們假定已經(jīng)請(qǐng)求完畢ValidateServlet、準(zhǔn)備狀態(tài)為4、表示XMLHttpRequest調(diào)用已經(jīng)完成、HTTP狀態(tài)碼為200、表示HTTP交互已經(jīng)成功。
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
}
}
}
瀏覽器維護(hù)著一個(gè)文檔的對(duì)象表示模型、既：DOM。網(wǎng)頁(yè)中的JavaScript方法可以訪問這個(gè)模型、并且可以在頁(yè)面已經(jīng)全部加載完成后再次改變這個(gè)模型。
使用JavaScript代碼：req.responseXML可以得到服務(wù)端返回的XML文檔、req為XMLHttpRequest對(duì)象、DOM為JavaScript提供了一種搜索文檔內(nèi)容以及根據(jù)搜索結(jié)果改變網(wǎng)頁(yè)DOM的手段。可以使用req.responseText來訪問返回的XML文檔的字符串表示、如下所示：
<message>
valid
</message>
上面的例子是一個(gè)簡(jiǎn)單的XML片段、實(shí)際應(yīng)用可能包含更多：
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
parseMessages()方法處理從服務(wù)端返回的XML文檔、該方法使用message元素的值去調(diào)用setMessage()方法來改變HTML DOM。
7. The HTML DOM is updated.――HTML文檔對(duì)象被更新。
JavaScript可以獲得HTML DOM中任何元素（對(duì)象）的引用、推薦使用document.getElementById("userIdMessage")方法來獲取。userIdMessage就是網(wǎng)頁(yè)上任意元素的ID屬性、有了元素（對(duì)象）的引用、JavaScript就可以改變這個(gè)元素的屬性以及這個(gè)元素的樣式屬性、還可以增加刪除或改變這個(gè)元素的子元素。通用的方法是設(shè)置innerHTML屬性、如下所示：
<script type="text/Javascript">
function setMessage(message) {
var userMessageElement = document.getElementById("userIdMessage");
userMessageElement.innerHTML = "<font color=/"red/">" + message + " </font>";
}
</script>
<body>
<div id="userIdMessage"></div>
</body>
innerHTML屬性被改變以后網(wǎng)頁(yè)可以立即體現(xiàn)出變化、如果innerHTML屬性內(nèi)部包含象<image>、<iframe>這樣的元素、那么其所指定的資源內(nèi)容一樣被瀏覽器解析顯示。
這種方法最大的缺點(diǎn)是在JavaScript代碼里面難于以字符串形式書寫HTML、內(nèi)嵌于JavaScript中的HTML也難以看懂、維護(hù)和更改。另外的改變HTML DOM的方法是動(dòng)態(tài)創(chuàng)建新元素然后將其作為子元素插入目標(biāo)元素下、如下所示：
<script type="text/Javascript">
function setMessage(message) {
var userMessageElement = document.getElementById("userIdMessage");
var userIdMessageFont = document.getElementById("userIdMessageFont");
var messageElement = document.createTextNode(message);
if (userMessageElement.childNodes[0]) {
// update the elements
userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]);
} else {
// create the new elements
var fontElement = document.createTextNode("font");
fontElement.setAtribute("id", "userIdMessageFont");
fontElement.setAtribute("color", "red");
userMessageElement.appendChild(fontElement);
fontElement.appendChild(messageElement);
}
}
</script>
<body>
<div id="userIdMessage"></div>
</body>
JavaScript技術(shù)：SUN的《AJAX與J2EE》全文譯了，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
