AJAX 核心基礎(chǔ)技術(shù)的真實(shí)概述。
2006 年 4 月發(fā)布
迄今為止,您可能已經(jīng)聽過太多有關(guān) AJAX 的宣傳報(bào)道,而且很多產(chǎn)品都宣稱它們支持或“兼容”AJAX。但是,很多人可能一直無法從技術(shù)角度對 AJAX 的實(shí)質(zhì)進(jìn)行簡單、嚴(yán)謹(jǐn)?shù)年U釋。本文將擯棄所有華麗詞藻,從平實(shí)的角度對構(gòu)成 AJAX 的核心基礎(chǔ)進(jìn)行概述。
首先,AJAX 是個(gè)新事物嗎?
并非如此。 遠(yuǎn)程 Javascript 在最近掀起了一輪熱潮。利用它,開發(fā)人員能夠使用 XML 數(shù)據(jù)與服務(wù)器交互。而 AJAX 就是一種遠(yuǎn)程 Javascript。AJAX 之所以成為可能,是因?yàn)楝F(xiàn)在許多主要的瀏覽器都提供可進(jìn)行獨(dú)立 XML HTTP 請求的 對象 。Internet Explorer 5 以及更高版本提供了一個(gè) XMLHTTP 對象,而基于 Mozilla 的瀏覽器則提供了一個(gè) XMLHttpRequest 對象。這些對象都能夠從服務(wù)器請求 XML 數(shù)據(jù),并以類似的方式處理這些數(shù)據(jù)。所有能夠動態(tài)提供 XML 的技術(shù)都可以使用服務(wù)器端 AJAX 組件。任何動態(tài) Web 技術(shù)(從 PHP 到 Servlet)都可以充當(dāng) AJAX 服務(wù)器。
遠(yuǎn)程 Javascript 與 AJAX 的缺點(diǎn)之一是, 頁面作者 (設(shè)計(jì)最終頁面的人員)必須編寫相當(dāng)數(shù)量的 Javascript 代碼來管理 XMLHTTP 交互。幸好,JavaServer Faces (JSF) 為此提供了一個(gè)解決方案,從而使 AJAX 更加易于使用。
Ajax Under The Hood
只有了解了 AJAX 客戶端-服務(wù)器事務(wù)中涉及的核心 AJAX 體系結(jié)構(gòu)后,方可進(jìn)一步理解與其他技術(shù)(如 JSF)集成的更為高級的 AJAX 示例。
AJAX 目前可以提供以下兩種核心技術(shù):
- 支持 Javascript 和支持 XMLHTTP 和 XMLHttpRequest 對象的瀏覽器
- 能夠以 XML 響應(yīng)的 HTTP 服務(wù)器技術(shù)
因?yàn)樗辛餍械臑g覽器都支持 Javascript 和必要的 XMLHTTP 請求對象,且?guī)缀跛?Web 服務(wù)器技術(shù)均可生成 XML(或任何標(biāo)記),所以核心 AJAX 技術(shù)普遍適用。
最簡單的 AJAX 應(yīng)用程序?qū)嵸|(zhì)上就是一個(gè)帶有 Javascript 函數(shù)的標(biāo)準(zhǔn) HTML 用戶界面,該界面可與能動態(tài)生成 XML 的 HTTP 服務(wù)器進(jìn)行交互。任何動態(tài) Web 技術(shù)(從 CGI 到 Servlet,以及本文稍后將談到的 JSF)都可充當(dāng)服務(wù)器端 AJAX 技術(shù)。
核心 AJAX 應(yīng)用程序的主要組件包括:
-
HTML 頁面,其中包含:
- 與 AJAX Javascript 函數(shù)交互的 UI 元素
- 與 AJAX 服務(wù)器交互的 Javascript 函數(shù)
- 可處理 HTTP 請求并以 XML 標(biāo)記響應(yīng)的服務(wù)器端 Web 技術(shù)。
這些元素如圖 1 所示。
了解了關(guān)鍵元素后,我們就可以設(shè)計(jì)一個(gè)包含輸入域、按鈕或任何可鏈接至 Javascript 的元素的 HTML 用戶界面了。例如,按下按鈕可激活某個(gè) Javascript 函數(shù),或者更深入些,在用戶向輸入域鍵入內(nèi)容時(shí)可激活某個(gè) Javascript 函數(shù)。為此,您可以將 onkeyup= 賦予 Javascript 函數(shù)的值來處理輸入域中的數(shù)據(jù)。例如,當(dāng)發(fā)生 onkeyup 事件(即鍵入內(nèi)容)時(shí),輸入域“searchField”將調(diào)用 Javascript 函數(shù) lookup( )。
<input type="text" id="searchField" size="20" onkeyup="lookup('searchField');">
除了響應(yīng)用戶界面交互(例如鍵入)外,AJAX Javascript 函數(shù)還可根據(jù)自己的計(jì)時(shí)器進(jìn)行獨(dú)立操作。(可以使用該方法執(zhí)行 AJAX autosave (自動保存)特性。)
如何發(fā)出 XML HTTP 請求
現(xiàn)在,我們來了解如何調(diào)用 AJAX Javascript 代碼。請看以下 Javascript 代碼,該代碼可發(fā)出一個(gè) XML HTTP 請求:
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }
利用該代碼斷,主要的瀏覽器(Internet Explorer 和 Mozilla/Safari)都可向服務(wù)器發(fā)出獨(dú)立的 HTTP 請求。該代碼首先檢查瀏覽器是否支持上文提及的兩個(gè)支持的 XMLHTTP 對象,然后對其中之一進(jìn)行實(shí)例化。
一旦對 XMLHttpRequest(或 Microsoft 的 XMLHTTP)進(jìn)行了實(shí)例化,即可以通過完全相同的方式對其進(jìn)行操作。
要初始化到服務(wù)器的連接,需使用以下 open 方法:
req.open("GET", url, true);
第一個(gè)參數(shù)是 HTTP 方法( GET 或 POST )。第二個(gè)參數(shù)是服務(wù)器(或使用 POST 的表單操作)的 URL;第三個(gè)參數(shù)為 true ,則表明可進(jìn)行異步調(diào)用(“A”代表 AJAX)。這意味著該瀏覽器可以在實(shí)現(xiàn)請求的同時(shí)繼續(xù)執(zhí)行其他操作。 open 方法中若為 false 值,則表明為非異步處理或順序處理。我們不建議如此,這是因?yàn)槟臑g覽器會在返回響應(yīng)前停止操作。
使用 open 初始化連接后,可進(jìn)行 onreadystatechange 調(diào)用(只適用于異步調(diào)用)。這將注冊一個(gè)回調(diào)函數(shù),一旦請求完成就會調(diào)用該函數(shù):
req.onreadystatechange = processXMLResponse;
在完成請求后,將調(diào)用處理 XML 響應(yīng)的 processXMLResponse( ) 函數(shù)。可以通過 onreadystatechange 語句以內(nèi)聯(lián)方式聲明回調(diào)函數(shù):
req.onreadystatechange = processXMLResponse() { // process request };
還可使用 req.setRequestHeader 指定任何標(biāo)題內(nèi)容,如:
req.setRequestHeader("Cookie", "someKey=true");
一旦完全初始化了 XMLHTTP 請求對象 (req),就可使用 send( ) 初始化對服務(wù)器的調(diào)用:
req.send(null);
對于 GET 請求,使用 null 值或空字符串“”。
POST 請求包含一個(gè)帶有表單數(shù)據(jù)的字符串參數(shù)。它們也要求在請求的標(biāo)題中設(shè)置 Content-Type。以下兩行演示了如何執(zhí)行 AJAX POST 請求:
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"; req.send("name=scott&email=stiger@foocorp.com");
完成請求后調(diào)用的回調(diào)函數(shù)通常具有確保請求不會發(fā)生錯(cuò)誤的代碼。這可通過檢查 readyState 以及 HTTP 請求的整體 狀態(tài) 來實(shí)現(xiàn)。(readystate 為 4 表示 XMLHTTP 請求 完整 ,而 200 表示請求 成功 (404 含義正好相反)。
function processXMLResponse() { if (req.readyState == 4) { if (request.status != 200) { // Process the XML response } } }
XML 響應(yīng)的處理是通過使用標(biāo)準(zhǔn) Javascript DOM 方法完成的。例如,要從輸入的 XML 流中抽取員工姓名:
<employee> Chris </employee>
您可以使用以下代碼:
var name = req.responseXML.getElementsByTagName("employee")[0];
分析更為復(fù)雜的 XML 會使用如下代碼迭代元素:
for (i=0;i<elements.length;i++) { for (j=0;j<elements[i].childNodes.length;j++) { var ElementData = elements[i].childNodes[j].firstChild.nodeValue; } }
結(jié)合使用 XMLHttpRequest 和 HTML
請注意,通過 XMLHttpRequest 獲得 XML 響應(yīng)無需總是格式良好和有效。因此,AJAX 服務(wù)器端組件可以直接將 HTML 內(nèi)容發(fā)送至客戶端。然后,JavaScript 可使用 req.responseText 方法/屬性(它只是將內(nèi)容作為字符串進(jìn)行檢索)檢索該 HTML 內(nèi)容。可以使用該 HTML 字符串文本以任何方式更改頁面。例如,對于以下 HTML 流:
<h2>Hello there!</h2>
<p> This is <b>HTML</b></p>
可使用以下語句檢索至一個(gè)字符串中:
var HTMLcontent = req.responseText;
之后通過 id="div1" 添加至指定的 HTML DIV。
document.getElementById("div1").innerHTML += HTMLcontent;
JSF 如何支持 AJAX
JSF 及其以組件為中心的體系結(jié)構(gòu)通過允許 JSF 組件全權(quán)處理 Javascript 和嵌入式 AJAX“管件”解決了 AJAX 的固有難題。JSF 頁面作者甚至無需關(guān)注客戶端與服務(wù)器之間的 AJAX 交互。它們只需像使用其他 JSF 組件那樣使用支持 AJAX 的 JSF 組件即可,而且感覺更好。JSF 與 AJAX 的結(jié)合使用前途光明!
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
