使用jQuery處理AJAX請求的基礎學習教程_jquery

$.ajax快捷方法

$.get(url,[data],[callback],[type])$.post(url,[data],[callback],[type])

兩種方法請求方式不同，其他方式相同.
參數：url[請求地址]，data[請求的資料內容(obj對象)]，callback[回呼函數(只能處理請求成功事件)]，
type[請求返回資料的編碼格式(預設ContentType指定格式)]

$.get('/test?x=1');$.get('/test',{z:2});$.post('/test',{y:2});$.get('/user',function(data,callbacktype,jqXHR){  data//返回資料  callbacktype//返回資料的狀態資訊(字串)  jqXHR//jQuery封裝的XHR對象});$(selector).load(url,[data],[callback])

將頁面片段載入到selector的容器裡面

$("#content").load('/user');$.getJSON(url,[data],[callback])

如果是JSON資料回調會成功，否則失敗

$.getJSON('/test',{type:1},function(){  console.log(argument)});$.getScript(url,[claaback])

動態載入指令檔

$.gerScript('/js/test.js',function(){  alert(test(1,2));});

$.ajax詳細使用方法

$.ajax(url,[settings]);$.ajax({  url:'/test',  success:function(){    alert('ok');  }});

處理響應結果的回呼函數：
success[成功]，error[請求失敗]，
statusCode[指明返回的狀態代碼的回呼函數],
complete[請求返回前的回呼函數(處理返回不同狀態代碼的請求)]

$.ajax('/test',{  success:function(data){    console.log(arguments);  },  error:function(jqXHR,textStatus,err){    //jqXHR:jQuery增強XHR    //textStatus:請求完成狀態    //err:底層通過throw拋出的異常對象，類型與值與錯誤類型有關    console.log(arguments);  },  complete:function(jqXHR,textStatus){    //jqXHR:jQuery增強XHR    //textStatus：請求完成狀態success | error    console.log(arguments);  },  statusCode:function(){    '403':function(jqXHR,textStatus,err){      //jqXHR:jQuery增強XHR      //textStatus:請求完成狀態      //err:底層通過throw拋出的異常對象，類型與值與錯誤類型有關      console.log(arguments);      console.log(400);    },    '400':function(){      console.log(400);    }  }   });

請求的資料：data,processData,contentType,traditional

$.ajax('/test',{  //請求的資料內容  data:{    a:1,    b:2  },  //請求的方式  type:'POST',  //是否對請求的資料進行轉碼(用於傳輸資料為html節點內容)  processData:true,  //當前的資料是否使用傳統方式進行url編碼  traditional:true,  //請求資料編碼格式  contentType:'application/json'});

響應資料：dataType,dataFilter

$.ajax('/test',{  success:function(data){    console.log(typeof data)  },  //定義的返回資料的類型  dataType:'json | html | text | jsonp | script',  //返回底層的未經處理資料進行預先處理  dataFilter:function(data,type){    //data:未經處理資料    //type:指定的資料類型  }  });

前置處理：beforeSend

$.ajax('/test',{  beforeSend:function(jqXHR,settings){    console.log(arguments);    jqXHR.setRequestHeader('test','haha');    jqXHR.testData = {a:1,b:2};  },  complete:function(jqXHR){    console.log(jqXHR.testData)  }});

請求類型：GET(預設) | POST | PUT | DELETE
同步非同步：async(預設true)
是否緩衝：cache(預設true)
其他參數：
1.global[是否觸發全域事件]
2.ifModifed[僅在伺服器資料改變時候載入資料]
3.username,password[http需要驗證時候]
4.timeout[佈建要求逾時時間，若請求逾時觸發error]
5.context[回調中this指向的對象]
其他相關的API

$.ajaxSetup(option)

設定全域預設參數

//預設為get請求$.ajax('/test');//修改全域請求方式為post$.ajaxSetup({  type:'post',  headers:{    test:new Date().getTime  },  cache:false});//請求方式改變為post$.ajax('/test');$.ajaxPrefilter([dataTypes],handler(option,originalOptions,jqXHR))

請求發起前的預先處理，提供了一種AOP(面向切面)編程模式，常見用途：
1.根據option設定執行特定處理邏輯
2.修改option值改變請求預設行為
3.通過return修改預設dataType

例：通過return修改預設dataType

$.ajaxPrefilter('text html json',function(options,originalOptions,jqXHR){  //options請求參數，含預設值  //originalOptions請求時傳入的參數，不含預設值  //jqXHR:jQuery增強XHR  console.log(arguments);  if(options.url == '/test'){    return 'text';  }});$.ajax('/test',{  type:'post',  dataType:'text',  //自訂屬性  test:'haha'});

例：多次請求僅最後一次有效，避免多次請求導致的資料混亂

var requests = {};$.ajaxPrefilter(function(options,originalOptions,jqXHR){  if(requests[options.url]){    requests[options.url].abort();  }  requests[options.url] = jqXHR;});$.ajax('/test/');$.ajax('/test/');

例：統一修改請求路徑

$.ajaxPrefilter(function(options){  if(options.url.substr(0,5) == '/usr'){    options.url = options.url.replace('/usr/','/user/');    options.header = {      a:1    }  }});$.ajax('/usr/');

全域事件

jQuery-1.9以後，全域事件必須綁定在document上

$(document).ajaxSuccess(globalEventHander);$(document).ajaxError(globalEventHander);$(document).ajaxComplete(globalEventHander);$(document).ajaxStart(globalEventHander);$(document).ajaxStop(globalEventHander);$(document).ajaxSend(globalEventHander);function globalEventHander(event){  console.log(arguments);  console.log(event.type);}$.ajax('/test?err=y');//請求成功$.ajax('/test?err=n');//請求失敗//請求順序://ajaxStart >> ajaxSend >> ajaxSend >> ajaxSuccess >> ajaxComplete >> ajaxError >> ajaxComplete >> ajaxStop

序列化

1.param[序列化一個 key/value 對象]
2.serialize[通過序列化表單值，建立 URL 編碼文本字串]
3.serializeArray[通過序列化表單值來建立對象數組(名稱和值)]

例：param()

var params = { a:1, b:2 };var str = $.param(params);console.log(str);//a=1&b=2"

例：serialize()

<form>  <div><input type="text" name="a" value="1"/></div>  <div><input type="text" name="b" value="2"/></div>  <div><input type="hidden" name="c" value="3"/></div></form><script type="text/javascript">  $('form').submit(function() {   console.log($(this).serialize());   //a=1&b=2&c=3   return false;  });</script>

例：serializeArray()

<form>  First:<input type="text" name="First" value="1" /><br />  Last :<input type="text" name="Last" value="2" /><br /></form><script type="text/javascript">  $('form').click(function(){    x=$("form").serializeArray();    console.log(x);    //{[name:First,value:1],[name:Last,value:2]}  });</script>

ajax鏈式編程方法
在開發的過程，經常會遇到一些耗時間的操作，比如ajax讀取伺服器資料（非同步作業），遍曆一個很大的數組（同步操作）。不管是非同步作業，還是同步操作，總之就是不能立即得到結果，JS是單線程語音，不能立即得到結果，便會一直等待（阻塞）。

一般的做法就是用回呼函數（callback），即事先定義好一個函數，JS引擎不等待這些耗時的操作，而是繼續執行下面的代碼，等這些耗時操作結束後，回來執行事先定義好的那個函數。如下面的ajax代碼：

$.ajax({  url: "test.html",  success: function(){    console.log("success");  },  error: function(){    console.log("error");  }});

但這樣寫不夠強大靈活，也很囉嗦。為此，jQuery1.5版本引入Deferred功能，為處理事件回調提供了更加強大而靈活的編程模式。

$.ajax("test.html").done(  function(){    console.log("success");  }).fail(  function(){    console.log("error");  });

不就是鏈式調用嘛，有何優點？

優點一：可以清晰指定多個回呼函數

function fnA(){...}function fnB(){...}$.ajax("test.html").done(fnA).done(fnB);

試想一下，如果用以前的編程模式，只能這麼寫：

function fnA(){...}function fnB(){...}$.ajax({  url: "test.html",  success: function(){    fnA();    fnB();  }});

優點二：為多個操作指定回呼函數

$.when($.ajax("test1.html"), $.ajax("test2.html")).done(function(){console.log("success");}).fail(function(){console.log("error");});

用傳統的編程模式，只能重複寫success,error等回調了。