jQuery中對AJAX操做的封裝函數

 jQuery提供了6個簡化AJAX操做的函數，每一個均可以代替元素AJAX中的四步代碼！

  (1)$('xxx').load()         jQuery對象函數

  (2)$.get()                   jQuery全局函數

  (3)$.post()                 jQuery全局函數

  (4)$.getScript()          jQuery全局函數

  (5)$.getJSON()           jQuery全局函數

  (6)$.ajax()              jQuery全局函數

 

1.jQuery中對AJAX操做的封裝函數之一——load

  用法：

       $('選擇器').load( 'x.php' ,[data], [fn] )

  做用：

       使用XHR發起異步的請求，獲取服務器端返回的html片斷，把xhr.responseText設置爲當前選定元素的innerHTML。響應成功完成後，會自動調用第三個回調函數。

  不足：服務器返回必須是HTML片斷！響應內容會替換掉當前選定元素中已有的內容！

 

  演示：異步加載全站的頁頭和頁尾

$(function(){
$('div#header').load('header.php');
$('div#footer').load('footer.php');
})

 

2.jQuery中對AJAX操做的封裝函數之二——$.get

  用法：

       $.get( 'x.php' ,[data], function(txt, msg, xhr){  } )

 

       $.get( 'x.php' ,'uname=tom&age=20', function(txt, msg, xhr){  } )

       $.get( 'x.php' ,{uname:'tom', age:20} , function(txt, msg, xhr){  } )

  做用：

       建立XHR發起異步的GET請求，第二個參數是可選的請求數據(鍵值對形式或者對象形式)，獲取服務器端的響應消息，調用第三個回調函數（至關於以前成功異步請求，並對請求進行的的doResponse），在此回調函數中對響應主體進行處理。

 

 練習：頁面加載完成後，異步請求表格中的批量數據 

  (1)編寫SQL：數據庫-mymovie，表-movie

  (2)編寫PHP：movie_select_all.php，以JSON格式向客戶端返回全部的電影記錄 '[{},{},{}]'

  (3)編寫HTML：movie_select_all.html，當頁面加載完後，異步請求全部的電影記錄，拼接在TABLE中    $.get('x.php', doResponse)

 

 

jQuery中對AJAX操做的封裝函數之三——$.post

  用法：

       $.post( 'x.php' ,data, function(txt, msg, xhr){  } )

 

       $.post( 'x.php' ,'uname=tom&age=20', function(txt, msg, xhr){  } )

       $.post( 'x.php' ,{uname:'tom', age:20} , function(txt, msg, xhr){  } )

  做用：

       建立XHR發起異步的POST請求，第二個參數是必需的請求數據(鍵值對形式或者對象形式)，獲取服務器端的響應消息，調用第三個回調函數（至關於以前的doResponse），在此回調函數中對響應主體進行處理。

 

  練習：電影數據加載完成後，當用戶點擊某個電影的「刪除」，異步提交要刪除的影片編號，實現刪除功能

  步驟：

  (1)編寫SQL               

  (2)編寫PHP：movie_delete.php，接收客戶端提交的mid，執行刪除，從數據中刪除該電影，返回'{"msg":"succ","affectedRows":1}' 或 '{"msg":"err", "sql":"DELETE...."}'       

       提示：PHP中的關聯數組會被json_encode()編碼爲JSON對象

  (3)修改影片列表頁，點擊某個「刪除」，異步提交要刪除的影片編號，實現影片刪除    

       提示：爲DOM樹上後添加的元素綁定事件監聽必須用「事件代理」

 

4.jQuery中對AJAX操做的封裝函數之四——$.getScript

  用法：

       $.getScript( 'x.php' ,[data], [fn])

  做用：

       建立XHR發起異步的GET請求，第二個參數是可選的請求數據(鍵值對形式或者對象形式)，第三個參數，回調函數可選的，表示響應成功以後的回調。要求服務器端返回的必須是application/javascript類型的響應，該方法會自動調用eval(xhr.responseText)進行執行。

 

 

5. jQuery中對AJAX操做的封裝函數之五——$.getJSON

  用法：

       $.getJSON( 'x.php' ,[data],function(result, msg, xhr){  })

  做用：

       建立XHR發起異步的GET請求。要求服務器端返回的必須是application/json類型的響應，該方法會自動調用JSON.parse(xhr.responseText)進行解析，再調用第三個參數——響應成功的回調函數處理響應結果。

 

$.getJSON()不論響應消息內容類型聲明什麼，都會調用JSON.parse(xhr.responseText)

$.get()只有當響應消息內容類型聲明爲application/json，纔會調用JSON.parse(xhr.responseText)

 

  演示：頁面加載完成後，異步請求服務器端的實現了國際化的歡迎消息(i18n)

$.getScript()不論響應消息內容類型聲明什麼，都會調用eval(xhr.responseText)

$.get()只有當響應消息內容類型聲明爲application/javascript，纔會調用eval(xhr.responseText)

 

 

 jQuery中對AJAX操做的封裝函數之五——$.ajax —— 重點！

  用法：

       $.ajax( {

              type: 'GET',            //POST/PUT/DELETE/HEAD

              url: 'x.php',

              data: 'k=v'或{k:v}    //要提交的請求數據

              beforeSend: fn,      //請求發送以前的回調函數

              success: fn,            //響應成功的回調函數

              error: fn,               //響應失敗的回調函數

              complete: fn          //響應完成的回調函數-不論成敗

       } )

var xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){   if(xhr.readyState===4){       if(xhr.status===200){           success();       }else {           error();       }       complete();   } } xhr.open('GET','x.php?k=v', true) beforeSend(); xhr.send(null);

響應成功回調順序：  beforeSend  =>  success =>  complete

響應失敗回調順序：  beforeSend  =>  error =>  complete

 

  做用：

       此函數是jQuery中萬能的AJAX調用函數！前面5個方法都是該方法的簡化版本。

       建立XHR發起異步的GET請求。要求服務器端返回的必須是application/json類型的響應，該方法會自動調用JSON.parse(xhr.responseText)進行解析，再調用第三個參數——響應成功的回調函數處理響應結果。