Python開發【第十六篇】：Ajax請求

Ajax即Asynchronous Javascript And XML；這不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。

Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），XHR為向服務器發送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器取得更多信息，意味着用戶單擊后，可以不必刷新頁面也能取得新數據。也就是說，可以使用XHR 對象取得新數據，然后再通過DOM 將新數據插入到頁面中。這種技術就是無須刷新頁面即可從服務器取得數據，但不一定是XML數據。

XMLHttpRequest對象

使用XMLHttpRequest (XHR)對象可以與服務器交互。可以從URL獲取數據，而無需讓整個的頁面刷新。這使得Web頁面可以只更新頁面的局部，而不影響用戶的操作。

對象方法

XMLHttpRequest()

構造函數初始化一個 XMLHttpRequest 對象。必須在所有其他方法被調用前調用構造函數。

open(method, url, async)

初始化一個請求。調用open()方法並不會真正發送請求，而只是啟動一個請求以備發送；

• method, 要使用的HTTP方法，比如GET，POST，PUT，DELETE等；
• url, 一個要向其發送請求的URL；
• async, 是否異步執行操作，默認為true。

setRequestHeader(header, value)

設置HTTP請求頭部的方法。此方法必須在open()方法和 send()之間調用。如果多次對同一個請求頭賦值，只會生成一個合並了多個值的請求頭。如果沒有設置Accept屬性，則此發送出send()的值為此屬性的默認值*/*。

send(data)

用於發送 HTTP 請求。如果是異步請求（默認為異步請求），則此方法會在請求發送后立即返回；如果是同步請求，則此方法直到響應到達后才會返回。如果請求方法是GET或者HEAD，則應將請求主體設置為null。

abort()

如果請求已被發出，此方法將該請求終止。當一個請求被終止，它的readyState屬性將被置為0。

對象屬性

readyState

返回一個XMLHttpRequest對象當前所處的狀態；

• 0, 代理被創建，但尚未調用open()方法。
• 1, open()方法已經被調用。
• 2, send()方法已經被調用，響應頭和狀態已經可獲得。
• 3, 響應體部分正在被接收，responseText屬性已經包含部分數據。
• 4, 請求操作已經完成。

onreadystatechange

會在XMLHttpRequest的readyState屬性發生改變時觸發readystatechange事件的時候被調用。

responseText

返回一個DOMString，它包含對文本的請求的響應，如果請求不成功或尚未發送，則返回null；responseText屬性在請求完成之前將會得到部分屬性。

status

返回了XMLHttpRequest響應中的數字狀態碼。

statusText

返回了XMLHttpRequest請求中的狀態文本信息。

timeout

請求超時時間，單位毫秒。

示例

GET請求

GET是最常見的請求類型，最常用於向服務器查詢某些信息。必要時，可以將查詢字符串參數追加到URL 的末尾，以便將信息發送給服務器。

<script>
    //獲取按鈕節點
    var btn = document.getElementById('submit');
    //按鈕節點添加點擊事件
    btn.onclick = function(){
        //實例化一個XMLHttpRequest對象
        var xhr = new XMLHttpRequest();
        //設置readyState改變后的回調函數
        xhr.onreadystatechange = function(){
            //請求已經完成，並且狀態碼為200
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.status);  //200
                console.log(xhr.statusText);  //OK
                data = JSON.parse(xhr.responseText)  //解析后端返回的JSON數據
                console.log(data);  //{user: "root", city: "beijing", job: "teacher"}
            }
        };
        //初始化一個GET請求
        xhr.open('GET', '/app/ajax2.html?user=root&pwd=123');
        //設置請求頭信息
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //設置請求超時時間
        xhr.timeout = 300;
        //發送請求
        xhr.send(null);
    };
</script>

基於django的后端代碼

# url為/ajax2.html的views
from django.http import HttpResponse
import json

def ajax2(req):
    # 獲取前端請求的信息
    user = req.GET.get('user')
    # 需要返回給前端的數據
    data = {'user': user, 'city': 'beijing', 'job': 'teacher'}
    # 序列化為JSON格式數據
    return HttpResponse(json.dumps(data))

POST請求

POST請求，通常用於向服務器發送應該被保存的數據。POST請求把數據作為請求的主體提交。POST請求的主體可以包含非常多的數據，而且格式不限。

<input type="button" value="submit" id="submit">
<script>
    //獲取按鈕節點
    var btn = document.getElementById('submit');
    //按鈕節點添加點擊事件
    btn.onclick = function(){
        //實例化一個XMLHttpRequest對象
        var xhr = new XMLHttpRequest();
        //設置readyState改變后的回調函數
        xhr.onreadystatechange = function(){
            //請求已經完成，並且狀態碼為200
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.status);  //200
                console.log(xhr.statusText);  //OK
                var data = JSON.parse(xhr.responseText);  //解析后端返回的JSON數據
                console.log(data);  //{user: "root", city: "beijing", job: "teacher"}
            }
        };
        //初始化一個POST請求
        xhr.open('POST', '/app/ajax2.html');
        //設置請求頭信息
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //設置請求超時時間
        xhr.timeout = 300;
        //發送請求數據
        xhr.send("user=root;pwd=123;");
    };
</script>

基於django的后端代碼

# url為/ajax2.html的views
from django.http import HttpResponse
import json

def ajax2(req):
    # 獲取前端POST請求的信息
    user = req.POST.get('user')
    # 需要返回給前端的數據
    data = {'user': user, 'city': 'beijing', 'job': 'teacher'}
    # 序列化為JSON格式數據
    return HttpResponse(json.dumps(data))

跨域請求

默認情況下，XHR對象只能訪問與包含它的頁面位於同一個域中的資源，這種安全策略可以預防某些惡意行為。

實現合理的跨域請求對開發某些瀏覽器應用程序也是至關重要的。

JSONP

JSONP(JSON with padding)，是應用JSON 的一種新方法，JSONP看起來與JSON差不多，只不過是被包含在函數調用中的JSON。JSONP由兩部分組成：回調函數和數據。回調函數是當響應到來時在前端頁面中調用的函數。回調函數的名字一般是在請求中指定的，傳遞給后端。而數據就是后端傳入回調函數中的JSON數據。

JSONP是通過動態<script>元素來使用的，使用時可以為src屬性指定一個跨域URL。因為JSONP是有效的JavaScript代碼，所以在請求完成后，即在JSONP響應加載到頁面中以后，就會立即執行。

<script>
    function handleResponse(data){
        console.log("user:"+data.user); console.log("city:"+data.city); console.log("job:"+data.job); } </script> <!-- 添加script標簽，src指定請求跨域URL，callback指定回調函數名，callback也是自定義的，后端用它來獲取回調函數名 --> <script src="/app/ajax2.html?callback=handleResponse"></script>

后端處理請求時，只需獲取前端的回調函數名，然后與數據一起返回給前端

#view.py
def ajax2(request):
    #獲取前端定義的函數名
    func = request.GET.get('callback', 'handleResponse') #需要返回給前端的數據 data = {'user': 'admin', 'city': 'beijing', 'job': 'teacher'} #向前端返回數據，回調函數+數據 return HttpResponse('%s(%s)' % (func,data))