封裝Ajax框架！（代碼篇）
寫在前面的話，如果中間有什么不明白的，請先看封裝ajax框架?。ㄇ把云?/span>
1、添寫一個(gè)封閉函數(shù)
（function(){}）();
在一個(gè)項(xiàng)目中，可能會引用多個(gè)js框架，如果函數(shù)名相同，會有命名沖突，所以這里使用封閉函數(shù)。
2、封裝一個(gè)函數(shù)，用于dom元素的獲取
![]()
但$是局部變量，外面不能直接使用，所以需要添加window.$ = $；
表示為全局對象window添加一個(gè)"$"的屬性，這個(gè)屬性的值是當(dāng)前局部變量$的值。
所以在外部，如果想獲取某個(gè)dom元素，可以直接：$("content")；
3、封裝一個(gè)函數(shù)，用于創(chuàng)建ajax對象
因?yàn)橹埃覀儗⒁粋€(gè)函數(shù)賦值給了$，函數(shù)也是對象，所以$也就是一個(gè)對象
4、封裝ajax的get請求
為對象$添加一個(gè)get方法，參數(shù)有三個(gè)
url：表示ajax請求的頁面地址
data：表示get請求時(shí)所需要傳遞的參數(shù)
callback：當(dāng)ajax得到正確的數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。
![]()
5、封裝ajax的post請求
為對象$添加一個(gè)post方法，參數(shù)有三個(gè)
url：表示ajax請求的頁面地址
data：表示get請求時(shí)所需要傳遞的參數(shù)
callback：當(dāng)ajax得到正確的數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。
當(dāng)調(diào)用ajax請求時(shí)，可以使用這種形式
$.method(頁面地址，傳遞參數(shù)，處理函數(shù))；
那么對應(yīng)的方法中callback參數(shù)就指向了這個(gè)處理函數(shù)，所以callback(xhr.responseText)；相當(dāng)于處理函數(shù)(xhr.responseText)
6、添加返回值類型
我們在ajax程序中，可以使用三種數(shù)據(jù)形式：
a、字符串
b、xml
c、json
需要完善ajax框架 ，可以返回不同類型的數(shù)據(jù)，再進(jìn)行不同的處理。首先，為get和post方法添加第四個(gè)參數(shù)：type，表示期望得到的返回值類型
再根據(jù)type值的不同，返回對應(yīng)的數(shù)據(jù)
調(diào)用形式
$.method(請求地址，參數(shù)，處理函數(shù)，數(shù)據(jù)類型)；
封裝完整的ajax框架代碼
1 (function(){ 2 //用于得到一個(gè)dom對象 3 var $ = function(id){ 4 return document.getElementById(id); 5 }; 6 //用于得到一個(gè)ajax對象 7 $.init = function(){ 8 try{return new ActiveXObject();}catch(e){} 9 try{ 10 return new XMLHttpRequest(); 11 }catch(e){ 12 alert("請更換瀏覽器！"); 13 } 14 }; 15 //用于發(fā)送ajax的get請求調(diào)用方法為$.get("demo.php","username=zhangsan&&age=20",function(result){},'json') 16 $.get = function(url,data,callback,type){ 17 var xhr = $.init(); 18 //首先判斷下傳遞的data參數(shù)是否為null，如果不為空直接拼接到url后傳遞給服務(wù)器 19 if(data !=null){ 20 url = url+"?"+data; 21 } 22 xhr.open("get",url); 23 //解決緩存問題 24 xhr.setRequestHeader("If-Modified-since","0"); 25 xhr.onreadystatechange = function(){ 26 if(xhr.readyState == 4 && xhr.status == 200){ 27 //如果沒有傳遞type參數(shù)，讓其默認(rèn)為text 28 if(type == null){ 29 type ='text'; 30 } 31 if(type == 'text'){ 32 callback(xhr.responseText); 33 } 34 if(type == 'xml'){ 35 callback(xhr.responseXML); 36 } 37 if(type == 'json'){ 38 callback(eval("("+xhr.responseText+")")); 39 } 40 } 41 }; 42 xhr.send(null); 43 }; 44 //用于發(fā)送ajax的post請求,調(diào)用方法為$.post("demo.php","username=zhangsan&&age=20",function(result){},'json') 45 $.post = function(url,data,callback,type){ 46 var xhr = $.init(); 47 xhr.open("post",url); 48 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 49 xhr.onreadystatechange = function(){ 50 if(xhr.readyState == 4 && xhr.status == 200){ 51 //如果沒有傳遞type參數(shù)，讓其默認(rèn)為text 52 if(type == null){ 53 type ='text'; 54 } 55 if(type == 'text'){ 56 callback(xhr.responseText); 57 } 58 if(type == 'xml'){ 59 callback(xhr.responseXML); 60 } 61 if(type == 'json'){ 62 callback(eval("("+xhr.responseText+")")); 63 } 64 } 65 }; 66 xhr.send(data); 67 }; 68 window.$ = $; 69 })();
浙公網(wǎng)安備 33010602011771號