【正文】 畢業(yè)設(shè)計 (論文 )外文資料翻譯 學(xué) 院 ： 計算機工程學(xué)院 專業(yè)班級 ： 計算機科學(xué)與技術(shù) 056 學(xué)生姓名 ： 陳燕 學(xué) 號： 110511606 指導(dǎo)教師 ： 朱敏 外文出處 ： (外文 ) /technicalArticles 附 件 ： ； 指導(dǎo)教師評語： 簽名： 年 月 日 異步 JavaScript技術(shù)和 XML （ AJAX ）與 Java平臺 使用過 Flickr、 GMail,、 Google、 Suggest或 Google地圖的人都知道一 種全新的動態(tài) WEB應(yīng)用正在成型、這些應(yīng)用看上去和傳統(tǒng)桌面應(yīng)用非常相似、他們不依賴于插件或者瀏覽器特效。傳統(tǒng)意義上的 WEB應(yīng)用就是一組網(wǎng)頁、當頁面上有任何一點內(nèi)容有所變化的時候必須更新整個網(wǎng)頁。一些技術(shù)比如JavaScript和 CSS已經(jīng)非常成熟、你可以使用他們高效的創(chuàng)建動態(tài)網(wǎng)頁、并可以跑在大多數(shù)主流瀏覽器上。本文將細述數(shù)種可以使你的 WEB應(yīng)用更豐富更具交互性（就象桌面應(yīng)用一樣）的技術(shù)。 使用 JavaScript技術(shù)、 HTML網(wǎng)頁可以異步調(diào)用生成它的服務(wù)器上的服務(wù)并可以獲取返回的 XML文檔形式的結(jié)果。 JavaScript再使用這個 XML文檔更新或改動本網(wǎng)頁的文檔對象模型（ DOM）、名詞 AJAX就是近年來出現(xiàn)的用與描述這種交互模式的新名詞。 AJAX并不是新事物、數(shù)年前使用微軟 IE瀏覽器的開發(fā)者們就在使用它、直到最近、這項技術(shù)被冠以遠程腳本而更出名了。以前 WEB開發(fā)者使用插件、 applets 或者隱藏框架來仿效這種交互模式。但是現(xiàn)在由于XMLHttpRequest對象技術(shù)已經(jīng)在各大平臺的主流瀏覽器上普及、所以這種模仿的情況越來越少了。真正神奇的事情在于 JavaScript和 XMLHttpRequest對象技術(shù)的結(jié)合 、盡管 XMLHttpRequest對象技術(shù)并不屬于 JavaScript標準規(guī)范、但是現(xiàn)代的主流瀏覽器都支持、在 Firefox、 IE、 Safari 這些瀏覽器對JavaScript和 CSS的執(zhí)行有微小不同、但這些不同之處很容易理解和處理。如果你一定要兼容老一代瀏覽器那還是不要用 AJAX了。 是什么使得基于 AJAX的客戶端如此獨特？那就是客戶端所嵌入的頁面特定的控制邏輯、這些控制邏輯以 JavaScript代碼的形式存在。頁面與JavaScript的交互建立在事件的基礎(chǔ)上（比如文檔加載事件、鼠標點擊事件、焦點變化 事件、甚至一個時鐘事件）。 AJAX清楚的將表示邏輯和數(shù)據(jù)分離開來、一個 HTML網(wǎng)頁能夠在需要的時候獲取以比特為單位的數(shù)據(jù)片段！這不同于以前的有一點變化就必須刷新整個頁面的做法。同時 AJAX也需要一種完全不同的服務(wù)端架構(gòu)來支持這種交互模式。以前的傳統(tǒng)服務(wù)端 WEB應(yīng)用專注于為每一個客戶端的每一次請求生成 HTML頁面、每一次客戶端接到響應(yīng)都要刷新和重新渲染整個頁面。而我們所談的 WEB應(yīng)用專注于客戶端把 HTML文檔當作模版或容器、客戶端向這個容器中插入內(nèi)容、作到這些的原理就是每當客戶端發(fā)生事件、客戶端都可以向服務(wù)端 發(fā)出請求并使用服務(wù)端返回的 XML數(shù)據(jù)。 一些 AJAX的 應(yīng)用 如下： 實時數(shù)據(jù)驗證表單： 實時的表單數(shù)據(jù)驗證：象 ID號、序列號、郵政編碼、優(yōu)惠卷號碼這樣的表單數(shù)據(jù)可以在用戶提交整個表單之前就得到驗證！ 自動補全：一些特定表單數(shù)據(jù)比如 、姓名、城市名可以根據(jù)用戶的類型自動填寫。 負荷需求： 基于客戶端的事件，一個 HTML頁面可以 在后臺 獲取更多的數(shù)據(jù)，讓網(wǎng)頁瀏覽器加載更快 智能客戶端接口控制： 諸 如樹 ，菜單，數(shù)據(jù)表，豐富的文本編輯器，日歷和進度條允許用戶更好地互動和互動的 HTML 網(wǎng)頁，一般 而言 不需要重新加載頁面。 更新 數(shù)據(jù)和服務(wù)器推： HTML 網(wǎng)頁可能從一個服務(wù)器 獲得 最新數(shù)據(jù)，如分數(shù)，股票報價，天氣預(yù)報，或適用的具體數(shù)據(jù)。 客戶可以使用 Ajax技術(shù)得到了一套最新數(shù)據(jù)不重 載 整頁。 民調(diào)不是最有效的手段 來 確保數(shù)據(jù)在網(wǎng)頁上是最電流。 新興技術(shù)，如 彗星 正在制定，提供真正的服務(wù)器端通過 HTTP 的推動保持持久連接用戶端與 服務(wù) 器之間。 看到這個博客條目對 彗星使用灰熊更多的發(fā)展，推動服務(wù)器與 Java技術(shù) 。 部分 更新 ： 一個 HTML頁面可以提交表單數(shù)據(jù)的需要，而不需要一整頁刷新。 混搭： 一個 HTML 頁面可以獲取數(shù)據(jù)使用的是服務(wù)器端的代理或由包括外部腳本組合外部數(shù)據(jù)與您的應(yīng)用程序或您的服務(wù)的資料。 例如，您可以混合內(nèi)容或數(shù)據(jù)的第三 方應(yīng)用程序，例如谷歌地圖與您自己的應(yīng)用程序。 網(wǎng)頁作為一種應(yīng)用： Ajax 技術(shù)，可創(chuàng)造單一網(wǎng)頁的應(yīng)用程序的外觀和感覺很像一個桌面應(yīng)用程序。 看到 一篇關(guān)于使用 Ajax 和門戶 提供更多關(guān)于如何使用的 portlet應(yīng)用的 。 這些用處并不全、但是它們說明了 AJAX交互使得 WEB應(yīng)用可以作到大量以前無法作到的事情。 解剖一個 AJAX交互 ： 現(xiàn)在我們已經(jīng)討論了 Ajax與一些較高級別的問題，讓我們把所有的 放在 一起，看一個基于 AJAX的 Java應(yīng)用程序。 讓我們考慮一個例子。 一個 web應(yīng)用包含一個靜態(tài)的網(wǎng)頁， 或 HTML頁面中生成的 JSP技術(shù) 包含 HTML表單，需要服務(wù)器端的邏輯來驗證表單數(shù)據(jù)而無需刷新頁面。 服務(wù)器端 Web組件（ servlet的 ）命名 ValidateServlet將提供驗證邏輯。 圖 1描述的細節(jié)， AJAX的相互作用，將提供驗證邏輯。 下列項目代表設(shè)置的一個 AJAX的交互，如圖 1: 。 XMLHttpRequest對象 的 創(chuàng)建和配置。 。 ValidateServlet 。 ValidateServlet返回一個 XML文件 ， 其中載有結(jié)果。 6. XMLHttpRequest對象調(diào)用 callback()函數(shù)和過程的結(jié)果。 7. 在 HTML的 DOM更新。 現(xiàn)在讓我們來 詳細 看看每一步 AJAX互動 1． 客戶端事件發(fā)生。 JavaScript技術(shù) 的 功能 就是一個 結(jié)果的事件。 在這種情況下，功能 validate()可能會映射到 onkeyup事件的鏈接或形式的組成部分。 input type=text size=20 id=userid name=id onkeyup=validate()。 點擊鏈接或表單元素的鍵盤事件引發(fā) JavaScript函數(shù) validate()： 2 .XMLHttpRequest對象的創(chuàng)建和配置。 創(chuàng)建和配置 一個 XMLHttpRequest對象 。 var req。 function validate() { var idField = (userid)。 var url = validate?id= + encodeURIComponent()。 if (typeof XMLHttpRequest != undefined) { req = new XMLHttpRequest()。 } else if () { req = new ActiveXObject()。 } (GET, url, true)。 = callback。 (null)。 } 該 validate()函數(shù)創(chuàng)建一個 XMLHttpRequest對象，并要求公開功能的對象。 open功能需要三個參數(shù)： HTTP方法，這是 GET或 POST 。URL服務(wù)器端組件，該對象將互動 。和一個布爾說明是否要求將異步。 這個 API是(String method, String URL, boolean asynchronous)， 如果一個互動設(shè)置為異步（ true ） 則必須有一個 回調(diào)函數(shù) ： = callback。 見第 6條的更詳細的信息。 3 .XMLHttpRequest對象提出了要求。 執(zhí)行到 (null)的時候發(fā) 出請求。 如果一個 HTTP GET ，此內(nèi)容可能是 null 或空白。 當此功能要求 XMLHttpRequest對象，調(diào)用的 URL是在配置的對象是所謂的。 如這個例子中，數(shù)據(jù)公布（ id ）是作為一個 URL參數(shù)。 使用 HTTP GET請求時，是冪等，也就是說，兩個重復(fù)的請求將返回同樣的結(jié)果。 當使用 HTTP GET方法，長度的網(wǎng)址，包括轉(zhuǎn)義網(wǎng)址參數(shù)，限制了一些瀏覽器和服務(wù)器端的 Web容器。 在 HTTP POST法時，應(yīng)當使用發(fā)送數(shù)據(jù)到服務(wù)器，這將影響服務(wù)器端的應(yīng)用程序狀態(tài)。 一個 HTTP POST需要一個ContentType標頭設(shè)置上 XMLHttpRequest對象使用了如下聲明： (ContentType, application/xformurlencoded)。 (id= + escape())。 如果用 JavaScript產(chǎn)生表單元素值、必須確保值編碼的正確、 JavaScript有一個 escape()函數(shù)用于保障正確的編碼、并把 特定字符正確的忽略掉。 4 .請求被 ValidateServlet所處理 : 映射到一個 servlet的 URI “驗證 ”檢查用戶是否 ID是在用戶數(shù)據(jù)庫。 servlet處理 XMLHttpRequest就和處理其他 HTTP請求一樣： 下面的例子顯示一個服務(wù)器提取 id參數(shù)的要求，并確認是否已采取參數(shù)。 public class ValidateServlet extends HttpServlet { private ServletContext context。 private HashMap users = new HashMap()。 public void init(ServletConfig config) throws ServletException { = ()。 (greg,account data)。 (duke,account data)。 } public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = (id)。 if ((targetId != null) amp。amp。 !(())) { (text/xml)。 (CacheControl, nocache)。 ().write(valid)。 } else { (text/xml)。 (CacheControl, nocache)。 ().write(invalid)。 } } } 在這個例子中，一個簡單的 hashmap是用來控制用戶。在這個例子中，我們假設(shè)，使用者輸入 duke的編號。 5 . ValidateServlet返回一個包含結(jié)果的 XML文檔。 用戶 ID duke是本列表中的用戶 ID的 users HashMap 。 ValidateServlet生成一個 XML文檔作為響應(yīng)、更復(fù)雜的情況可能用到 DOM、 XSLT等。 (text/xml)。 (CacheControl, nocache)。 ().write(invalid)。 開發(fā)者必須了解兩件事：第一： ContentType必須設(shè)置為 text/xml；第二：CacheControl 必須設(shè)置為 nocache。 是 XMLHttpRequest對象將只處理請求并在ContentType的唯一 text/xml ，并設(shè)置 CacheControl ，以 no cache將瀏覽器從本地緩存響應(yīng)情況下，重復(fù)請求相同的 URL （包括 URL參數(shù)）可能會返回不同的反應(yīng)。 6 .XMLHttpRequest對象調(diào)用 callback()函數(shù)并處理結(jié)果。 XMLHttpRequest對象的準備狀態(tài)有所 變化的時候則調(diào)用 callback()方法、我們假定已經(jīng)請求完畢 ValidateServlet、準備狀態(tài)為 表示 XMLHttpRequest調(diào)用已經(jīng)完成、 HTTP狀態(tài)碼為 200、表示 HTTP交互已經(jīng)成功 。 function callback() { if ( == 4) { if ( == 200) { // update the HTML DOM ba