jquery中ajax封裝原理/封裝jquery的ajax工具函式
阿新 • • 發佈：2019-01-19
第一次寫部落格，如果有些的不對或者不正確的地方，還希望大神們能夠批評指正
，豌豆拜上！！
Hello,every body!!,豌豆橫空出世，哈哈，糾結了很久的第一篇部落格即將面世
噹噹噹.....出場自帶bgm喲，話說寫部落格這個事，也不知道能寫多久額，給自己一個鼓勵的膜拜吧！！ok，果然剛開始不知道寫點啥，尷尬...還是開始正題吧！！
今天給大家分享一下jquery中$.ajax()方法封裝的原理，平時資料互動中會經常用到ajax方法，還是很好用的，
但是底層的封裝原理如果瞭解的話，用起來會更得心應手些
jquery中Ajax操作進行了封裝，在jquery中$.ajax()方法屬於最底層的方法,第二層是load()、$.get()和$.post()方法，
第三層是$.getScript()和$.getJSON()方法。
重點來啦，$.ajax()方法的結構為：$.ajax(options)
該方法只有一個引數，但是在這個物件裡包含了$.ajax()方法所需求的請求設定以及回撥函式等資訊，引數以key/value的形式存在，
所有引數都是可以選的
ajax引數可以有：
1:請求方式：type（get/post）
2:後臺介面地址:url（可以從介面文件中檢視）
3:通過data把前端傳輸後臺的必要資訊傳過去：data（如 name = 'wandou' & sex = 'girl'）
4:前後端互動的格式：dataType（xml，html，script，json現在最常用的格式之一，jsonp等）
5：傳送請求前所要執行的函式：beforeSend:function(){}
6:請求完成後呼叫的回撥函式（請求成功或者失敗時均呼叫）complete:function(){}
7:請求成功後呼叫的回撥函式：success:function(){}
8:請求失敗時被呼叫的函式：error:function(){}
......
還有好多其他的引數，最近常用到這些，就寫這些吧，後面的有想要了解的可以在查閱一下其他的資料
$.ajax({
type:'',
url:'',
data:{},
dataType:'',
beforeSend:function(){
},
success:function(){
},
complete:function(){
}
})
<script src="../jquery-3.2.1.min.js"></script>
<script>
//先來看看需求是啥個樣紙
//封裝ajax工具函式*/
//有哪一些不確定的點
//確定的引數 型別 預設 引數具體值
//1.請求方式 字串 get get,post
//2.請求地址 字串 當前地址 後臺處理程式的地址（介面地址）
//3.是否非同步 布林 true true false
//4.傳送資料 物件 {} {name:'Echo',age:10}
//5.成功回撥 函式 - 響應成功的時候要做的事情 （需求來決定）
//6.失敗回撥 函式 - 響應失敗的時候要做的事情 （需求來決定）
//現在開始說原理嘍
$(function(){
$.ajax();
//$是jquery中涵蓋最大的一個物件，全域性物件
});
window.$={};//這個在這就不多說了
$.ajax=function(options){
//判斷 形參options是否接受了使用者傳入的實參
//如果接受到了，就證明使用者傳入了實參物件，就可以繼續執行後續程式碼邏輯
//如果沒有接收到，就證明使用者沒有傳入實參，或者使用者傳入的實參不是物件型別的資料,就可以直接結束程式碼的執行
if(!options||typeof options != 'object'){
return false;
//options如果沒接收到實參，他的值是false那麼！options的值是true，
// （||只要一個是真的那麼就是真的）那麼短路運算不再執行，直接執行，return false
//使用者輸入了實參options的值就是true，！option的值就是false
//使用者如果傳入的實參不是物件型別，那麼後面的值就是true
//就會進入if判斷，就結束執行
}
//引數預設值的處理
var type=options.type != 'post'?'get':'post';
//短路運算的或運算，如果第一個值是true就取第一個值，如果第一個值為false就去第二個值
//第一個值是使用者輸入的url地址，那麼如果使用者輸入了，第一個值就是true那麼就取第一個值(使用者輸入的url地址)
//如果使用者沒有輸入url地址，第一個值就是false，這樣就取第二個值（當前地址）
var url=options.url||location.pathname; //當前地址location.pathname
var async=options.async===false?false:true; //判斷同步或非同步
var data=options.data||{};
//預設請求方法時get，那麼get方法中前端向後臺傳輸的必要資料寫在url後面
//{name:'Echo',age:19,sex:'gril'}
//xxx.php?name="Echo"&age=19&sex='gril';
var dataStr='';
for(key in data){
dataStr+=key+'='+data[key]+'&';
// 鍵名 = 鍵值 &
}
//多一個&符用slice去掉
dataStr=dataStr&&dataStr.slice(0,-1);
//說道這的時候有沒有覺得暈暈的了？如果還是很清晰的話，那還是很牛批的哈！接受膜拜吧，大boss來了..
//傳送前回調函式，呼叫beforeSend:function(){}
//那麼接下里使用者呢,如果輸入了beforeSend這個屬性，那麼options.beforeSend值為true
//反之,options.beforeSend的值為false
if(options.beforeSend){
var flag=options.beforeSend();
if(flag==false){
//這個時候阻止ajax的傳送
return false;
}
}
//ajax程式設計開始嘍 唔哩唔哩轟....
var xhr=new XMLHttpRequest();
//請求行
xhr.open(type,type=='get'?url+dataStr:url,async);
//請求頭
//get方法不需要設定請求頭
if(type=='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
//請求主體 傳送
xhr.send(type=='post'?datastr:null);
//響應
xhr.onreadystatechange=function(){
//監聽響應狀態碼（響應狀態）
//通訊完成
//readystate響應狀態碼 xhr.readystate表示xhr物件的響應狀態碼
if(readystate==4){
//成功
//status響應狀態值 200 304 403 404 500及以上
if(status==200){
//拿回資料 轉換格式
//後臺能確定返回給前端的資料格式
//需要根據後臺響應的型別來確定資料格式
var contentType=xhr.getResponseHeader('Content-Type');
//規範的寫法 application/xml；
//規範的寫法 application/json
var result; //一般情況下，result表示後臺響應回來的資料
if(contentType.indexOf('xml')>-1){
//返回xml
result=xhr.responseXML;
//判斷我們獲取到的contentType是什麼語法格式進行解析的，
//如果是按照xml格式進行解析的，就把返回的資料轉換成xml格式的資料
}else if(contentType.indexOf('json')>-1){
//返回json
//這個後臺返回回來的資料是不是json格式進行解析的
//如果是，就進入if條件判斷裡
result=JSON.parse(xhr.responseText);
}else{
//如果xml和json都不是，那就讓他自由發揮吧！哈哈
result=xhr.responseText;
}
//這為什麼會有一個判斷式呢？這是個問題，其實是想做一下判斷
//假如說未輸入success屬性，那就取前面的內容，可是前面什麼內容也沒有，那就繼續執行其他的
//假如說輸入了內容，那就取後面的內容
options.success&&options.success(result);
}else{
//去呼叫失敗回撥函式
var message={
status:xhr.status,
statusText:xhr.statusText
};
//假如設定了錯誤的提示資訊，那就按照輸入的提示資訊提示
//假如沒有設定錯誤的資訊，那就顯示預設資訊
options.error&&options.error(message);
}
//通訊完成回撥函式
options.complete&&options.complete();
}
}
};
$.get = function(options){
options.type='get';
$.ajax(options);
};
$.post = function(options){
options.type = 'post';
$.ajax(options);
}
</script>