原生js封装ajax,深入理解$.ajax()

直接上代码

//封装的ajax函数

// 传一个对象,所有要用的参数都在对象中 因为不写对象 实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去

// type 请求方式 默认get

// url 请求地址 这个必须要有,没有直接 return 后面都不需要判断

// async 是否异步 如果不传默认是true true是异步,false是同步 很鸡肋,既然用了ajax一般都是异步

//data : 对象的形式 用对象包裹,jq中提供了表单序列化 $(表单).serialize() 得到所以表单的键值对字符串 

//success :成功的回调函数 有参数 

//error: 失败的回调函数

// dataType: 值:xml/json/text

 

以下为代码部分: 

function ajax(options){

//如果没传参数,获取传的不是对象,那么直接return

if(!options || typeof options !== 'object'){

return;

}

var type = options.type;

var url = options.url;

//如果没有传url则直接return

if(!url){

return;

}

//获取async参数,并且做判断是否异步

var async = options.async === false ? false : true;

//由于传入的参数变成了对象,所以需要把对象转换成字符串

var params = getParams(options.data);

//1. 创建实例

var xhr = new XMLHttpRequest();

 

//增加的功能,如果不传或者传的是其他的不符合要求的就用get请求,如果传post就用post请求

type = type === 'post' ? 'post' : 'get';

// 2. 设置请求行

//判断是否是get请求,如果是get请求要拼接参数

if(type === 'get'){

url += '?' + params;

params = null;

}

xhr.open(type, url, async);

// 3. 设置请求头 post才设置

if(type === 'post'){

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

}

 

// 4. 发送请求

// if(type === 'get'){

// xhr.send();

// }else{

// xhr.send(params);

// }

 

xhr.send(params);

// 5. 监听响应

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

//根据dataType去做对应的处理,保证在成功的回调函数中,拿到处理后的数据

if(options.dataType === 'json'){

var result = JSON.parse(xhr.responseText);

}else if(options.dataType === 'xml'){

var result = xhr.responseXML;

}else{

var result = xhr.responseText;

}

//成功了

// 调用success的回调函数

//如果没传成功的回调函数,那么就不应该调用

options.success && options.success(result);

}else{

//失败了

options.error && options.error();

}

}

}

}

//函数的作用: 将对象转成键值对形式的字符串

//这里是原生js,所以需要封装函数将参数对象里的data数据转成字符串格式提交给后台 jq就比较方便了serialize()

function getParams(obj){

if(!obj){

return;

}

var arr = [];

for(var k in obj){

arr.push(k +'=' + obj[k]);

}

return arr.join('&');

}

结尾 var $ = {

　　ajax:function(){}

}

$.ajax();是不是很像?哈哈哈