Ajax基礎

morra發表於2016-12-30

1 概要

非同步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js來收發來自web伺服器的資料，且無需過載整個頁面的技術。

注 ：xml是瀏覽器和伺服器彼此通訊的格式。

2 XMLHttpRequest 物件

XMLHttpRequest 是瀏覽器的內建物件

2.1 基礎

2.1.1 建立 XMLHttpRequest 物件
//可用於連線、請求和接受伺服器中的資料
var request = new XMLHttpRequest();
2.1.2 XMLHttpRequest 物件主要方法

初始化XMLHttpRequest 物件

request.open("GET",url,async);
//引數一:表示請求型別的字串，"GET"/"POST"
//引數二:請求目標的url
//引數三:表示是否以非同步模式發出，true為非同步(預設值，常用)，false為同步

傳送請求

request.send(null);
//send()方法必須接受一個引數，表示要傳送的資料，也可以是null

用於設定請求頭

setRequestHeader(header,value)   
# header:請求頭的key
# value:請求頭的value

獲取所有響應頭

getAllResponseHeaders()
#返回值：所有響應頭資料

獲取響應頭指定的header的值

getResponseHeader(header)
#header：響應頭的key（字串型別）
#返回值：響應頭中指定的header對應的值

終止請求

abort()
2.1.3 XMLHttpRequest 物件主要屬性
Number : readyState      每個值表示生存期中的特定狀態。eg：0，1，2，3，4
Function : onreadystatechange         當readyState的值改變時自動觸發執行其對應的函式（回撥函式）
String : responseText         伺服器返回的資料（字串型別）
XmlDocument : responseXML        伺服器返回的資料（xml物件）
Number : status         狀態嗎 eg：200，400
String : statusText        狀態文字（字串） eg：OK，NotFound
2.1.4 get/post請求簡單實現
<script>
    function SubmitForm() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/login", true);
        xhr.onreadystatechange = func;
        xhr.send()
        function func() {
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }
    }
</script>
<script>
    function SubmitForm() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/login", true);
        xhr.onreadystatechange = func;
        //在使用post提交資料時要設定請求頭
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send()
        function func() {
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }
    }
</script>

2.2 同步請求

以同步模式發出的請求會暫停所有js程式碼的執行，直到從伺服器獲得響應為止。其應用程式碼比較簡潔：

var request =new XMLHttpRequest();
request.open("GET","",false);
request.send(null);

var status =request.status;
//XMLHttpRequest的status屬性，包含與伺服器響應一起傳送的http狀態碼

if(status ==200){
    alert("The text file was found");
}else {
    alert("code:"+status);
}

2.3 非同步請求

大多數情況下都使用非同步請求，它允許 XMLHttpRequest 物件等待伺服器的響應的同時，瀏覽器繼續執行js程式碼。

在非同步請求中， XMLHttpRequest 物件提供了 readyState 屬性，該屬性包含一個數值，每個數值都表示請求生存期中的特定狀態：

數值 註釋
0 已建立物件，但未呼叫open()方法
1 已呼叫open()方法，但未傳送請求
2 已傳送請求，標題和狀態已接收並可用
3 接收到來自伺服器的響應
4 接收完請求資料

當 readyState 發生變化的時候，都會觸發onreadystatechange事件

var request =new XMLHttpRequest();

function reqReadyStateChange() {
    if(request.readyState == 4){    //瀏覽器知道伺服器已經收到自己的請求
        
        var status =request.status;
        if(status == 200){
            alert(request.responseText);  //返回文字的資料
        }else {1720
            alert("code:"+status);
        }
    }
    
request.open("GET",url);
request.onreadystatechange = reqReadyStateChange;
request.send(null);
}

3 自定義HttpRequest模組

建立HttpRequest模組

//定義一個 HttpRequest 引用型別（類）
function HttpRequest(url, callback) {
    this.request = new XMLHttpRequest();
    this.request.open("GET", url);

    var tempRequest = this.request;  
    //this指向的是XMLHttpRequest物件，而不是reqReadyStateChange函式
    
    function reqReadyStateChange() {
        //在函式中又定義了一個函式
        if (tempRequest.readyState == 4) {
            if (tempRequest.status == 200) {
                callback(tempRequest.responseText);
            } else {
                alert("An error occurred trying to contact the server.");
            }
        }
    }
    
    this.request.onreadystatechange = reqReadyStateChange;
}

HttpRequest.prototype.send = function () {   //重構一個不需要引數的send()方法
    this.request.send(null);
};

使用以上自定義的模組

//建立一個函式用於顯示接收到的資料
function handleData(text){
    alert(text);
}

var request = new HttpRequest("http://localhost:63342/123.txt",handleData);
request.send();

相關文章