JavaScrpit中非同步請求Ajax實現

標籤：mic   方法   複雜   text   loaded   開發   parse   with   全域變數   

在前端頁面開發的過程中，經常使用到Ajax請求，非同步提交表單資料，或者非同步重新整理頁面。

一般來說，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的時候，我們只因為需要ajax功能而引入Jquery比較不划算。

所以接下來便用原生JavaScrpit實現一個簡單的Ajax請求，並說明ajax請求中的跨域訪問問題，以及多個ajax請求的資料同步問題。

JavaScript實現Ajax非同步請求簡單的ajax請求實現

Ajax請求的原理是建立一個XMLHttpRequest對象，使用這個對象來進行非同步發送請求，具體實現參考下面代碼：

function ajax(option) {    // 建立一個 XMLHttpRequest 對象    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),        requestData = option.data,        requestUrl = option.url,        requestMethod = option.method;    // 如果是GET請求，需要將option中的參數拼接到URL後面    if (‘POST‘ != requestMethod && requestData) {        var query_string = ‘‘;        // 遍曆option.data對象，構建GET查詢參數        for(var item in requestData) {            query_string += item + ‘=‘ + requestData[item] + ‘&‘;        }        // 注意這兒拼接的時候，需要判斷是否已經有 ?        requestUrl.indexOf(‘?‘) > -1            ? requestUrl = requestUrl + ‘&‘ + query_string            : requestUrl = requestUrl + ‘?‘ + query_string;        // GET 請求參數放在URL中，將requestData置為空白        requestData = null;    }    // ajax 請求成功之後的回呼函數    xhr.onreadystatechange = function () {        // readyState=4表示接受響應完畢        if (xhr.readyState == ("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) {            if (200 == xhr.status) {  // 判斷狀態代碼                var response = xhr.response || xhr.responseText || {};  // 擷取傳回值                // if define success callback, call it, if response is string, convert it to json objcet                console.log(response);                // 可以判斷返回資料類型，對資料進行JSON解析或者XML解析                // option.success && option.success(‘string‘ == typeof response ? JSON.parse(response) : response);            } else {                // if define error callback, call it                option.error && option.error(xhr, xhr.statusText);            }        }    };    // 發送ajax請求    xhr.open(requestMethod, requestUrl, true);    // 請求逾時的回調    xhr.ontimeout = function () {        option.timeout && option.timeout(xhr, xhr.statusText);    };    // 定義逾時時間    xhr.timeout = option.timeout || 0;    // 設定回應標頭部，這兒預設設定為json格式，可以定義為其他格式，修改頭部即可    xhr.setRequestHeader && xhr.setRequestHeader(‘Content-Type‘, ‘application/json;charset=utf-8‘);    xhr.withCredentials = (option.xhrFields || {}).withCredentials;    // 這兒主要用於發送POST請求的資料    xhr.send(requestData);}

上面的代碼中有詳細的注釋，ajax的原理很簡單，總的來說就是使用XMLHttpRequest對象來發送資料。這兒對這個對象進行補充說明。

XMLHttpRequest對象的基本屬性

readyState屬性有五個狀態值：

1. 0：是uninitialized：未初始化。已經建立了XMLHttpRequest對象但是未初始化。
2. 1：是loading：已經開始準備好要發送了。
3. 2：是loaded,：已經發送，但是還沒有收到響應。
4. 3：是interactive：正在接受響應，但是還沒接收完。
5. 4：是completed：接受響應完畢。

responseText：伺服器返回的響應文本。只有當readyState>=3的時候才有值。當readyState=3，返回的響應文本不完整，只有readyState=4，接收到完整的響應文本。 responseXML：響應資訊是xml，可以解析為Dom對象。 status：伺服器的Http狀態代碼，若是200，則表示OK，404，表示為未找到。 statusText：伺服器http狀態代碼的文本。比如OK，Not Found。

XMLHttpRequest對象的基本方法

open（method，url，asyn）：開啟XMLHttpRequest對象。其中method方法有get，post，delete，put。url是請求資源的地址。第三個參數表示是否使用非同步。預設情況是true，因為Ajax的特點就是非同步傳送。若使用同步則false。 send（body）：發送請求Ajax。其中發送的內容可以是需要的參數，若是沒有參數，直接send（null)

使用方法

直接調用上面定義的ajax函數，傳送相應的選項和參數即可。

ajax({    url: ‘/post.php‘,    data: {        name: ‘uusama‘,        desc: ‘smart‘    },    method: ‘GET‘,    success: function(ret) {        console.log(ret);    }});

跨域請求問題

使用ajax請求的時候，一定要注意一個問題：跨域請求。 在沒有使用特殊手段的情況下，跨域請求：請求其他網域名稱和連接埠下的URL資源的時候，會報 Access-Control-Allow-Origin 相關的錯誤。其主要原因是瀏覽器的同源策略限制，瀏覽器規定不能跨域請求資源。

解決辦法

