快捷導(dǎo)航

javascript學(xué)習(xí)筆記（七）Ajax和Http狀態(tài)碼

更新時(shí)間：2014年10月08日 10:33:56 投稿：hebedich

這篇文章主要介紹了javascript中Ajax和Http狀態(tài)碼，非常的簡(jiǎn)單實(shí)用，有需要的朋友可以參考下

Ajax及其工作原理

AJAX 是一種與服務(wù)器交換數(shù)據(jù)無(wú)需刷新網(wǎng)頁(yè)的技術(shù)，最早由Google公司在谷歌地圖里使用，并迅速風(fēng)靡。

AJAX是不能跨域的，如需跨域，可以使用document.domain='a.com'；或者使用服務(wù)器代理，代理XMLHttpRequest文件

AJAX是基于現(xiàn)有的Internet標(biāo)準(zhǔn)，并且聯(lián)合使用它們：

XMLHttpRequest 對(duì)象 (異步的與服務(wù)器交換數(shù)據(jù))
JavaScript/DOM (信息顯示/交互)
CSS (給數(shù)據(jù)定義樣式)
XML (作為轉(zhuǎn)換數(shù)據(jù)的格式)

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

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象。

創(chuàng)建Ajax對(duì)象：

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
連接服務(wù)器

oAjax.open(方法,url,是否異步)
我們都知道，Ajax即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。所以，Ajax天生就是工作在異步模式的（異步為true，同步false）

同步和異步

同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。
異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式。
（簡(jiǎn)單點(diǎn)說(shuō)：同步就是只能一件一件事的來(lái)做，而異步就是可以多件事同時(shí)進(jìn)行）

發(fā)送請(qǐng)求send()

復(fù)制代碼代碼如下:

<script type="text/javascript">

function getDoc(){

    var xmlhttp;

    if(window.xmlhttpRequest){

        xmlhttp=new XMLHttpRequest();

    }

    else{

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6

    }

    xmlhttp.onreadystatechange = function(){

        if(xmlhttp.readyState==4&&xmlhttp.status==200){

            document.getElementById("￼myId").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("￼GET", index.php,true);

    xmlhttp.send();

}

</script>

</head>

<body>

    <button type="button" onclick="getDoc()">請(qǐng)求數(shù)據(jù)</button>

</body>

GET 還是 POST？

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

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

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
接收返回信息

oAjax.onreadystatechange = function(){ //當(dāng)請(qǐng)求狀態(tài)改變時(shí)要調(diào)用的事件處理器

alert(oAjax.readystate);

}
只要readyState屬性的值發(fā)生變化時(shí)，便會(huì)觸發(fā)一次readyStatechange事件?？梢岳眠@個(gè)事件來(lái)檢測(cè)每次狀態(tài)變化后readyState的值。通常，我們只對(duì)readyState值為4的階段感興趣，因?yàn)檫@時(shí)所有數(shù)據(jù)都已經(jīng)就緒，不過(guò)，必須在調(diào)用open()之前指定onreadystatechange事件處理程序才能確?？鐬g覽器兼容性。下面來(lái)看一個(gè)例子：

復(fù)制代碼代碼如下:

var xhr = createXHR();

xhr.onreadystatechange = function () {

    if (xhr.readyState == 4) {

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

            alert(xhr.statusText);

        } else {

            alert("Request was unsuccessful: " + xhr.status);

        }

    }

};

xhr.open("get", "example.txt", true);

xhr.send(null);

XHR對(duì)象

當(dāng)XHR對(duì)象把一個(gè)HTTP請(qǐng)求發(fā)送到服務(wù)器的過(guò)程中會(huì)經(jīng)歷幾個(gè)狀態(tài)，直到請(qǐng)求被處理，然后才接收一個(gè)回應(yīng)。readyState就是XHR請(qǐng)求的狀態(tài)屬性，它本身有5個(gè)屬性值：

0（未初始化）還沒(méi)有調(diào)用open()方法
1（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2(載入完成)send()方法完成，已收到全部響應(yīng)內(nèi)容
3(解析)正在解析響應(yīng)內(nèi)容
4（完成）響應(yīng)內(nèi)容解析完成，可以再客戶端使用了
status

　　 status屬性表示從服務(wù)器返回的響應(yīng)狀態(tài)碼。例如：200表示成功，404表示未找到。

1字頭：消息。這一類(lèi)型的狀態(tài)碼，代表請(qǐng)求已被接受，需要繼續(xù)處理。
2字頭：成功。這一類(lèi)型的狀態(tài)碼，代表請(qǐng)求已成功被服務(wù)器接收、理解、并接受。
3字頭：重定向。這類(lèi)狀態(tài)碼代表需要客戶端采取進(jìn)一步的操作才能完成請(qǐng)求。
4字頭：客戶端錯(cuò)誤。這類(lèi)狀態(tài)碼代表了客戶端看起來(lái)可能發(fā)生錯(cuò)誤，妨礙了服務(wù)器的處理。
5字頭：服務(wù)器錯(cuò)誤。這類(lèi)狀態(tài)碼代表了服務(wù)器在處理請(qǐng)求的過(guò)程中有錯(cuò)誤或者異常狀態(tài)發(fā)生

另附：http狀態(tài)碼詳解

statusText

　　statusText是響應(yīng)返回的文本信息，僅當(dāng)readyState值為3或4的時(shí)候才能使用。當(dāng)readyState為其它值時(shí)視圖存取statusText屬性將引發(fā)異常。

XHR的方法

方法	描述
abort()	導(dǎo)致當(dāng)前正在執(zhí)行的請(qǐng)求被取消
getAllResponseHeaders()	返回包含所有響應(yīng)頭的名稱(chēng)和值的單個(gè)字符\|串
getResponseHeader(name)	返回響應(yīng)頭中指定的名稱(chēng)和值
open(method,url,async,username,pwd)	設(shè)置HTTP方法（get或post）等
send(content)	發(fā)出帶有指定主體內(nèi)容的請(qǐng)求
setRequestHeader(name,value)	使用指定的名稱(chēng)和值設(shè)置請(qǐng)求頭

復(fù)制代碼代碼如下:

<script type="text/javascript">

        var oAjax =oAjax();

        alert(oAjax.readyState);//彈出"0"

        oAjax.open("get","index.html",true);

        alert(oAjax.readyState);//彈出"1"

        oAjax.send(null);

        alert(oAjax.readyState);//IE下彈出4,而firefox是2

        //可以通過(guò)readystatechange事件監(jiān)聽(tīng)

        oAjax = XHR();

        oAjax.onreadystatechange = function () {

            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后還會(huì)再來(lái)個(gè)1

            //IE下則是1,1,3,4

        };

        oAjax.open("get","index.txt",true);

        oAjax.send(null);

</script>