原生js封裝ajax，實現跨域請求

描述：

需要ajax跨域請求，用cors跨域方案。
服務端設置：

header('Access-Control-Allow-Origin: http://front.ls-la.me');
header('Access-Control-Allow-Headers: X-Requested-With');

 

設置了：

后端需要的頭信息，原生ajax以表單方式post提交數據，json數據data轉換成key1=val1&key2=val2 的字符串格式

var ajaxHdFn = function(uri, data, cb) {
  var getXmlHttpRequest = function() {
    if (window.XMLHttpRequest) {
      //主流瀏覽器提供了XMLHttpRequest對象
      return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      //低版本的IE瀏覽器沒有提供XMLHttpRequest對象
      //所以必須使用IE瀏覽器的特定實現ActiveXObject
      return new ActiveXObject("Microsoft.XMLHttpRequest");
    }

  };
  var xhr = getXmlHttpRequest();
  xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
    if (xhr.readyState === 4 && xhr.status === 200) {
      //獲取成功后執行操作
      //數據在xhr.responseText
      var resJson = JSON.parse(xhr.responseText)
      cb(resJson);
    }
  };
  xhr.open("post", uri, true);
  xhr.setRequestHeader("DeviceCode", "56");
  xhr.setRequestHeader("Source", "API");
  xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
  var dataStr = '';
  for (var i in data) {
    if (dataStr) {
      dataStr += '&';
    }
    dataStr += i + '=' + data[i];
  }
  xhr.send(dataStr);
};

 

跨域相關內容

CORS跨域的常見問題以及前后端的設置：

《Ajax——CORS跨域調用REST API 的常見問題以及前后端的設置》

 

data = JSON.stringify(data);
xhr.setRequestHeader("Content-Type","application/json");

這樣設置，可以直接傳json字符串給后端。后端也要做相應處理。