熱門標(biāo)簽：蓄意標(biāo)記地圖標(biāo)注 信貸電銷機(jī)器人有用嗎 莆田防封電銷卡價(jià)格 察縣地圖標(biāo)注 廣西ai語音電銷機(jī)器人哪家好 如何用地圖標(biāo)注各分公司 辦理一個(gè)400電話多少錢 電銷機(jī)器人適用范圍 接聽電話機(jī)器人哪有

一、簡(jiǎn)介

AJAX，一個(gè)異步JavaScript和XML的縮略詞，是最近出來的技術(shù)詞語。異步意味著你可以經(jīng)由超文本傳輸協(xié)議(HTTP)向一個(gè)服務(wù)器發(fā)出請(qǐng)求并且在等待該響應(yīng)時(shí)繼續(xù)處理另外的數(shù)據(jù)。這就意味著，例如，你可以調(diào)用一個(gè)服務(wù)器端腳本來從一個(gè)數(shù)據(jù)庫中以XML方式檢索數(shù)據(jù)，把數(shù)據(jù)發(fā)送到存儲(chǔ)在一個(gè)數(shù)據(jù)庫的服務(wù)器腳本，或者簡(jiǎn)單地裝載一個(gè)XML文件以填充你的Web站點(diǎn)而不需刷新該頁面。然而，在這項(xiàng)新技術(shù)提供巨大能力的同時(shí)，它也引起了在"Back"按鈕問題上的很多爭(zhēng)論。本文將幫助你確定在真實(shí)世界中何時(shí)使用AJAX是最佳選擇。

首先，我假定你對(duì)縮略詞JavaScript和XML部分有一個(gè)基本了解。盡管你能通過AJAX請(qǐng)求任何類型的文本文件，但是我在此主要集中討論XML。我將解釋怎樣在真實(shí)世界中使用AJAX以及怎樣在一個(gè)工程中評(píng)估它的價(jià)值。在你讀完本文后，你將會(huì)明白什么是AJAX，在什么情況下，為什么以及怎樣使用這項(xiàng)技術(shù)。你將要學(xué)習(xí)，在保持給用戶提供直觀體驗(yàn)的同時(shí)怎樣創(chuàng)建對(duì)象，發(fā)出請(qǐng)求以及定制響應(yīng)。

我已創(chuàng)建了一個(gè)適合于本文的示例工程(你可以下載源代碼)。這個(gè)示例實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的請(qǐng)求-它裝載一個(gè)包含頁面內(nèi)容的XML文件并且分析數(shù)據(jù)以把它顯示在一個(gè)HTML頁面中。

二、常規(guī)屬性和方法

表1和2提供了一個(gè)屬性和方法的概述- 它們?yōu)閃indows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等瀏覽器所支持。

表1屬性

屬性 描述

onreadystatechange 當(dāng)請(qǐng)求對(duì)象變化時(shí)該事件處理器激活。

readyState 返回指示對(duì)象的當(dāng)前狀態(tài)的值。

responseText 來自服務(wù)器的響應(yīng)串的版本 。

responseXML 來自服務(wù)器的響應(yīng)的DOM兼容的文檔對(duì)象。

status 來自服務(wù)器的響應(yīng)的 狀態(tài)碼。

statusText 以一個(gè)字符串形式返回的狀態(tài)消息。

表2方法

方法 描述

Abort() 取消當(dāng)前HTTP請(qǐng)求。

getAllResponseHeaders() 檢索所有的HTTP頭值。

getResponseHeader("headerLabel") 從響應(yīng)體中檢索一個(gè)HTTP頭部的值。

open("method","URL"[,asyncFlag[,"userName" [,"password"]]]) 初始化一個(gè)MSXML2.XMLHTTP請(qǐng)求，并從該請(qǐng)求指定方法，URL和認(rèn)證信息 。

send(content) 發(fā)送一個(gè)HTTP請(qǐng)求到服務(wù)器并接收響應(yīng)。

setRequestHeader ("label", "value") 指定一個(gè)HTTP頭的名字。

三、從哪里開始

