原生JS封装AJAX详解

//1.type 请求方式post，还是get
//2.请求URL地址
//3.参数 (对象)
//4.回调函数
//5.同步还是异步
//请求方式 请求url地址 参数：是一个对象 回调函数 同步异步
function ajax(type,url,par,fn,async) {
 ???//判断请求方式是否合法
 ???//因为传入可能会有大写或小写，统一转化为大写，方便验证
 ???type =type.toUpperCase();
 ???//判断合法性
 ???if(type != "GET" && type !="POST"){
 ???????console.error("请求方式不合法");
 ???????return;
 ???}
 ???var ajaxObj;
 ???//判断浏览器类型，创建ajax对象
 ???if(window.XMLHttpRequest){
 ???????ajaxObj =new XMLHttpRequest();
 ???}else {
 ???????ajaxObj =new ActiveXObject("Microsoft.XMLHTTP");
 ???}
 ???//处理参数
 ???var data ="";
 ???for(var prop in par){
 ???????data += prop +"="+par[prop]+"&";
 ???}
 ???data =data.substr(0,data.length-1);
 ???if(type =="GET"){
 ???????url +="?" +data;
 ???}
 ???//调用open
 ???ajaxObj.open(type,url,async);
 ???if(type =="POST"){
 ???????ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 ???????ajaxObj.send(data);
 ???}else{
 ???????//get
 ???????ajaxObj.send();
 ???}
 ???//监听数据返回，通过回调函数通知用户 异步
 ???ajaxObj.onreadystatechange =function () {
 ???????if(4 ==ajaxObj.readyState &&200 ==ajaxObj.status){
 ???????????fn(ajaxObj.responseText);
 ???????}
 ???}
}

原生JS封装AJAX详解

原文地址：http://www.cnblogs.com/mmybz/p/7676340.html