ajax介紹 ajax即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術,它並不是一門新的語言。 通過在後臺與伺服器進行少量數據交換,ajax可以使網頁實現非同步更新。 這意味著可以在不重新載入整個網頁的情 ...
ajax介紹
ajax即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術,它並不是一門新的語言。
通過在後臺與伺服器進行少量數據交換,ajax可以使網頁實現非同步更新。
這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。而傳統的網頁如果需要更新內容,必需重載整個網頁面。
ajax技術體系
XHTML和CSS
使用文檔對象模型(Document Object Model)作動態顯示和交互
使用XML和XSLT做數據交互和操作
使用XMLHttpRequest進行非同步數據接收
ajax的工作流程
關於XmlHttpRequest對象
屬性:
readyState
0: 請求未初始化
1: 伺服器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
State
200: "OK"
404: 未找到頁面
responseText
獲得字元串形式的響應數據。
responseXML
獲得 XML 形式的響應數據。
onreadystatechange
存儲函數(或函數名),每當 readyState 屬性改變時,就會調用該函數。
方法:
xmlHttpRequst對象利用send()和open()方法與伺服器進行交互。
open(method,url,async)
method:請求的類型;GET 或 POST
url:文件在伺服器上的位置
async:true(非同步)或 false(同步)
send(string)
string:僅用於 POST 請求
如果是post請求,必須使用 setRequestHeader() 來添加 HTTP 頭。然後在send() 方法中設置發送的數據,例如:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
ajax的使用步驟
1、創建XMLHttpRequest對象
不同的瀏覽器使用的非同步調用對象也有所不同,在IE瀏覽器中非同步調用使用的是XMLHTTP組件中的XMLHttpRequest對象,而在Netscape、Firefox瀏覽器中則直接使用XMLHttpRequest組件。因此,在不同瀏覽器中創建XMLHttpRequest對象的方式都有所不同。
在IE瀏覽器中創建XMLHttpRequest對象的方式如下所示:
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
在Netscape瀏覽器中創建XMLHttpRequest對象的方式如下所示:
var xmlHttpRequest = new XMLHttpRequest();
2、創建HTTP請求
創建了XMLHttpRequest對象之後,必須為XMLHttpRequest對象創建HTTP請求,用於說明XMLHttpRequest對象要從哪裡獲取數據.通常可以是網站中的數據,也可以是本地中其他文件中的數據.
創建HTTP請求可以使用XMLHttpRequest對象的open()方法,其語法代碼如下所示:
XMLHttpRequest.open(method,URL,flag,name,password)
代碼中的參數解釋如下所示:
method:該參數用於指定HTTP的請求方法,一共有get、post、head、put、delete五種方法,常用的方法為get和post。
URL:該參數用於指定HTTP請求的URL地址,可以是絕對URL,也可以是相對URL。
flag:該參數為可選參數,參數值為布爾型。該參數用於指定是否使用非同步方式。true表示非同步方式、false表示同步方式,預設為true。
name:該參數為可選參數,用於輸入用戶名。如果伺服器需要驗證,則必須使用該參數。
password:該參數為可選參數,用於輸入密碼。如果伺服器需要驗證,則必須使用該參數。通常可以使用以下代碼來訪問一個網站文件的內容。
3、設置響應HTTP請求狀態變化的函數
創建完HTTP請求之後,應該就可以將HTTP請求發送給Web伺服器了。然而,發送HTTP請求的目的是為了接收從伺服器中返回的數據。從創建XMLHttpRequest對象開始,到發送數據、接收數據、XMLHttpRequest對象一共會經歷以下5中狀態。
⑴未初始化狀態。在創建完XMLHttpRequest對象時,該對象處於未初始化狀態,此時XMLHttpRequest對象的readyState屬性值為0。
⑵初始化狀態。在創建完XMLHttpRequest對象後使用open()方法創建了HTTP請求時,該對象處於初始化狀態。此時XMLHttpRequest對象的readyState屬性值為1。
⑶發送數據狀態。在初始化XMLHttpRequest對象後,使用send()方法發送數據時,該對象處於發送數據狀態,此時XMLHttpRequest對象的readyState屬性值為2。
⑷接收數據狀態。Web伺服器接收完數據併進行處理完畢之後,向客戶端傳送返回的結果。此時,XMLHttpRequest對象處於接收數據狀態,XMLHttpRequest對象的readyState屬性值為3。
⑸完成狀態。XMLHttpRequest對象接收數據完畢後,進入完成狀態,此時XMLHttpRequest對象的readyState屬性值為4。此時接收完畢後的數據存入在客戶端電腦的記憶體中,可以使用responseText屬性或responseXml屬性來獲取數據。
只有在XMLHttpRequest對象完成了以上5個步驟之後,才可以獲取從伺服器端返回的數據。因此,如果要獲得從伺服器端返回的數據,就必須要先判斷XMLHttpRequest對象的狀態。
XMLHttpRequest對象可以響應readystatechange事件,該事件在XMLHttpRequest對象狀態改變時(也就是readyState屬性值改變時)激發。因此,可以通過該事件調用一個函數,併在該函數中判斷XMLHttpRequest對象的readyState屬性值。如果readyState屬性值為4則使用responseText屬性或responseXml屬性來獲取數據。
4、設置獲取伺服器返回數據的語句
如果XMLHttpRequest對象的readyState屬性值等於4,表示非同步調用過程完畢,就可以通過XMLHttpRequest對象的responseText屬性或responseXml屬性來獲取數據。
但是,非同步調用過程完畢,並不代表非同步調用成功了,如果要判斷非同步調用是否成功,還要判斷XMLHttpRequest對象的status屬性值,只有該屬性值為200,才表示非同步調用成功,因此,要獲取伺服器返回數據的語句,還必須要先判斷XMLHttpRequest對象的status屬性值是否等於200
5、發送HTTP請求
在經過以上幾個步驟的設置之後,就可以將HTTP請求發送到Web伺服器上去了。發送HTTP請求可以使用XMLHttpRequest對象的send()方法,其語法代碼如下所示:
XMLHttpRequest.send(data)
其中data是個可選參數,如果請求的數據不需要參數,即可以使用null來替代。data參數的格式與在URL中傳遞參數的格式類似。
(註意:只有在使用send()方法之後,XMLHttpRequest對象的readyState屬性值才會開始改變,也才會激發readystatechange事件,並調用函數)
6、局部更新
在通過Ajax的非同步調用獲得伺服器端數據之後,可以使用JavaScript或DOM來將網頁中的數據進行局部更新。常用的局部更新的方式有以下3種:
1,表單對象的數據更新;
2,IE瀏覽器中標簽間文本的更新;
3,DOM技術的局部刷新