首先，你需要?jiǎng)?chuàng)建XML文件-后面我們對(duì)之進(jìn)行請(qǐng)求并作為頁面內(nèi)容進(jìn)行分析。你正在請(qǐng)求的文件必須與 目標(biāo)工程駐留在相同的服務(wù)器上。

下一步，創(chuàng)建發(fā)出請(qǐng)求的HTML文件。當(dāng)頁面通過使用頁面主體 中的onload方法進(jìn)行加載時(shí)，該請(qǐng)求發(fā)生。接著，該文件需要一個(gè)有ID的div標(biāo)簽，這樣當(dāng)我們準(zhǔn)備好要 顯示內(nèi)容時(shí)就可以對(duì)之進(jìn)行定位。當(dāng)你做完所有這些，你的頁面的主體上去，如下：

＜body onload="makeRequest('xml/content.xml'); "＞ ＜div id="copy"＞＜/div＞ ＜/body＞

四、創(chuàng)建請(qǐng)求對(duì)象

為了創(chuàng)建請(qǐng)求對(duì) 象，你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個(gè)對(duì)象之間的主要區(qū)別在于使用 它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對(duì)象; 而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest對(duì)象。另外一個(gè)區(qū)別是你創(chuàng)建對(duì)象的方式：Opera，Mozilla， Netscape和Safari允許你簡(jiǎn)單地調(diào)用該對(duì)象的構(gòu)造器，但是Windows IE需要把對(duì)象的名字傳遞到ActiveX 構(gòu)造器中。下面是怎樣創(chuàng)建代碼來決定要使用哪個(gè)對(duì)象和怎樣創(chuàng)建它的示例：

if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("MSXML2.XMLHTTP"); }

五、發(fā)出請(qǐng)求

現(xiàn)在既然你已經(jīng)創(chuàng)建了你的請(qǐng)求對(duì)象，那么你已經(jīng)為向服務(wù)器發(fā) 出請(qǐng)求作了準(zhǔn)備。創(chuàng)建一個(gè)到事件處理器的參考以聽取onreadystatechange事件。然后，該事件處理器 方法將在狀態(tài)發(fā)生變化時(shí)作出響應(yīng)。一旦我們完成請(qǐng)求，我們就開始創(chuàng)建這個(gè)方法。打開連接以GET或 POST一個(gè)定制的URL-在此是一個(gè)content.xml，并且設(shè)置一個(gè)布爾定義-是否你想要進(jìn)行異步調(diào)用。

現(xiàn)在到了發(fā)出請(qǐng)求的時(shí)間了。在這個(gè)示例中，我使用了null，因?yàn)槲覀兪褂玫氖荊ET; 為了使用 POST，你需要使用下面這個(gè)方法發(fā)出一個(gè)查詢串：

request.onreadystatechange = onResponse; request.open("GET". url, true); request.send (null);

六、定制加載和錯(cuò)誤處理消息

你為onreadystatechange方法創(chuàng)建的事件處理器 正是集中進(jìn)行加載和處理錯(cuò)誤的場(chǎng)所。現(xiàn)在到了考慮用戶并針對(duì)他們與之交互的內(nèi)容的狀態(tài)提供反饋的 時(shí)候了。在這個(gè)實(shí)例中，我針對(duì)所有的裝載狀態(tài)代碼提供反饋，并且也對(duì)最經(jīng)常發(fā)生的錯(cuò)誤處理狀態(tài)代 碼提供一些基本的反饋。為了顯示請(qǐng)求對(duì)象的當(dāng)前狀態(tài)，readyState屬性包括顯示在下表中的一些值。

值 描述

0 未初始化，對(duì)象沒有用數(shù)據(jù)進(jìn)行初始化。

1 裝載中，對(duì)象正在裝載它 的數(shù)據(jù)。

2 裝載結(jié)束，對(duì)象完成了它的數(shù)據(jù)的裝載。

3 可交互，用戶能與對(duì)象交互了， 盡管它還沒有裝載結(jié)束。

4 完成，對(duì)象已經(jīng)完全被初始化。

W3C中有很長(zhǎng)的一串有關(guān)HTTP 狀態(tài)代碼的定義。我選擇了兩個(gè)狀態(tài)代碼:

200:請(qǐng)求成功了。

