在前端頁面開發的過程中，經常使用到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);        option.success && option.success(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);}