jquery中ajax事件詳解 （附示範代碼）

首先看個ajax請求執行個體：

<script src=\'#\'" type="text/javascript"></script>

<script>$(document).ready(function(){//ajax回呼函數 按以下順序執行          $('.log').ajaxStart(function() {        $(this).text('請求前執行ajaxStart，開始請求，Loading...');        alert('請求前執行ajaxStart，開始請求，Loading...');    });    $('.log').ajaxSend(function() {        $(this).text('Ajax請求即將發送ajaxSend，正在請求，載入中...）');        alert('Ajax請求即將發送ajaxSend，正在請求，載入中...）');    });    $('.log').ajaxSuccess(function() {        $(this).text('Ajax請求成功ajaxSuccess');        alert('Ajax請求成功ajaxSuccess');    });    $('.log').ajaxError(function() {        $(this).text('ajax請求失敗ajaxError');        alert('ajax請求失敗ajaxError');    });    $('.log').ajaxComplete(function() {        $(this).text('是否成功都會執行ajaxComplete');        alert('是否成功都會執行ajaxComplete');    });    $('.log').ajaxStop(function() {        $(this).text('Ajax請求完成ajaxStop');        alert('Ajax請求完成ajaxStop');    });          $('.trigger').click(function() {        $.get("sql.php",{"id":"123"},function(data,status){            if(status == "success"){                alert("外部內容載入成功！");                alert(data);            }            if(status == "error"){                alert("Error: "+xhr.status+": "+xhr.statusText);            }        });    });})</script>

<button class="trigger">觸發</button>

<div class="log"></div>

附：sql.php中代碼

<?php    if($_GET){        $id=$_GET['id'];        if( !empty($id) && $id=='123' ){            echo 1;//執行成功        }        else{            echo 0;//執行失敗        }    }?>

執行結果：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/1223553460-0.jpg" title="2013-11-28_105125.jpg" alt="105617217.jpg" />

注意：一個頁面只能用一次 以上回呼函數(怎麼區分呢？)。

<button class="trigger01">觸發</button>

<div class="log01"></div>

一，$.get(url,[data],[callback])

說明：url為請求地址，data為請求資料的列表(是可選的，也可以將要傳的參數寫在url裡面)，callback為請求成功後的回呼函數，該函數接受兩個參數，第一個為伺服器返回的資料，第二個參數為伺服器的狀態，是選擇性參數。而其中，伺服器返回資料的格式其實是字串形勢，並不是我們想要的json資料格式，在此引用只是為了對比說明。

$.get("data.php",$("#firstName.val()"),function(data){ 　　$("#getResponse").html(data); }//返回的data是字串類型);

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

說明：這個函數跟$.get()參數差不多，多了一個type參數，type為返回的資料類型，可以是html,xml,json等類型，如果我們設定這個參數為：json，那麼返回的格式則是json格式的，如果沒有設定，就 和$.get()返回的格式一樣，都是字串的。

$.post("emp.do?p=getAllEmp",{id:deptId,x:Math.random()},function(data){            var arry = eval("("+data+")");//去引號，將json字串去引號編程json類型數組，也可以在$.post函數後面加一個參數"json"，指定接收的資料為json類型的            for(var i=0;i<arry.length;i++){                var op = new Option(arry[i].empName,arry[i].empId);                document.getElementById("emp").options.add(op);            }        });

也可以寫成下面這樣，返回的就是json類型數組了，就不要難過去引號了，可以直接遍曆。

$.post("emp.do?p=getAllEmp",{id:deptId,x:Math.random()},function(arry){    for(var i=0;i<arry.length;i++){         var op = new Option(arry[i].empName,arry[i].empId);         document.getElementById("emp").options.add(op);    }},"json");

三，$.ajax(opiton)

說明：$.ajax()這個函數功能強大，可以對ajax進行許多精確的控制，需要詳細說明的請參照相關資料

$.ajax({　　url: "ajax/ajax_selectPicType.jsp",　　data:{Full:"fu"},　　type: "POST",　　dataType:'json',　　success:CallBack,　　error:function(er){　　BackErr(er);}});

四，$.getJSON(url,[data],[callback])

說明:$.getJSON(url,[data],[callback])函數沒有type參數，返回的是json類型的，不需要轉換。

$.getJSON("dep.do?p=getAllDep",{x:Math.random()},function(arry){     for(var i=0;i<arry.length;i++){         var op = new Option(arry[i].deptName,arry[i].deptId);         document.getElementById("dep").options.add(op);     }});

jquery的其他一些函數：

載入靜態頁面

load( url, [data], [callback] );
url (String) 請求的HTML頁的URL地址
data (Map)(選擇性參數) 發送至伺服器的 key/value 資料
callback (Callback) (選擇性參數) 請求完成時(不需要是success的)的回呼函數

load()方法可以輕鬆載入靜態頁面內容到指定jQuery對象。
$('#ajax-div').load('data.html');

這樣，data.html的內容將被載入到ID為ajax-div的DOM對象之內。你甚至可以通過制定ID來實現載入部分內容的Ajax操作，如：

$('#ajax-div').load('data.html#my-section');
實現GET和POST方法

get( url, [data], [callback] )
url (String) 發送請求的URL地址.
data (Map)(選擇性參數) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示，會做為QueryString附加到請求URL中
callback (Callback) (選擇性參數) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)

很顯然這是一個專門實現GET方式的函數，使用起來也相當的簡單
$.get('login.jsp', {
  id      : 'Robin',
  password: '123456',
  gate    : 'index'
 }, function(data, status) {
  //data為返回對象，status為請求的狀態
  alert(data);
  //此時假設伺服器指令碼會返回一段文字"你好，Robin！"，
那麼瀏覽器就會彈出對話方塊顯示該段文字
  alert(status);
  //結果為success, error等等，但這裡是成功時才能啟動並執行函數
 });

post( url, [data], [callback], [type] )

url (String) 發送請求的URL地址.
data (Map)(選擇性參數) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示
callback (Callback) (選擇性參數) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)
type (String) (選擇性參數) 請求資料的類型，xml,text,json等

同樣是jQuery提供的一個簡便函數，其實用法

$.post('regsiter.jsp', {
  id:'Robin',
  password: '123456',
  type:'user'
 },function(data, status) {
  alert(data);
 }, "json");

事件驅動的指令碼載入函數：getScript()

getScript( url, [callback] )
url (String) 待載入 JS 檔案地址
callback (Function) (可選) 成功載入後回呼函數

getScript()函數可以遠程載入JavaScript指令碼並且執行。這個函數可以跨 域載入JS檔案神奇……？！）。這個函數的意義是巨大 的，它可以很大程度的縮減頁面初次載入的代碼量，因為你可以根據使用者的互動來載入相應的JS檔案，而不必在頁面初始化的時候全部載入。

$.getScript('ajaxEvent.js', function() {
  alert("Scripts Loaded!");
  //載入ajaxEvent.js，並且在成功載入後顯示對話方塊提示。
 });

構建資料通訊的橋樑：getJSON()

getJSON(url,[data],[callback])
url (String) 發送請求地址
data (Map) (可選) 待發送 Key/value 參數
callback (Function) (可選) 載入成功時回呼函數。

JSON是一種理想的資料轉送格式，它能夠很好的融合與JavaScript或其他宿主語 言，並且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接發送”裸體”資料，在結構上更為合理，也更為安全。至於jQuery的getJSON()函數，只是設定了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的，相比get()、post()有一定優勢。另外這個函數可以通過把請求url寫 成”myurl?callback=X”這種格式，讓程式執行回呼函數X。

$.getJSON('feed.jsp',{
  request: images,
  id:      001,
  size:    large
  }, function(json) {
   alert(json.images[0].link);
   //此處json就是遠程傳回的json對象，假設其格式如下：
   //{'images' : [
   // {link: images/001.jpg, x :100, y : 100},
   // {link: images/002.jpg, x : 200, y 200:}
   //]};
  }
);

更底層的ajax()函數
雖然get()和post()函數非常簡潔易用，但是對於更複雜的一些設計需求還是無法實現，比如在ajax發送的不同時段做出不同的動作等。jQuery提供一個更為具體的函數：ajax()。

ajax( options )
ajax()提供了一大票參數，所以可以實現相當複雜的功能。

參數名 類型 描述
url String (預設: 當前頁地址) 發送請求的地址。
type String (預設: “GET”) 請求方式 (“POST” 或 “GET”)， 預設為 “GET”。
注意：其它 HTTP 要求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
timeout Number 佈建要求逾時時間毫秒）。此設定將覆蓋全域設定。
async Boolean (預設: true) 預設設定下，所有請求均為非同步請求。
如果需要發送同步請求，請將此選項設定為 false。
注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
beforeSend Function 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自訂 HTTP 頭。

XMLHttpRequest 對象是唯一的參數。

function (XMLHttpRequest) {
this; // the options for this ajax request
}

cache Boolean (預設: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器緩衝中載入請求資訊。
complete Function 請求完成後回呼函數 (請求成功或失敗時均調用)。

參數： XMLHttpRequest 對象，成功資訊字串。

function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}

contentType String (預設: “application/x-www-form-urlencoded”) 發送資訊至伺服器時內容編碼類別型。預設值適合大多數應用場合。
data Object,
String 發送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。
查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。
如果為數組，jQuery 將自動為不同值對應同一個名稱。
如 {foo:["bar1", "bar2"]} 轉換為 ‘&foo=bar1&foo=bar2′。
dataType String 預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊
返回 responseXML 或 responseText，並作為回呼函數參數傳遞，可用值:

“xml”: 返回 XML 文檔，可用 jQuery 處理。

“html”: 返回純文字 HTML 資訊；包含 script 元素。

“script”: 返回純文字 JavaScript 代碼。不會自動緩衝結果。

“json”: 返回 JSON 資料 。

“jsonp”: JSONP 格式。使用 JSONP 形式調用函數時，

如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。

error Function (預設: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。

這個方法有三個參數：XMLHttpRequest 對象，錯誤資訊，可能）捕獲的錯誤對象。

function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情況下textStatus和errorThown只有其中一個有值
this; // the options for this ajax request
}

global Boolean (預設: true) 是否觸發全域 AJAX 事件。設定為 false 將不會觸發全域 AJAX 事件，

如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件

ifModified Boolean (預設: false) 僅在伺服器資料改變時擷取新資料。

使用 HTTP 包 Last-Modified 頭資訊判斷。

processData Boolean (預設: true) 預設情況下，發送的資料將被轉換為對象(技術上講並非字串)

以配合預設內容類型 “application/x-www-form-urlencoded”。

如果要發送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。

success Function 請求成功後回呼函數。這個方法有兩個參數：伺服器返回資料，返回狀態

function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this;
// the options for this ajax request
}

你 可以指定xml、script、html、json作為其資料類型，可以為beforeSend、error、sucess、complete等狀態設定 處理函數，眾多其它參數也可以訂完完全全定義使用者的Ajax體驗。下面的例子中，我們用ajax()來調用一個XML文檔：

$.ajax({
   url: 'doc.xml',
   type: 'GET',
   dataType: 'xml',
   timeout: 1000,
   error: function(){
       alert('Error loading XML document');
   },
   success: function(xml){
       alert(xml);
 //此處xml就是XML的jQuery對象了，你可以用find()、next()或XPath等方法在裡面尋找節點，
和用jQuery操作HTML對象沒有區別
   }
});

進一步瞭解AJAX事件
前面討論的一些方法都有自己的事件處理機制，從頁面整體來說，都只能說是局部函數。jQuery提供了AJAX全域函數的定義，以滿足特殊的需求。下面是jQuery提供的所有函數按照觸發順序排列如下）：

ajaxStart
(全域事件) 開始新的Ajax請求，並且此時沒有其他ajax請求進行中
beforeSend
(局部事件) 當一個Ajax請求開始時觸發。如果需要，你可以在這裡設定XMLHttpRequest對象
ajaxSend
(全域事件) 請求開始前觸發的全域事件
success
(局部事件) 請求成功時觸發。即伺服器沒有返回錯誤，返回的資料也沒有錯誤
ajaxSuccess
全域事件全域的請求成功
error
(局部事件) 僅當發生錯誤時觸發。你無法同時執行success和error兩個回呼函數
ajaxError
全域事件全域的發生錯誤時觸發
complete
(局部事件) 不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發這個事件
ajaxComplete
全域事件全域的請求完成時觸發
ajaxStop
(全域事件) 當沒有Ajax進行中中的時候，觸發
局部事件在之前的函數中都有介紹，我們主要來看看全域事件。對某個對象進行全域事件監聽，那麼全域中的AJAX動作，都會對其產生影響。比如，當頁面在進行AJAX操作時，ID為”loading”的DIV就顯示出來：

$("#loading").ajaxStart(function(){   $(this).show(); });

全域事件也可以協助你編寫全域的錯誤相應和成功相應，而不需要為每個AJAX請求獨立設定。有必要指出，全域事件的參數是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三個參數。第一個參數即事件本身；第二個是XHR對象；第三個是你傳遞的ajax參數對象。在一個對象裡顯示全域的AJAX情況：

$("#msg").beforeSend(function(e,xhr,o) {      $(this).html("正在請求"+o.url); });$("#msg").ajaxSuccess(function(e,xhr,o) {      $(this).html(o.url+"請求成功"); });$("#msg").ajaxError(function(e,xhr,o) {      $(this).html(o.url+"請求失敗");});

很顯然，第三個參數也可以協助你傳遞你在AJAX事件裡加入的自訂參數。 在單個AJAX請求時，你可以將global的值設為false，以將此請求獨立於AJAX的全域事件。

$.ajax({
  url: "request.jsp",
  global: false,
  // 禁用全域Ajax事件.
});

如果你想為全域AJAX設定參數，你會用上ajaxSetup()函數。例如，將所有AJAX請求都傳遞到request.php，；禁用全域方法；強制用POST方法傳遞：

$.ajaxSetup({
 url: "request.jsp",
 global: false,
 type: "POST"
});

本文出自 “PHPer許琴-專註於PHP技術” 部落格，請務必保留此出處http://xuqin.blog.51cto.com/5183168/1332749