首頁 > 開發者 > Ajax

javascript學習筆記（七）Ajax和Http狀態代碼_基礎知識

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax及其工作原理

AJAX 是一種與伺服器交換資料無需重新整理網頁的技術，最早由Google公司在Google地圖裡使用，並迅速風靡。

AJAX是不能跨域的，如需跨域，可以使用document.domain='a.com'；或者使用伺服器代理，代理XMLHttpRequest檔案

AJAX是基於現有的Internet標準，並且聯合使用它們：

XMLHttpRequest 對象 (非同步與伺服器交換資料)
JavaScript/DOM (資訊顯示/互動)
CSS (給資料定義樣式)
XML (作為轉換資料的格式)

建立 XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

建立Ajax對象：

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

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
串連伺服器

oAjax.open(方法,url,是否非同步)
我們都知道，Ajax即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。所以，Ajax天生就是工作在非同步模式的（非同步為true，同步false）

同步和非同步

同步是指：發送方發出資料後，等接收方發迴響應以後才發下一個資料包的通訊方式。
非同步是指：發送方發出資料後，不等接收方發迴響應，接著發送下個資料包的通訊方式。
（簡單點說：同步就是只能一件一件事的來做，而非同步就是可以多件事同時進行）

發送請求send()

複製代碼 代碼如下:

<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()">請求資料</button>
</body>

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用快取檔案（補救伺服器上的檔案或資料庫）
向伺服器發送大量資料（POST 沒有資料量限制）
發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
接收返回資訊

oAjax.onreadystatechange = function(){   //當請求狀態改變時要調用的事件處理器

    alert(oAjax.readystate);          

}
只要readyState屬性的值發生變化時，便會觸發一次readyStatechange事件。可以利用這個事件來檢測每次狀態變化後readyState的值。通常，我們只對readyState值為4的階段感興趣，因為這時所有資料都已經就緒，不過，必須在調用open()之前指定onreadystatechange事件處理常式才能確保跨瀏覽器安全色性。下面來看一個例子：

複製代碼 代碼如下:

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對象

當XHR對象把一個HTTP請求發送到伺服器的過程中會經曆幾個狀態，直到請求被處理，然後才接收一個回應。readyState就是XHR請求的狀態屬性，它本身有5個屬性值：

0（未初始化）還沒有調用open()方法
1（載入）已調用send()方法，正在發送請求
2(載入完成)send()方法完成，已收到全部響應內容
3(解析)正在解析響應內容
4（完成）響應內容解析完成，可以再用戶端使用了
status

　　 status屬性工作表示從伺服器返回的響應狀態代碼。例如：200表示成功，404表示未找到。

1字頭：訊息。這一類型的狀態代碼，代表請求已被接受，需要繼續處理。
2字頭：成功。這一類型的狀態代碼，代表請求已成功被伺服器接收、理解、並接受。
3字頭：重新導向。這類狀態代碼代表需要用戶端採取進一步的操作才能完成請求。
4字頭：用戶端錯誤。這類狀態代碼代表了用戶端看起來可能發生錯誤，妨礙了伺服器的處理。
5字頭：伺服器錯誤。這類狀態代碼代表了伺服器在處理請求的過程中有錯誤或者異常狀態發生

另附：http狀態代碼詳解

statusText

　　statusText是響應返回的文本資訊，僅當readyState值為3或4的時候才能使用。當readyState為其它值時視圖存取statusText屬性將引發異常。

XHR的方法

方法 描述
abort() 導致當前正在執行的請求被取消
getAllResponseHeaders() 返回包含所有回應標頭的名稱和值的單個字元|串
getResponseHeader(name) 返迴響應頭中指定的名稱和值
open(method,url,async,username,pwd) 設定HTTP方法（get或post）等
send(content) 發出帶有指定主體內容的請求
setRequestHeader(name,value) 使用指定的名稱和值佈建要求頭

複製代碼 代碼如下:

<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
        //可以通過readystatechange事件監聽
        oAjax = XHR();
        oAjax.onreadystatechange = function () {
            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最後還會再來個1
            //IE下則是1,1,3,4
        };
        oAjax.open("get","index.txt",true);
        oAjax.send(null);
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript ajax php php javascript ajax javascript ajax library javascript php ajax calling php function from javascript using ajax http build query javascript how to use javascript variable in php using ajax
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More