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