封装类似jQuery的ajax函数

经常使用jQuery的ajax 不明白里头大概的原理怎么行呢？

下面我们一起来简单的封装一些jq里的ajax 吧

//简易AJAx 封装

var $ = {

params:function(params){

var data="";

for(key in params){

data += key + '='+params[key]+'&';

}

// 将最后一个&字符截掉

return data.slice(0,-1);

},

//AJax 实例

ajax:function(options){

//实例化xmlhttpRequest,

var xhr = new XMLHttpRequest(),

//默认为get 方式

type = options.type ||'get',

// 默认请求路径

url = options.url || location.pathname,

// 格式化数据key=value&key=value

data = this.params(options.data),

callback = options.success;

if(type == 'get' ){

url = url +'?' +data;

data = null;

}

xhr.open(type ,url);

//当请求方式为get 情况，需要设置一个content-type

if(type =='post'){

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

}

// 发送请求主体

xhr.send(data);

//监听响应

xhr.onreadystatechange = function(){

if(xhr.readyState ==4 && xhr.status ==200 ){

//获取响应类型

var contentType = xhr.getResponseHeader('Content-Type');

var data = xhr.responseText;

//解析json 检测ct里是否包含json 字样

if(contentType.indexOf('json') != -1){

// 解析json字符串

data = JSON.parse(data);

}

// 将数据传给回调回去

callback(data);

}else{

options.error('请求失败');

}

}

}

};

// 使用方式

// 调用工具函数

$.ajax({

type: 'post',

url: 'stars.php',

// 以对象形式传递数据会更加方便

data: {name: 'itcast', age: 10},

success: function (data) {

console.log(data);

},

error: function (err) {

console.log(err);

}

});

// 虽然和真正jq的源码还有很大的差距，不过能大概明白原理

// ，对真正理解ajax是有好处的。