AJAX的基本原理及實(shí)例解析

時(shí)間：2023-05-24 09:27:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-24 09:27:02 來源：網(wǎng)站運(yùn)營(yíng)

AJAX的基本原理及實(shí)例解析：　　什么是Ajax

　　Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

　　Ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。它并不是新的編程語(yǔ)言，而是幾種原有技術(shù)的結(jié)合體。它由以下幾種技術(shù)組合而成，包括：

　　HTML/XHTML——主要的內(nèi)容表示語(yǔ)言。

　　CSS——為XHTML提供文本格式定義。

　　DOM——對(duì)已載入的頁(yè)面進(jìn)行動(dòng)態(tài)更新。

　　XML——數(shù)據(jù)交換格式。

　　XSLT——將XML轉(zhuǎn)換為XHTML(用CSS修飾樣式)。

　　XMLHttp——用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信，是主要的通信代理。

　　JavaScript——用來編寫Ajax引擎的腳本語(yǔ)言。

　　實(shí)際上，在Ajax解決方案中這些技術(shù)都是可用的，不過只有三種是必須的：HTML/XHTML、DOM以及JavaScript。

　　XMLHttpRequest對(duì)象

　　當(dāng)需要異步與服務(wù)器交換數(shù)據(jù)時(shí)，需要XMLHttpRequest對(duì)象來異步交換。XMLHttpRequest對(duì)象的主要屬性有：

　　onreadystatechange——每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

　　responseText——從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。

　　responseXML——從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象。

　　status——從服務(wù)器返回的數(shù)字代碼，如404(未找到)和200(已就緒)。

　　status Text——伴隨狀態(tài)碼的字符串信息。

　　readyState——對(duì)象狀態(tài)值。對(duì)象狀態(tài)值有以下幾個(gè)：

　　0 - (未初始化)還沒有調(diào)用send()方法　　1 - (載入)已調(diào)用send()方法，正在發(fā)送請(qǐng)求　　2 - (載入完成)send()方法執(zhí)行完成　　3 - (交互)正在解析響應(yīng)內(nèi)容　　4 - (完成)響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了　　對(duì)于readyState的狀態(tài)值，其中“0”狀態(tài)是在定義后自動(dòng)具有的狀態(tài)值，而對(duì)于成功訪問的狀態(tài)(得到信息)我們大多數(shù)采用“4”進(jìn)行判斷。

　　Ajax的核心就是是JavaScript對(duì)象XmlHttpRequest，這個(gè)對(duì)象為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口。XmlHttpRequest可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。

　　XHR對(duì)象由IE5率先引入，在IE5中XHR對(duì)象是通過MSXML庫(kù)中一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的，根據(jù)IE版本不同可能會(huì)遇到不同版本XHR對(duì)象，而IE7+與其它現(xiàn)代瀏覽器均支持原生的XHR對(duì)象，在這些瀏覽器中我們只需使用XMLHttpRequest構(gòu)造函數(shù)就可以構(gòu)造XHR對(duì)象，因此一個(gè)瀏覽器兼容的創(chuàng)建XHR對(duì)象的函數(shù)寫法大概是這個(gè)樣子：

　　1 var xmlhttp;　　2 if (window.XMLHttpRequest) {　　3 // code for IE7+, Firefox, Chrome, Opera, Safari　　4 xmlhttp=new XMLHttpRequest();　　5 } else {　　6 // code for IE6, IE5　　7 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");　　8 }　　XMLHttpRequest對(duì)象用法

　　XMLHttpRequest對(duì)象有兩個(gè)重要方法 open與send。




　　1 xmlhttp.open("GET","ajax_info.txt",true);　　2 xmlhttp.send();　　對(duì)于open方法，有幾點(diǎn)需要注意：

　　URL是相對(duì)于當(dāng)前頁(yè)面的路徑，也可以似乎用絕對(duì)路徑。

　　open方法不會(huì)向服務(wù)器發(fā)送真正請(qǐng)求，它相當(dāng)于初始化請(qǐng)求并準(zhǔn)備發(fā)送。

　　只能向同一個(gè)域中使用相同協(xié)議和端口的URL發(fā)送請(qǐng)求，否則會(huì)因?yàn)榘踩驁?bào)錯(cuò)。

　　真正能夠向服務(wù)器發(fā)送請(qǐng)求需要調(diào)用send方法，并僅在POST請(qǐng)求可以傳入?yún)?shù)，不需要?jiǎng)t發(fā)送null，在調(diào)用send方法之后請(qǐng)求被發(fā)往服務(wù)器。

