Ajax封装的原理,ajax原理及封装

functionassign(){var target = arguments[0];for(var i = 1 ; i < arguments.length ; i ++){//console.log(arguments[i]);

for(var attr inarguments[i]){

target[attr]=arguments[i][attr];

}

}returntarget;

}functiontoUrlData( obj , url , method){if( isObject(obj) ){var str = "";for(var attr inobj){

str+= "&" + attr + "=" +obj[attr]

}

str= str.slice(1);//如果数据发送方式是POST，那么直接返回str就可以了;

method = method || "";if( method.toUpperCase() === "POST"){returnstr;

}

url+= "?" +str;returnurl;

}returnurl;

}functionisObject( data ){return (typeof data === "object" && data !== null && data.constructor && data.constructor ===Object)

}functionajax( options ){var _default ={

type :"GET",

url :"",

data :null,

dataType :"text",

status :null,

success :function(){},

complete :function(){},

error :function(){}

}//我们会创建一些默认参数, 如果用户传入了其他数据会对默认参数进行覆盖;

options =assign( _default , options );

options.type=options.type.toLowerCase();if( isObject(options.context) ){var callback_list = ["success","complete","error"];

callback_list.forEach(function( item ){//console.log(options[item]);

options[item] =options[item].bind( options.context );

})

}//1. 创建shr ;

var xhr = null;if(typeof XMLHttpRequest === "function"){

xhr= newXMLHttpRequest();

}else{

xhr= new ActiveXObject("Microsoft.XMLHTTP");

}//1. 如果请求方式为get，那么我们把数据拼接到url上;

if(options.type === "get"){

options.url=toUrlData( options.data , options.url , options.type)

}//2. 如果请求方式为post，那么我们把数据拼接到data上;

if(options.type === "post"){

options.data=toUrlData( options.data , options.url , options.type)

}//2. 根据数据进行方法的调用;

xhr.open( options.type , options.url , true) ;

options.type=== "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";//3. 调用send方法;

xhr.send( options.type=== "get" ? null: options.data );//4. 调用回调函数;

xhr.onreadystatechange = function(){//xhr程序运行结束;

if( xhr.readyState === 4){

options.complete();if( /^2\d{2}$/.test(xhr.status) ){//5.传递数据

try{var res = options.dataType === "json" ?JSON.parse(xhr.responseText) : xhr.responseText;

options.success(res);

}catch(e){

options.error(e,xhr.status);

}

}else{

options.error("error",xhr.status);

}//策略模式调用 :

if( isObject(options.status) ){typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";

}

}

}

}