AJAX學習筆記

 

AJAX

異步的JavaScript和XML
實現網頁異步請求刷新，不用刷新整個網頁。
是一種用於建立快速動態網頁的技術。

XMLHttpRequest對象

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

全部的現代瀏覽器都支持XMLHttpRequest對象，如Chrome、Firefox、Opera、Safari等。

//建立XMLHttpRequest對象
    var variable = new XMLHttpRequest();

對於IE8以前的IE瀏覽器，則使用ActiveX對象。

//建立ActiveX對象
    var variable = new ActiveXObject("Microsoft.XMLHttp");

爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，應先檢查瀏覽器是否支持 XMLHttpRequest 對象。若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject ：

var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
    }

向服務器發送請求

使用 XMLHttpRequest 對象的 open() 和 send() 方法向服務器發送請求。

xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。 string：僅用於 POST 請求

在如下狀況中，建議使用 POST 請求：
- 沒法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

在發送POST請求時，能夠經過setRequestHeader()設置請求頭的值：

方法	描述
setRequestHeader(header,value)	向請求添加 HTTP 頭。header: 規定頭的名稱；value: 規定頭的值

獲取響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲取字符串形式的響應數據
responseXML	獲取XML形式的響應數據

onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。

XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當readyState屬性改變時就會調用該函數。
readystate	存儲XMLHttpRequest的狀態。從0~4變化。0:請求未初始化;1:服務器鏈接已創建;2:請求已接收;3:請求處理中;4:請求已完成，且響應已就緒。
status	200:」OK」 404:未找到頁面