　　請(qǐng)求發(fā)往服務(wù)器，服務(wù)器根據(jù)請(qǐng)求生成響應(yīng)(Response)，傳回給XHR對(duì)象，在收到響應(yīng)后相應(yīng)數(shù)據(jù)會(huì)填充到XHR對(duì)象的屬性，有四個(gè)相關(guān)屬性會(huì)被填充：

　　responseText——從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。　　responseXML——從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象?！　tatus——從服務(wù)器返回的數(shù)字代碼，如404(未找到)和200(已就緒)。　　status Text——伴隨狀態(tài)碼的字符串信息。　　在收到響應(yīng)后第一步是檢查響應(yīng)狀態(tài)，確保響應(yīng)是否成功返回(狀態(tài)為200)。

　　1 xhr.open('get','default.aspx,false'); //準(zhǔn)備同步請(qǐng)求　　2 xhr.send();　　3 if(xhr.status>=200 && xhr.status<300 || xhr.status==304){　　4 //do something　　5 }else{　　6 //error handler　　7 }


　　上面代碼在發(fā)送同步請(qǐng)求的時(shí)候沒問題，只有得到響應(yīng)后才會(huì)執(zhí)行檢查status語(yǔ)句，但是在異步請(qǐng)求時(shí)，JavaScript會(huì)繼續(xù)執(zhí)行，不等生成響應(yīng)就檢查狀態(tài)碼，這樣我們不能保證檢查狀態(tài)碼語(yǔ)句是在得到響應(yīng)后執(zhí)行(實(shí)際上也幾乎不可能，服務(wù)器再快一個(gè)HTTP請(qǐng)求也不會(huì)快過一條JavaScript執(zhí)行數(shù)度)，這時(shí)候我們可以檢查XHR對(duì)象的readyState屬性，該屬性表示請(qǐng)求/響應(yīng)過程中的當(dāng)前活動(dòng)階段，每當(dāng)readyState值改變的時(shí)候都會(huì)觸發(fā)一次onreadystatechange事件。

　　我們可以利用這個(gè)事件檢查每次readyState變化的值，當(dāng)為4的時(shí)候表示所有數(shù)據(jù)準(zhǔn)備就緒，有一點(diǎn)我們需要注意：必須在open方法之前指定onreadtstatechange事件處理程序。

　　1 xmlhttp.onreadystatechange=function(){　　2 if (xmlhttp.readyState==4 && xmlhttp.status==200){　　3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;　　4 }　　5 }　　6 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);　　7 xmlhttp.send();　　GET 還是 POST?

　　與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

　　然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

　　無法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))

　　向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制)

　　發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

　　一個(gè)簡(jiǎn)單的 GET 請(qǐng)求：

　　xmlhttp.open("GET","demo_get.html",true);　　xmlhttp.send();　　在上面的例子中，可能得到的是緩存的結(jié)果。

　　為了避免這種情況，向 URL 添加一個(gè)唯一的 ID：

　　xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);　　xmlhttp.send();　　如果希望通過 GET 方法發(fā)送信息，向 URL 添加信息：

　　xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);　　xmlhttp.send();　　一個(gè)簡(jiǎn)單 POST 請(qǐng)求：

　　xmlhttp.open("POST","demo_post.html",true);　　xmlhttp.send();　　如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請(qǐng)使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

　　xmlhttp.open("POST","ajax_test.html",true);　　xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");　　xmlhttp.send("fname=Henry&lname=Ford");


　　open() 方法的 url 參數(shù)是服務(wù)器上文件的地址：

　　xmlhttp.open("GET","ajax_test.html",true);　　該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務(wù)器腳本文件，比如 .asp 和 .php (在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù))。

　　異步 - True 或 False?

　　XMLHttpRequest 對(duì)象如果要用于 AJAX 的話，其 open() 方法的 async 參數(shù)必須設(shè)置為 true：

　　xmlhttp.open("GET","ajax_test.html",true);　　對(duì)于 web 開發(fā)人員來說，發(fā)送異步請(qǐng)求是一個(gè)巨大的進(jìn)步。很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費(fèi)時(shí)。AJAX 出現(xiàn)之前，這可能會(huì)引起應(yīng)用程序掛起或停止。

　　通過 AJAX，JavaScript 無需等待服務(wù)器的響應(yīng)，而是：

　　在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本

　　當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理

　　當(dāng)使用 async=true 時(shí)，規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：




　　xmlhttp.onreadystatechange=function(){　　if (xmlhttp.readyState==4 && xmlhttp.status==200){　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText;　　}　　}　　xmlhttp.open("GET","ajax_info.txt",true);　　xmlhttp.send();


ajax的一些資料供大家參考

- AJAX的基本原理及實(shí)例解析 -

- AJAX與數(shù)據(jù)庫(kù)進(jìn)行動(dòng)態(tài)通信 -