JavaScript學習總結（七）Ajax和HTTP狀態字

trigkit4發表於2016-09-16
JavaScriptHTTP

Ajax及其工作原理

AJAX 是一種與伺服器交換資料無需重新整理網頁的技術，最早由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物件

XMLHttpRequest這個物件的屬性：

它的屬性有：

onreadystatechange  每次狀態改變所觸發事件的事件處理程式。

responseText     從伺服器程式返回資料的字串形式。
responseXML    從伺服器程式返回的DOM相容的文件資料物件。

status           從伺服器返回的數字程式碼，比如常見的404（未找到）和200（已就緒）

status Text       伴隨狀態碼的字串資訊

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

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

HTTP狀態碼

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

另附：http狀態碼詳解
w3cschool HTTP 狀態訊息：http://www.w3school.com.cn/tags/html_ref_httpmessages.asp

status和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>

jQuery中的Ajax

.load()方法是區域性方法，因為他需要一個包含元素的jQuery物件作為字首，而$.get()和$.post()是全域性方法，無需指定某個元素，對於用途而言，.load()適合做靜態檔案的非同步獲取，而對於需要傳遞引數到伺服器頁面的，$.get()和$.post()更加合適。

GET和POST傳入的data是一個鍵值對 物件，不同的是GET傳入的data是通過位址列傳輸的，而POST是通過表單提交的，

$(function () {
    $("input").click(function () {
        $.get('test.php?url=baidu.com', function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});

POST提交不能使用url傳參。post提交可以使用字串形式的鍵值對形式傳參，自動轉換為http訊息實體傳參

$(function () {
    $("input").click(function () {
        $.post('test.php','url=baidu.com', function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});
//post提交可以使用物件鍵值對

$(function () {
    $("input").click(function () {
        $.post('test.php',{
                url:'baidu.com'//post提交可以使用物件鍵值對
            }, function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});

$.get()方法有四個引數，前面三個引數和.load()一樣，多了一個第四引數type，即伺服器返回的內容格式，包括xml,json,script,html,text等，第一個引數為必選引數，後面三個為可選引數

$.ajax()是所有Ajax方法中最底層的方法，所有其他方法都是基於$.ajax()方法的封裝，這個方法只有一個引數，傳遞一個
各個功能鍵值對的物件。

$.ajax()方法物件引數列表

引數 型別 說明
url string 傳送請求的地址
type string 請求方法，預設GET
timeout Number 設定請求超時的時間
data Object或String 傳送到伺服器的物件，鍵值對字串或物件
datatype String 返回的資料型別，比如html，XML，json等
success Function 請求成功後呼叫的回撥函式
complete Function 請求完成後呼叫的回撥函式
error Function 請求失敗後呼叫的回撥函式 
$(function () {
    $("input").click(function () {
        $.ajax({
            type : "POST",
            url: 'test.php',
            data:{
                url: 'baidu.com'
            },
            success : function(response,status,xhr){
                $('#box').html(response);
            }
        })
    })
});

表單序列化

Ajax用的最多的地方莫過於表單操作，而傳統的表單操作是通過submit提交將資料傳輸到伺服器，如果使用Ajax非同步處理
的話，我們需要將每個表單元素獲取才能提交，這樣工作效率就大大降低

<body>
<form action="">
    使用者名稱: <input type="text" name="user" />
    郵件: <input type="text" name="email" />
    <input type="button" value="提交"/>
</form>
<div id="box"></div>
<script type="text/javascript">
    $(function () {
        $("form input[type=button]").click(function () {
            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: {
                    user: $('form input[name=user]').val(),
                    email: $("form input[name=email]").val(),
                },
                success: function(response){
                    $("#box").html(response);
                }
            })
        })
    });
</script>
</body>

表單元素特別多的情況下應採用表單序列化，即data:$(“form”).serialize();//得到的是字串鍵值對，並且對url進行編碼

serialize()方法不但可以序列化表單內的元素，還可以直接獲取單選框，核取方塊和下拉選單框等內容

<body>
<form action="">
    使用者名稱: <input type="text" name="user" />
    郵件: <input type="text" name="email" />
    <input type="button" value="提交"/>
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女"/>女
    <input type="button" value="submit"/>
</form>
<div id="box"></div>
<script>
    $(function () {
        $("form input[name=sex]").click(function () {
            $('#box').html(decodeURIComponent($(this).serialize()));
        })
    })
</script>
</body>

傳統Ajax問題

傳統的ajax有如下的問題：

1、可以無重新整理改變頁面內容，但無法改變頁面URL

2、為了更好的可訪問性，內容發生改變後，通常改變URL的hash

3、hash的方式不能很好的處理瀏覽器的前進、後退等問題

4、進而瀏覽器引入了onhashchange的介面，不支援的瀏覽器只能定時去判斷hash是否改變

5、但這種方式對搜尋引擎很不友好

6、twitter和google約定了使用#!xxx（即hash第一個字元為!），搜尋引擎進行支援。

JavaScript學習系列文章目錄

相關文章