404:服務(wù)器沒有找到與所 請(qǐng)求的文件相匹配的任何東西。

最后，我檢查任何另外的狀況代碼-它們將生成一個(gè)錯(cuò)誤并提供 一個(gè)一般錯(cuò)誤信息。下面是一個(gè)代碼示例-你可以用之來處理這些情況。注意，我在定位我們前面在HTML 文件的主體中創(chuàng)建的div ID并且對(duì)它應(yīng)用裝載和/或錯(cuò)誤信息-通過innerHTML方法-這個(gè)方法用于設(shè)置在 div對(duì)象的開始和結(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) { // 添加一個(gè)定制消息或把用戶重定 向到另外一個(gè)頁面 document.getElementById('copy').innerHTML = "File not found"; } else {document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; } }

當(dāng)狀況代碼為200 時(shí)，這意味著請(qǐng)求成功。下面開始進(jìn)行響應(yīng)了。

七、分析響應(yīng)

當(dāng)你準(zhǔn)備好分析來自請(qǐng)求 對(duì)象的響應(yīng)時(shí)，真正的工作開始了。現(xiàn)在你可以用你請(qǐng)求的數(shù)據(jù)開始工作。僅為測(cè)試目的，在開發(fā)期間 ，可以使用responseText和responseXML屬性來顯示來自響應(yīng)的原始數(shù)據(jù)。為了存取XML響應(yīng)中的結(jié)點(diǎn)， 首先使用你創(chuàng)建的請(qǐng)求對(duì)象，定位到responseXML屬性以檢索(你可能已經(jīng)猜測(cè)出來)來自響應(yīng)的XML。定 位到documentElement-它檢索一個(gè)到XML響應(yīng)的根結(jié)點(diǎn)的參考。

var response = request.responseXML.documentElement;

現(xiàn)在既然你有了到響應(yīng)的根結(jié)點(diǎn)的參考，那么你可以使 用getElementsByTagName()以結(jié)點(diǎn)名字來檢索childNodes。下面一行用一個(gè)頭部的nodeName來定位一個(gè) 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ǔ)知識(shí)，那么下一步就是決定是否在一工程使用它。須記住的最重要的事情是，在你還沒有刷 新頁面時(shí)你無法使用"Back"按鈕。為此，可以先專注于你的工程中的一小部分-它能夠從使用 這種類型的交互中受益。例如，你可以創(chuàng)建一個(gè)表單-它在用戶每次輸入一個(gè)輸入字段或一個(gè)字母時(shí)查詢 一個(gè)腳本以便進(jìn)行實(shí)時(shí)校驗(yàn)。你可以創(chuàng)建一個(gè)拖放頁面-在釋放一項(xiàng)時(shí)，它能夠把數(shù)據(jù)發(fā)送到一個(gè)腳本中 并把該頁面的狀態(tài)保存到一個(gè)數(shù)據(jù)庫中。使用AJAX的理由毫無疑問是存在的; 并且這種使用無論對(duì)開發(fā) 者還是用戶都會(huì)帶來益處; 這全依賴于具體的條件和執(zhí)行情況。

還有其它方法可用來解決 "Back"按鈕的問題，例如使用Google Gmail-它現(xiàn)在能夠?yàn)槟愕牟僮魈峁┮环N撤消功能而不刷 新該頁面。以后還會(huì)出現(xiàn)許多更具創(chuàng)造性的例子-它們將通過提供給開發(fā)者創(chuàng)建獨(dú)特實(shí)時(shí)的體驗(yàn)的手段給 用戶帶來更大的好處。

九、結(jié)論

盡管AJAX允許我們構(gòu)建新的和改進(jìn)的方式來與一個(gè)WEB頁 面進(jìn)行交互; 但是作為開發(fā)者，我們需要牢記產(chǎn)品是不考慮技術(shù)的; 它關(guān)心的是用戶以及其如何與用戶 進(jìn)行交互。沒有了用戶群，我們構(gòu)建的工程毫無用處。基于這個(gè)標(biāo)準(zhǔn)，我們就能評(píng)估應(yīng)該使用什么技術(shù) 以及何時(shí)使用它們來創(chuàng)建對(duì)相應(yīng)用戶有用的應(yīng)用。