Ajax請求匯總（一）

剛開始結束Ajax請求的時候，那真的是迷迷糊糊，昏天暗地，通過學習的深入和翻閱各種資料、求助度娘，總結一下Ajax請求，與大家分享一下，希望能給學習Ajax的同學一些幫助，廢話不多手，直接開始~~~

一、Ajax請求的原理

1.原理:在Ajax請求中，html頁面的中操作將通過Ajax引擎與伺服器端進行通訊，然後將返回的結果提交到客戶端頁面的Ajax引擎，再由Ajax引擎來決定將伺服器端返回數據插入到頁面的指定位置。從而實現無需刷新頁面的http請求。 看圖：

2.Ajax請求的優點

a.當然最大的優點就是，無需刷新就可更新頁面
b.可以把原先伺服器端負擔的工作的轉移客戶端，利用客戶端的閑置資源進行處理，減輕伺服器和帶寬的負擔，節約空間和成本
c.Ajax沒有平台限制。Ajax把伺服器由原先的傳送內容轉變為傳輸數據，而數據格式可以為純文本和XML格式，這兩種格式沒有平台限制。
d.可以調用Xml等外部數據，進一步促進頁面的顯示和數據的分離


3.Ajax使用的技術

a.XMLHttpRequest對象
b.XML
c.JavaScript
d.Css
e.DOM


4.Ajax請求時性能的優化

a.盡量使用局部變數，不要使用全局變數
b.優化for循環
c.盡量少使用eval，每次使用eval都會浪費大量時間
d.將DOM節點附加到文檔上
e.盡量減少使用點「.」號操作符的使用


二、不同方式的Ajax請求

1.原生js的ajax請求

a.初始化XMLHttpRequest對象

/* IE6以上的瀏覽器*/

var http_request = new ActiveXObject("Msxml2.XMLHTTP") 或者： var http_request = new ActiveXObject("Microsoft.XMLHTTP")

/* 非IE瀏覽器（firefox，Opera，Mozilla，Safari）*/
var http_request = new XMLHttpRequest

考慮到瀏覽器的兼容性，需要創建一個跨瀏覽器的XMLHttpRequest對象，如下：


var http_request;
if (window.XMLHttpRequest) { //兼容非IE瀏覽器
http_request = new XMLHttpRequest
} else if (window.ActiveXObject) { //兼容IE6以上的瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
}


b.XMLHttpRequest對象的常用方法

注意：status屬性只能在send方法返回成功時，才能調用
當請求完成之後：


if (http_request.readystate === 4) {
if (http_request.status === 200) {
alert("請求成功")
} else {
alert("請求失敗")
}
}

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！