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