經常使用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是有好處的。