1. 程式人生 > >原生Js封裝ajax方法

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri

// ajax封裝
function ajax(options) {
/**
* 傳入方式默認為對象
* */
options = options || {};
/**
* 默認為GET請求
* */
options.type = (options.type || "GET").toUpperCase();
/**
* 返回值類型默認為json
* */
options.dataType = options.dataType || ‘json‘;
/**
* 默認為異步請求
* */
options.async = options.async || true;
/**
* 對需要傳入的參數的處理
* */
var params = getParams(options.data);
var xhr;
/**
* 創建一個 ajax請求
* W3C標準和IE標準
*/
if (window.XMLHttpRequest){
/**
* W3C標準
* */
xhr = new XMLHttpRequest();
}else{
/**
* IE標準
* @type {ActiveXObject}
*/
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘)
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
var status = xhr.status;
if (status >= 200 && status < 300 ){
options.success && options.success(xhr.responseText,xhr.responseXML);
}else{
options.fail && options.fail(status);
}
}
};
if (options.type == ‘GET‘){
xhr.open("GET",options.url + ‘?‘ + params ,options.async);
xhr.send(null)
}else if (options.type == ‘POST‘){
/**
*打開請求
* */
xhr.open(‘POST‘,options.url,options.async);
/**
* POST請求設置請求頭
* */
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
/**
* 發送請求參數
*/
xhr.send(params);
}
}
/**
* 對象參數的處理
* @param data
* @returns {string}
*/
function getParams(data) {
var arr = [];
for (var param in data){
arr.push(encodeURIComponent(param) + ‘=‘ +encodeURIComponent(data[param]));
}
//console.log(arr);
arr.push((‘randomNumber=‘ + Math.random()).replace(‘.‘));
//console.log(arr);
return arr.join(‘&‘);
}

原生Js封裝ajax方法