Ajax實(shí)現(xiàn)網(wǎng)頁(yè)異步更新的方法

這篇文章主要講解了“Ajax實(shí)現(xiàn)網(wǎng)頁(yè)異步更新的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Ajax實(shí)現(xiàn)網(wǎng)頁(yè)異步更新的方法”吧！

　　1：ajax的概念

　　全稱：AsynchronousJavascriptAndXml

　　AJAX不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更快更好以及交互性更強(qiáng)的WEB應(yīng)用程序技術(shù)，該技術(shù)在98年前后得到了應(yīng)用。通過AJAX，你的JS可以通過JS的XMLHttpRequest對(duì)象在頁(yè)面不重載的情況下與服務(wù)器直接進(jìn)行通信。這樣可以在服務(wù)器請(qǐng)求到想要的數(shù)據(jù)，而不是整個(gè)頁(yè)面。AJAX的核心就是JS的XMLHttpRequest對(duì)象。xhr對(duì)象是在IE5中首次引入，它是一種支持異步請(qǐng)求的對(duì)象。

　　2：ajax的優(yōu)勢(shì)

　　無(wú)刷新更新數(shù)據(jù)。

　　異步與服務(wù)器通信。

　　基于標(biāo)準(zhǔn)被廣泛支持。

　　前端與后端分離。

　　節(jié)省帶寬。

　　3：編寫步驟

　　1.創(chuàng)建XMLHttpRequest對(duì)象。

　　所有現(xiàn)代瀏覽器(IE7+，chrome，firefox，opera，safari)均內(nèi)建XMLHttpRequest對(duì)象。但是IE5、6使用ActiveXObject對(duì)象。

　　functiongetAjax(){

　　varxmlhttp=null;

　　if(window.ActiveXObject){

　　xmlhttp=newActiveXObject(’Microsoft.XMLHTTP’);

　　}elseif(window.XMLHttpRequest){

　　xmlhttp=newXMLHttpRequest();

　　}

　　returnxmlhttp;

　　}

　　2.打開與Server的連接，指定發(fā)送方式、URL以及權(quán)限等。

　　open方法：創(chuàng)建新的HTTP請(qǐng)求，并指定此請(qǐng)求的方法，URL以及驗(yàn)證信息。

　　xhr.open(type,url,async,user,password);

　　type：HTTP請(qǐng)求方式，GET、POST等。大小寫不敏感。

　　url：請(qǐng)求地址。

　　async：布爾型，請(qǐng)求是否為異步方式。默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。（可選）

　　user：如果服務(wù)器需要驗(yàn)證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，會(huì)彈出驗(yàn)證窗口。（少用僅了解）

　　password：驗(yàn)證信息中的密碼部分，如果用戶名為空，則此值將會(huì)被忽略。（少用僅了解）

　　注：

　　在AJAX中，其實(shí)我們就是來(lái)模擬正常的表單提交數(shù)據(jù)。正常的表單在POST數(shù)據(jù)時(shí)，會(huì)發(fā)送Content-Type字段，所以我們?cè)贏JAX中就要指定該字段值為application/x-www-form-urlencoded。并且對(duì)字段名稱和值進(jìn)行編碼處理在發(fā)送。使用setRequestHeader：?jiǎn)为?dú)指定請(qǐng)求的某個(gè)HTTP頭。

　　注：數(shù)據(jù)應(yīng)使用encocdeURIComponent()函數(shù)進(jìn)行編碼。

　　3.發(fā)送指令。

　　send()：發(fā)送請(qǐng)求到HTTP服務(wù)器并接收回應(yīng)。

　　此方法的同步或異步方式取決于open方法中的async參數(shù)，如果async為true，此方法將立即返回，如果為false，此方法將會(huì)等待請(qǐng)求完成或者超時(shí)時(shí)才會(huì)返回。

　　xhr.send(body);

　　body：通過此請(qǐng)求發(fā)送的數(shù)據(jù)。GET請(qǐng)求設(shè)置為null即可。

　　4.等待并接收服務(wù)器返回的處理結(jié)果。

　　5.客戶端接收。

　　6.釋放XMLHttpRequest對(duì)象。

　　4：回調(diào)函數(shù)

　　通過onreadystatechange屬性指定readystate屬性改變時(shí)的事件處理回調(diào)函數(shù)。

　　xhr.onreadystatechange=function(){}

　　readyState屬性：返回請(qǐng)求的當(dāng)前狀態(tài)。

　　狀態(tài)：

　　0：對(duì)象已建立，尚未初始化（未調(diào)用open方法）。

　　1：對(duì)象已建立，尚未調(diào)用send方法。

　　2：send方法已調(diào)用。但是當(dāng)前的狀態(tài)以及HTTP狀態(tài)未知。

　　3：開始接收數(shù)據(jù)，因?yàn)轫憫?yīng)以及HTTP頭不全，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤。

　　4：數(shù)據(jù)接收完畢，此時(shí)可以通過responseBody和responseText獲取完整的響應(yīng)數(shù)據(jù)。

　　status屬性：返回當(dāng)前請(qǐng)求的狀態(tài)碼。

　　200OK：請(qǐng)求文檔已經(jīng)找到，并正確返回。

　　304NotModified：擁有一個(gè)本地的緩存副本，服務(wù)器端內(nèi)容與此相同。

　　403Forbidden：請(qǐng)求者對(duì)所請(qǐng)求的文檔不具有相應(yīng)的權(quán)限。

　　404NotFound：請(qǐng)求的文檔沒找到。

　　statusText屬性：返回當(dāng)前請(qǐng)求的響應(yīng)行信息。

　　responseXML屬性：將響應(yīng)信息格式化為XMLDocument對(duì)象返回。

　　responseText屬性：將響應(yīng)信息作為字符串返回。

　　5：JS解析JSON

　　JSON簡(jiǎn)介：（js文章中有提到）

　　定義：JavascriptObjectNotation，一種輕量級(jí)的基于文本的數(shù)據(jù)交換格式，易于人閱讀和編寫，也能提高網(wǎng)絡(luò)傳輸速率。

　　ES5新增的兩個(gè)方法：

　　JSON.parse：將JSON字符串?dāng)?shù)據(jù)轉(zhuǎn)換為JSON對(duì)象。

　　JSON.stringify：將JSON對(duì)象轉(zhuǎn)換為JSON字符串。

　　注：1、瀏覽器支持：IE8+。

　　2、JSON格式的字符串里面的key或者字符串型的value都必須用雙引號(hào)包裹。

　　6：局部數(shù)據(jù)刷新

　　操作相應(yīng)的DOM節(jié)點(diǎn)（例如評(píng)論列表的分頁(yè)效果）

　　7：事件委托的應(yīng)用

　　事件委托：利用冒泡機(jī)制，將子元素事件委托給父元素執(zhí)行（例如某些新聞網(wǎng)站有去除部分用戶不喜好的新聞）

　　8：前后端分離

　　后臺(tái)只管數(shù)據(jù)輸出和業(yè)務(wù)邏輯處理，前端負(fù)責(zé)交互邏輯和界面展示。簡(jiǎn)單的說：前端靜態(tài)頁(yè)面中沒有有后臺(tái)程序代碼，后臺(tái)輸出不帶有HTML標(biāo)簽的數(shù)據(jù)。

　　前后端分離靠ajax來(lái)實(shí)現(xiàn)數(shù)據(jù)的交互。

感謝各位的閱讀，以上就是“Ajax實(shí)現(xiàn)網(wǎng)頁(yè)異步更新的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Ajax實(shí)現(xiàn)網(wǎng)頁(yè)異步更新的方法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！