<body onload="makeRequest('xml/content.xml'); "> <div id="copy"></div> </body> |
四、創(chuàng)建請求對象
為了創(chuàng)建請求對 象,你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象之間的主要區(qū)別在于使用 它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對象; 而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest對象。另外一個區(qū)別是你創(chuàng)建對象的方式:Opera,Mozilla, Netscape和Safari允許你簡單地調(diào)用該對象的構(gòu)造器,但是Windows IE需要把對象的名字傳遞到ActiveX 構(gòu)造器中。下面是怎樣創(chuàng)建代碼來決定要使用哪個對象和怎樣創(chuàng)建它的示例:
if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("MSXML2.XMLHTTP"); } |
五、發(fā)出請求
現(xiàn)在既然你已經(jīng)創(chuàng)建了你的請求對象,那么你已經(jīng)為向服務(wù)器發(fā) 出請求作了準(zhǔn)備。創(chuàng)建一個到事件處理器的參考以聽取onreadystatechange事件。然后,該事件處理器 方法將在狀態(tài)發(fā)生變化時作出響應(yīng)。一旦我們完成請求,我們就開始創(chuàng)建這個方法。打開連接以GET或 POST一個定制的URL-在此是一個content.xml,并且設(shè)置一個布爾定義-是否你想要進(jìn)行異步調(diào)用。
現(xiàn)在到了發(fā)出請求的時間了。在這個示例中,我使用了null,因為我們使用的是GET; 為了使用 POST,你需要使用下面這個方法發(fā)出一個查詢串:
request.onreadystatechange = onResponse; request.open("GET". url, true); request.send (null); |
六、定制加載和錯誤處理消息
你為onreadystatechange方法創(chuàng)建的事件處理器 正是集中進(jìn)行加載和處理錯誤的場所。現(xiàn)在到了考慮用戶并針對他們與之交互的內(nèi)容的狀態(tài)提供反饋的 時候了。在這個實例中,我針對所有的裝載狀態(tài)代碼提供反饋,并且也對最經(jīng)常發(fā)生的錯誤處理狀態(tài)代 碼提供一些基本的反饋。為了顯示請求對象的當(dāng)前狀態(tài),readyState屬性包括顯示在下表中的一些值。
值 描述
0 未初始化,對象沒有用數(shù)據(jù)進(jìn)行初始化。
1 裝載中,對象正在裝載它 的數(shù)據(jù)。
2 裝載結(jié)束,對象完成了它的數(shù)據(jù)的裝載。
3 可交互,用戶能與對象交互了, 盡管它還沒有裝載結(jié)束。
4 完成,對象已經(jīng)完全被初始化。
W3C中有很長的一串有關(guān)HTTP 狀態(tài)代碼的定義。我選擇了兩個狀態(tài)代碼:
200:請求成功了。
404:服務(wù)器沒有找到與所 請求的文件相匹配的任何東西。
最后,我檢查任何另外的狀況代碼-它們將生成一個錯誤并提供 一個一般錯誤信息。下面是一個代碼示例-你可以用之來處理這些情況。注意,我在定位我們前面在HTML 文件的主體中創(chuàng)建的div ID并且對它應(yīng)用裝載和/或錯誤信息-通過innerHTML方法-這個方法用于設(shè)置在 div對象的開始和結(jié)束標(biāo)簽之間的HTML:
if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; } if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; } if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; } if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; } if(obj.readyState == 4){ if(obj.status == 200){ return true; } else if(obj.status == 404) { // 添加一個定制消息或把用戶重定 向到另外一個頁面 document.getElementById('copy').innerHTML = "File not found"; } else {document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; } } |
當(dāng)狀況代碼為200 時,這意味著請求成功。下面開始進(jìn)行響應(yīng)了。
七、分析響應(yīng)
當(dāng)你準(zhǔn)備好分析來自請求 對象的響應(yīng)時,真正的工作開始了。現(xiàn)在你可以用你請求的數(shù)據(jù)開始工作。僅為測試目的,在開發(fā)期間 ,可以使用responseText和responseXML屬性來顯示來自響應(yīng)的原始數(shù)據(jù)。為了存取XML響應(yīng)中的結(jié)點, 首先使用你創(chuàng)建的請求對象,定位到responseXML屬性以檢索(你可能已經(jīng)猜測出來)來自響應(yīng)的XML。定 位到documentElement-它檢索一個到XML響應(yīng)的根結(jié)點的參考。
var response = request.responseXML.documentElement; |
現(xiàn)在既然你有了到響應(yīng)的根結(jié)點的參考,那么你可以使 用getElementsByTagName()以結(jié)點名字來檢索childNodes。下面一行用一個頭部的nodeName來定位一個 childNode:
response.getElementsByTagName('header') [0].firstChild.data; |
使用firstChild.data可以允許你存取該元素中的文本:
response.getElementsByTagName('header')[0].firstChild.data; |
下面是怎樣 創(chuàng)建這些代碼的完整的例子:
var response = request.responseXML.documentElement; var header = response.getElementsByTagName ('header')[0].firstChild.data; document.getElementById ('copy').innerHTML = header; |
八、需求分析
現(xiàn)在既然你知道怎樣使用 AJAX的基礎(chǔ)知識,那么下一步就是決定是否在一工程使用它。須記住的最重要的事情是,在你還沒有刷 新頁面時你無法使用"Back"按鈕。為此,可以先專注于你的工程中的一小部分-它能夠從使用 這種類型的交互中受益。例如,你可以創(chuàng)建一個表單-它在用戶每次輸入一個輸入字段或一個字母時查詢 一個腳本以便進(jìn)行實時校驗。你可以創(chuàng)建一個拖放頁面-在釋放一項時,它能夠把數(shù)據(jù)發(fā)送到一個腳本中 并把該頁面的狀態(tài)保存到一個數(shù)據(jù)庫中。使用AJAX的理由毫無疑問是存在的; 并且這種使用無論對開發(fā) 者還是用戶都會帶來益處; 這全依賴于具體的條件和執(zhí)行情況。
還有其它方法可用來解決 "Back"按鈕的問題,例如使用Google Gmail-它現(xiàn)在能夠為你的操作提供一種撤消功能而不刷 新該頁面。以后還會出現(xiàn)許多更具創(chuàng)造性的例子-它們將通過提供給開發(fā)者創(chuàng)建獨特實時的體驗的手段給 用戶帶來更大的好處。
九、結(jié)論
盡管AJAX允許我們構(gòu)建新的和改進(jìn)的方式來與一個WEB頁 面進(jìn)行交互; 但是作為開發(fā)者,我們需要牢記產(chǎn)品是不考慮技術(shù)的; 它關(guān)心的是用戶以及其如何與用戶 進(jìn)行交互。沒有了用戶群,我們構(gòu)建的工程毫無用處?;谶@個標(biāo)準(zhǔn),我們就能評估應(yīng)該使用什么技術(shù) 以及何時使用它們來創(chuàng)建對相應(yīng)用戶有用的應(yīng)用。
標(biāo)簽:延邊 銅陵 儋州 益陽 鷹潭 阿拉善盟 張掖
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用AJAX進(jìn)行WEB應(yīng)用程序開發(fā)的方法》,本文關(guān)鍵詞 使用,AJAX,進(jìn)行,WEB,應(yīng)用,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。