js 难点之 ajax 封装

function ajax(opt) {
opt = opt || {};//opt以数组方式存参,如果参数不存在就为空。
opt.method = opt.method.toUpperCase() || 'POST';//转为大写失败,就转为POST
opt.url = opt.url || '';//检查URL是否为空
opt.async = opt.async || true;//是否异步
opt.data = opt.data || null;//是否发送参数,如POST、GET发送参数
opt.success = opt.success || function () {};成功后处理方式
var xmlHttp = null;//定义1个空变量
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();//如果XMLHttpRequest存在就新建,IE大于9&&非IE有效
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//用于低版本IE
}
var params = [];//定义1个空数组
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);//将opt里的data存到push里
}
var postData = params.join('&');//追加个& params
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);//开始请求
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');//发送头信息,与表单里的一样。
xmlHttp.send(postData);//发送POST数据
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);//GET请求
xmlHttp.send(null);//发送空数据
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//readyState有5个状态,可以百度一下看看都有什么。当请求完成,并且返回数据成功
opt.success(xmlHttp.responseText);//返回成功的数据
}
};
}
原文地址:https://www.cnblogs.com/Mcrown/p/9832667.html