下面簡單的提一下一些解決方案。 在ajax頭部添加允許跨域請求的header，這種方式還需要服務端配合添加允許跨域請求的頭部才可以。下面是PHP添加允許POST請求跨域頭部的PHP樣本：

// 指定允許其他網域名稱訪問  header(‘Access-Control-Allow-Origin:*‘);  // 響應類型  header(‘Access-Control-Allow-Methods:POST‘);  // 回應標頭設定  header(‘Access-Control-Allow-Headers:x-requested-with,content-type‘); 

使用動態scrpit標籤，動態建立一個scrpit標籤並指向請求的地址的方法，也就是JSONP方式，需要在URL後面拼接一個回呼函數，標籤載入成功以後會調用回呼函數。

var url = "http://uusama.com", callbaclName = ‘jsonpCallback‘;script = document.createElement(‘script‘);script.type = ‘text/javascript‘;script.src = url + (url.indexOf(‘?‘) > -1 ? ‘&‘ : ‘?‘) + ‘callback=‘ + callbaclName;document.body.appendChild(script);

回呼函數需要設定為全域函數：

window[‘jsonpCallback‘] = function jsonpCallback(ret) {}

多個ajax請求資料同步問題單個ajax返回資料非同步處理

多個ajax請求互不相關，它們在被調用以後發送各自請求，請求成功以後調用自己的回調方法，互不影響。 因為ajax請求非同步特性，所有一些依賴於請求完成之後的操作我們都需要放在回呼函數內部，否則的話，你在回呼函數外面讀取到的值是空。看下面的例子：

var result = null;ajax({    url: ‘/get.php?id=1‘,    method: ‘GET‘,    success: function(ret) {        result = ret;    }});console.log(result); // 輸出 null

雖然我們在回呼函數裡面設定了result的值，但是在最後一行 console.log(result); 輸出為空白。 因為ajax請求是非同步，程式執行到最後一行的時候，請求並沒有完成，值並沒有來得及修改。 這兒我們應該把 console.log(result) 相關的處理，放在 success 回呼函數中才可以。

多個ajax返回資料問題

如果有多個ajax請求，情況會變得有些複雜。 如果多個ajax請求是按照順序執行的，其中一個完成之後，才能進行下一個，則可以把後面一個請求放在前一後請求的回調中。 比如有兩個ajax請求，其中一個請求的資料依賴於另外一個，則可以在第一個請求的回調裡面再進行ajax請求：

// 首先請求第一個ajaxajax({    url: ‘/get1.php?id=1‘,    success: function(ret1) {        // 第一個請求成功回調以後，再請求第二個        if (ret1) {            ajax({                url: ‘/get2.php?id=4‘,                success:function(ret2) {                    console.log(ret1);                    console.log(ret2)                }            })        }    }});// 也可以寫成下面的形式var ajax2 = function(ret1) {    ajax({        url: ‘/get2.php?id=4‘,        success:function(ret2) {            console.log(ret1);            console.log(ret2)        }    });};ajax({    url: ‘/get1.php?id=1‘,    success: function(ret1) {        if(ret1){            ajax2(ret1);        }    }});

如果不關心不同的ajax請求的順序，而只是關心所有請求都完成，才能進行下一步。 一種方法是可以在每個請求完成以後都調用同一個回呼函數，只有次數減少到0才執行下一步。

var count = 3, all_ret = []; // 調用3次ajax({    url: ‘/get1.php?id=1‘,    success:function(ret) {        callback(ret);    }});ajax({    url: ‘/get2.php?id=1‘,    success:function(ret) {        callback(ret);    }});ajax({    url: ‘/get3.php?id=1‘,    success:function(ret) {        callback(ret);    }});function callback(ret) {    if (count > 0) {        count--;        // 可以在這兒儲存 ret 到全域變數        all_ret.push(ret);        return;    } else {  // 調用三次以後        // todo        console.log(ret);    }}

另一種方法是設定一個定時任務去輪訓是否所有ajax請求都完成，需要在每個ajax的成功回調中去設定一個標誌。 這兒可以用是否獲得值來判斷，也可以設定標籤來判斷，用值來判斷時，要注意設定的值和初始相同的情況。

var all_ret = {    ret1: null,    ret2: null,    ret3: null,};ajax({    url: ‘/get1.php?id=1‘,    success:function(ret) {        all_ret[‘ret1‘] = ret;    }});ajax({    url: ‘/get2.php?id=1‘,    success:function(ret) {        all_ret[‘ret2‘] = ret;    }});ajax({    url: ‘/get3.php?id=1‘,    success:function(ret) {        all_ret[‘ret3‘] = ret;    }});var repeat = setInterval(function(){    for(var item in all_ret) {        if (all_ret[item] === null){            return;        }    }    // todo, 到這兒所有ajax請求均已完成    clearInterval(repeat);}, 50);

原文出自：http://uusama.com/377.html

JavaScrpit中非同步請求Ajax實現