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); //返回成功的数据
}
};
}

猜你喜欢

转载自www.cnblogs.com/Mcrown/p/9832667.html