一、参数设计：
options
请求方式：
type : "GET|POST",
请求路径：
url : "路径",
返回类型：
dataType : "text|json",
发送数据：
data : null,
404状态的回调函数：
status
如：
status : {
404 : function(){
}
}
成功的回调函数：
success : function(){
}
错误的回调函数：
error : function(){
}
完成的回调函数：
complete : function(){
}
回调函数的this指向：
context : 回调函数里面this指向的绑定;
设置默认参数：
1 var _default = {
2 type : "GET",
3 url : "",
4 data : null,
5 dataType : "text",
6 status : null,
7 success : function(){},
8 complete : function(){},
9 error : function(){}
10 }
如果用户传入了其他数据会对默认参数进行覆盖
封装代码：
1 function ajax( options ){
2 // 默认参数;
3 var _default = {
4 type : "GET",
5 url : "",
6 data : null,
7 dataType : "text",
8 status : null,
9 success : function(){},
10 complete : function(){},
11 error : function(){}
12 }
13 options = assign( _default , options );
14 options.type = options.type.toLowerCase();
15 // 如果存在context;
16 if( isObject(options.context) ){
17 var callback_list = ["success","complete","error"];
18 callback_list.forEach( function( item ){
19 options[item] = options[item].bind( options.context );
20 })
21 }
22
23 // 1. 创建shr ;
24 var xhr = null;
25 if(typeof XMLHttpRequest === "function"){
26 xhr = new XMLHttpRequest();
27 }else{
28 xhr = new ActiveXObject("Microsoft.XMLHTTP");
29 }
30 // 1. 如果请求方式为get，那么我们把数据拼接到url上;
31 if(options.type === "get"){
32 options.url = toUrlData( options.data , options.url , options.type)
33 }
34 // 2. 如果请求方式为post，那么我们把数据拼接到data上;
35 if(options.type === "post"){
36 options.data = toUrlData( options.data , options.url , options.type)
37 }
38 // 2. 根据数据进行方法的调用;
39 xhr.open( options.type , options.url , true ) ;
40 options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
41 // 3. 调用send方法;
42 xhr.send( options.type=== "get" ? null : options.data );
43 // 4. 调用回调函数;
44 xhr.onreadystatechange = function(){
45 // xhr程序运行结束;
46 if( xhr.readyState === 4 ){
47 options.complete();
48 if( /^2\d{2}$/.test(xhr.status) ){
49 // 5.传递数据
50 // 如果需要转换成json那么我们就返回json,如果不需要原样返回;
51 // 如果JSON.parse报错了那么我们要调用错误函数;
52 try{
53 var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;
54 options.success(res);
55 }catch(e){
56 options.error(e,xhr.status);
57 }
58 }else{
59 options.error("error",xhr.status);
60 }
61 // 策略模式调用 :
62 if( isObject(options.status) ){
63 typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
64 }
65 }
66 }
67 }
封装内部使用的方法：
合并对象：
function assign(){
var target = arguments[0];
for(var i = 1 ; i < arguments.length ; i ++){
for(var attr in arguments[i]){
target[attr] = arguments[i][attr];
}
}
return target;
}
URL按请求方式处理：
function toUrlData( obj , url , method){
if( isObject(obj) ){
var str = "";
for(var attr in obj){
str += "&" + attr + "=" + obj[attr]
}
str = str.slice(1);
method = method || "";
if( method.toUpperCase() === "POST"){
return str;
}
url += "?" + str;
return url;
}
return url;
}
判断类型：
function isObject( data ){
return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
}
来源：https://www.cnblogs.com/homeathere/p/12596236.html