/*** ajax数据请求接口
@param {string} type 请求方式 {"get(默认)" | "GET" | "post" | "POST"}
@param {string} url 请求接口地址
@param {Object} data 请求时后台所需参数
@param {bool} async 是否异步(true)或同步(false)请求{true(默认) | false}
@example: $ajax({
type: "post",
url: "",
data: {}
}).then(function(ret){
}).then(function(err){
});
*/
var $ajax = function({type, url, data, async}){
// 异步对象
var ajax;
window.XMLHttpRequest ? ajax =new XMLHttpRequest() : ajax=new ActiveXObject("Microsoft.XMLHTTP");
!type ? type = "get" : type = type;
!data ? data = {} : data = data;
async != false ? !async ? async = true : async = async : '';
return new Promise(function(resolve,reject){
// get 跟post 需要分别写不同的代码
if (type.toUpperCase()=== "GET")
{// get请求
if (data) {// 如果有值
url += '?';
if( typeof data === 'object' )
{ // 如果有值 从send发送
var convertResult = "" ;
for(var c in data){
convertResult += c + "=" + data[c] + "&";
}
url += convertResult.substring(0,convertResult.length-1);
}
else
{
url += data;
}
}
ajax.open(type, url, async); // 设置 方法 以及 url
ajax.send(null);// send即可
}
else if(type.toUpperCase()=== "POST")
{// post请求
ajax.open(type, url); // post请求 url 是不需要改变
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 需要设置请求报文
if(data)
{ // 判断data send发送数据
if( typeof data === 'object' ){// 如果有值 从send发送
var convertResult = "" ;
for(var c in data){
convertResult += c + "=" + data[c] + "&";
}
convertResult = convertResult.substring(0,convertResult.length-1);
ajax.send(convertResult);
}else{
ajax.send(data);
}
} else
{
ajax.send(); // 木有值 直接发送即可
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState == 4)
{
if(ajax.status===200)
{ // 返回值: ajax.responseText;
if(ajax.response && typeof ajax.response != 'object'){
resolve(JSON.parse(ajax.response));
}
else{
resolve(ajax.response);
}
}
else
{
reject(ajax.status);
}
}
}
});
}
js 原生ajax封装(promise)
最新推荐文章于 2024-04-08 21:03:54 发布