封装类似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是有好处的。