我們了解了Ajax是如何實現(xiàn)的，何為異步通信捐名，Ajax的請求方式旦万，其實都是比較零散的知識，我們平時開發(fā)并不會這樣拆解來用镶蹋，而是封裝成一個方法成艘，便于調(diào)用。那如何封裝呢贺归？先別急淆两，先看jquery是如何封裝Ajax方法的。
本文梗概：
<a href="#tip1">1. 分析jquery對Ajax的封裝</a>
<a href="#tip2">2. 封裝原生Ajax</a>
<a href="#tip3">3. 總結(jié)</a>
<h2 id="tip1">1. 分析jquery對Ajax的封裝</h2>
jquery已經(jīng)幫我們封裝好了Ajax拂酣，也有很簡便的$.get()方法和$.post()方法秋冰，可能大家平時都已經(jīng)用上了，但是這個封裝的方法是如何實現(xiàn)的呢婶熬？我們今天不是分析源碼的剑勾，而是根據(jù)分析它是如何把原生Ajax封裝成一個方法的。
jquery的Ajax用法
$('document').ready({
$('html').click(function(){
$.ajax({
ulr:'server.php?rand='+Math.random(),
type:'GET',
data:{
name:'kuohao',
age:21
},
dataType:'text',
success: function(msg){
alert(msg);
}
});
});
});
由上面我們可以知道jquery封裝了一個名為ajax的函數(shù)尸诽，然后傳進一個對象甥材，這個對象包含了我們要設置的信息盯另。這個對象比較復雜性含，儲存了普通字符串，對象鸳惯，還有方法商蕴。實際上jquery還有更多的參數(shù)，這里只是列舉出了我們常用的一些參數(shù)芝发。
那我們是否也能夠這樣寫原生的js
window.onload = function (){
//創(chuàng)建一個ajax方法
function ajax(obj){
//do something
};
//調(diào)用這個ajax方法绪商，傳進參數(shù),這個參數(shù)為一個對象
ajax({
//設置url
ulr:'server.php?rand='+Math.random(),
//設置請求類型
type:'GET',
//設置請求數(shù)據(jù)
data:{
name:'kuohao',
age:21
},
//請求響應數(shù)據(jù)類型
dataType:'text',
//回調(diào)響應數(shù)據(jù)
success: function(msg){
alert(msg);
}
})
}
我們也使用原生的js函數(shù)，傳入一個對象辅鲸，去設置ajax請求格郁，但是這個ajax函數(shù)如何實現(xiàn)，我們現(xiàn)在還不能知道独悴，不過我們已經(jīng)掌握了ajax請求的基本要領例书，慢慢地摸索，可以寫出來的刻炒。這也是面向?qū)ο缶幊痰囊粋€基本特征决采，封裝性，盡可能地屏蔽內(nèi)部細節(jié)坟奥，只開放部分接口將處理好的數(shù)據(jù)返回給上下文使用树瞭。
讓我們回憶一下上文是如何寫ajax請求的……
- 新建對象
- 使用open方法設置并啟動請求
- 使用onreadychange事件監(jiān)聽數(shù)據(jù)接收
- 如果是POST方法先設置請求頭類型拇厢，GET方法則省略此步
- 使用send方法發(fā)送請求，如果是get請求則參數(shù)設置為null晒喷，post請求參數(shù)設置要發(fā)送的數(shù)據(jù)
<h1 id="tip2">2. 封裝原生Ajax</h1>
ok孝偎，那下面就可以開始封裝我們自己的原生Ajax了。
function ajax(obj){
//新建對象
var xhr = new XMLHttpRequest();
var sendValue = ''; //send方法參數(shù)初始化為''字符串
//處理傳入的請求數(shù)據(jù);
var data = [];
for(var i in obj.data){
data.push(i+'='+obj.data[i]);
}
obj.data = data.join('&');
//判斷是否使用緩存凉敲，默認不使用
if(obj.cache === false || obj.cache === undefined){
obj.url += '?rand='+Math.random();
}
//判斷請求類型邪媳，對url和要發(fā)送的請求數(shù)據(jù)作出處理
if(obj.type == 'get'){
obj.url += obj.url.indexOf('?') == -1 ? '?'+'&'+ obj.data : '&'+obj.data;
sendValue = null;
//判斷url有沒有存在的查詢字符？荡陷，如果沒有加上雨效，再拼接url參數(shù)。
}else if(obj.type == 'post'){
sendValue =obj.data;
}
//準備就緒废赞，啟動請求
xhr.open(obj.type,obj.url);
//第三個參數(shù)缺省值為true徽龟，可不設置。
//監(jiān)聽數(shù)據(jù)接收
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
//設置判斷希望接收的響應數(shù)據(jù)的類型
var dataType = obj.dataType;
if(dataType == 'text'){
dataType = 'responseText';
}else if(dataType == 'xml'){
dataType ='responseXML';
};
//使用回調(diào)函數(shù)接收數(shù)據(jù)
obj.success(xhr[dataType]);
}
};
//判斷是否為POST請求唉地，是則設置請求頭類型据悔，模擬表單
if(obj.type == 'post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xhr.send(sendValue);
}
因為ajax函數(shù)傳的參數(shù)是一個對象，要在封裝的函數(shù)里作適當處理耘沼，方能使用极颓，所以就多了前兩幾個步驟，還有是否使用緩存群嗤，對希望接收的響應數(shù)據(jù)類型也分別做了判斷菠隆。但是基本的步驟還是那樣,還有很多方法可以自己擴展，道理都一樣狂秘，想清楚需求骇径，再在封裝的方法里修改，生產(chǎn)出想要東西者春，那就ok了破衔。
注意的是，HTML如果和php腳本的編碼不一致可能會造成通信數(shù)據(jù)亂碼钱烟，解決辦法就是給發(fā)送的請求數(shù)據(jù)進行編碼晰筛，使用encodeURIComponent方法，一般設置兩者設置為 “utf-8” 編碼就沒問題了拴袭。
<h2 id="tip3">3. 總結(jié)</h2>
Ajax初探三篇講的就是Ajax的基本知識和基本應用读第，實際上都不難，使用jquery封裝好的方法很簡單稻扬，但是自己動手封裝原生的Ajax卦方，才能更透切地理解其中信息的傳遞過程和js編程的方法。我也是剛接觸Ajax泰佳，如有紕漏盼砍，煩請指教尘吗，謝謝。
