jQuery.ajax使用方法

jQuery.ajax( options )

參數:

• options

傳回值:

• XMLHttpRequest

使用HTTP請求一個頁面。

這是jQuery的低級AJAX實現。要查看進階抽象，見$.set、$.post等，這些方法更易於理解和使用。但是功能上有限制(例如，沒有錯誤處理函數)。

警告：如果資料類型指定為"script"，那麼POST自動轉化為GET方法。(因為script會作為一個嵌入頁面的script標籤進行載入)

$.ajax()函數返回它建立的XMLHttpRequest對象。在大部分情況下，你不需要直接操作此對象。通常，這個XMLHttpRequest對象主要用於需要手動中斷XMLHttpRequest請求的時候。

注意：如果你指明了下面列出的資料類型，請確保服務端發送了正確的MIME響應類型(如. xml 的類型是 "text/xml")。錯誤的MIME類型能夠導致指令碼出現意想不到的問題。請查看AJAX的範例來瞭解資料類型的更多資訊。

$.ajax()函數需要一個參數，一個包含有鍵/值對的對象，用於初始化並操作請求對象。

在jQuery 1.2版本中，如果你指明了一個JSONP回呼函數，你就可以從其它的域中載入JSON類型的資料，寫法類似於 "myurl?callback=?" 。jQuery會自動調用正確的方法名稱來代替查詢字串，執行你指定的回呼函數。或者，你也可以指定jsonp的資料類型的回呼函數，此函數會自動添加到Ajax請求中。

參數選項:

async(true) 資料類型: Boolean

預設情況下，所有的請求都是非同步發送的(預設為true)。 如果需要發送同步請求, 設定選項為false。注意，同步請求可能會暫時的鎖定瀏覽器, 當請求啟用時不能進行任何操作。

beforeSend 資料類型: Function

一個預先處理函數用於在發送前修改XMLHttpRequest對象，設定自訂頭部等。 XMLHttpRequest作為惟一的參數被傳遞。這是一個 Ajax 事件。

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

cache(true) 資料類型: Boolean

jQuery 1.2中新添加的參數, 如果設為false，則會強制瀏覽器不緩衝請求的頁面。

complete 資料類型: Function

當請求完成時執行的函數(在成功或失敗之後執行)。這個函數有2個參數: XMLHttpRequest對象和一個描述HTTP相應的狀態字串。 這是一個 Ajax 事件。

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

contentType("application/x-www-form-urlencoded") 資料類型: String

發送到伺服器的資料的內容類型。預設是 "application/x-www-form-urlencoded", 適合大多數情況。

data 資料類型: Object,String

要發送給伺服器的資料。如果不是字串，那麼它會被轉化為一個查詢字串。在GET請求中它被添加到url的末尾。要防止這種自動轉化，請查看processData選項。 資料對象必須是一組鍵/值對。如果鍵對應的值是數組，jQuery會將其值賦給同一個鍵屬性。 例如 {foo:["bar1", "bar2"]} 變為 '&foo=bar1&foo=bar2'。

dataType( Intelligent Guess (xml or html)) 資料類型: String

期待由伺服器傳回值類型。如果沒有明確指定，jQuery會根據實際返回的MIME類型自動的將responseXML或responseText傳遞給success指定的回呼函數。有效類型(返回的類型的結果值會作為第一個參數傳遞給success指定的回呼函數)有：

• "xml": 返回一個可以由jQuery處理的XML文檔。
• "html": 返迴文本格式的HTML代碼。包括求值後的指令碼標記。
• "script": 將響應作為Javascript語句求值，並返回純文字。不緩衝此指令碼，除非設定了cache選項。設定為"script"類型會將post方法轉換為get方法。
• "json": 將響應作為JSON求值，並返回一個Javascript對象。
• "jsonp": 使用JSONP載入一個JSON代碼塊. 會在URL的末尾添加"?callback=?"來指明回呼函數。(jQuery 1.2以上的版本支援)
• "text": 文字格式設定的字串
  error 資料類型: Function
  請求失敗時執行的函數。函數具有3個參數: XMLHttpRequest對象,一個描述產生的錯誤類型和一個可選的異常對象, 如果有的化。 這是一個Ajax 事件。

  function (XMLHttpRequest, textStatus, errorThrown) {  // typically only one of textStatus or errorThrown   // will have info  this; // the options for this ajax request}

  global(true) 資料類型: Boolean
  是否為當前的請求觸發全域AJAX事件處理函數，預設值為true。設定為false可以防止觸發像ajaxStart或ajaxStop這樣的全域事件處理函數。這可以用於控制多個不同的Ajax事件。
  ifModified(false) 資料類型: Boolean
  只有響應自上次請求後被修改過才承認是成功的請求。是通過檢查頭部的Last-Modified值實現的。預設值為false，即忽略對頭部的檢查
  jsonp 資料類型: String
  在jsonp請求中重新設定回調的函數。這個值用於代替'callback=?'中的查詢字串。'callback=?'位於get請求中url的末尾或是post請求傳遞的資料中。因此設定 {jsonp:'onJsonPLoad'} 會將 'onJsonPLoad=?' 傳送給伺服器。
  processData(true) 資料類型: Boolean
  在預設的情況下，如果data選項傳進的資料是一個對象而不是字串，將會自動地被處理和轉換成一個查詢字串，以適應預設的content-type－－"application/x-www-form-urlencoded"。如果想發送DOMDocuments，就要把這個選項設定為false。
  success 資料類型: Function
  當請求成功時調用的函數。這個函數會得到二個參數：從伺服器返回的資料（根據“dataType”進行了格式化）和一個描述HTTP相應的狀態字串。這是一個 Ajax 事件。

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

  timeout 資料類型: Number
  如果通過$.ajaxSetup設定了一個全域timeout，那麼此函數使用一個局部timeout覆蓋了全域timeout(單位為毫秒)。例如，你可以設定比較長的延遲給一個特殊的請求，同時其他所有請求使用1秒的延遲。有關全域延遲，見$.ajaxTimeout()。
  type("GET") 資料類型: String
  請求的類型 ("POST" 或 "GET"), 預設是 "GET"。注意：其他的HTTP要求方法，如PUT和DELETE，在這裡也可以使用，當時它們並不被所有的瀏覽器支援。
  url(The current page) 資料類型: String
  請求發送的目標URL地址
  username 資料類型: String
  username可用於在響應一個HTTP串連時的認證請求。

執行個體

載入並執行一個JavaScript檔案。

$.ajax({  type: "GET",  url: "test.js",  dataType: "script"});

儲存資料到伺服器，完成後通知使用者。

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   } });

取得一個HTML頁面的最新版本。

$.ajax({  url: "test.html",  cache: false,  success: function(html){    $("#results").append(html);  }});

同步載入資料。在執行請求的時候阻塞瀏覽器。這是在保證資料的同步性比互動更重要的情況下的一種更好的方法。

var html = $.ajax({  url: "some.php",  async: false }).responseText;

向伺服器發送xml文檔資料。通過設定processData選項為false，將資料自動轉換為string的動作被禁止了。

var xmlDocument = [create xml document]; $.ajax({   url: "page.php",   processData: false,   data: xmlDocument,   success: handleResponse });

load( url, [data], [callback] )

參數:

• url (String): 裝入頁面的URL地址。
• params (Map): （可選）發送到服務端的鍵／值對參數。
• callback (Function): （可選） 當資料裝入完成時執行的函數.

  function (responseText, textStatus, XMLHttpRequest) {  this; // dom element}

傳回值:

• jQuery

裝入一個遠程HTML內容到一個DOM結點。 預設使用get方法發送請求，但如果指定了額外的參數，將會使用post方法發送請求。在 jQuery 1.2中，可以在URL參數中指定一個jQuery選取器，這會過濾返回的HTML文檔，只取得文檔中匹配選取器的元素。此文法類似於"url #some > selector"。

執行個體

載入文檔的sidebar的導航部分到一個無序列表中。

$("#links").load("/Main_Page #p-Getting-Started li");

將feeds.html檔案載入到id為feeds的div中。

$("#feeds").load("feeds.html");

同上，但是發送了附加的參數，並且在響應結束後執行一個自訂函數。

$("#feeds").load("feeds.php", {limit: 25}, function(){   alert("The last 25 entries in the feed have been loaded"); });

jQuery.get( url, [data], [callback] )

參數:

• url (String): 裝入頁面的URL地址
• Map(可選): （可選）發送到服務端的鍵／值對參數
• callback (Function): （可選） 當遠程頁面裝入完成時執行的函數

  function (data, textStatus) {  // data可以是xmlDoc, jsonObj, html, text, 等...  this; // the options for this ajax request}

傳回值:

• XMLHttpRequest

使用GET請求一個頁面。

這是向伺服器發送get請求的簡單方法。它可以指定一個回呼函數，在請求完成後執行(只有在請求成功時)。如果還需要設定error和success回呼函數，則需要使用$.ajax。

執行個體

請求test.php頁,忽略傳回值.

$.get("test.php");

請求test.php頁並發送附加資料(忽略傳回值).

$.get("test.php", { name: "John", time: "2pm" } );

顯示從test.php請求的傳回值(HTML 或 XML, 根據不同傳回值).

$.get("test.php", function(data){  alert("Data Loaded: " + data);});

顯示向test.cgi發送附加資料請求的傳回值 (HTML 或 XML, 根據不同傳回值).

$.get("test.cgi", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });

jQuery.getJSON( url, [data], [callback] )

參數:

• url (String): 裝入頁面的URL地址
• Map(可選): （可選）發送到服務端的鍵／值對參數
• callback (Function): （可選） 當資料裝入完成時執行的函數

  function (data, textStatus) {  // data will be a jsonObj  this; // the options for this ajax request}

傳回值:

• XMLHttpRequest

使用GET請求JSON資料。

在jQuery 1.2版本中，如果你指明了一個JSONP回呼函數，你就可以從其它的域中載入JSON類型的資料，寫法類似於 "myurl?callback=?" 。jQuery會自動調用正確的方法名稱來代替查詢字串，執行你指定的回呼函數。或者，你也可以指定jsonp的資料類型的回呼函數，此函數會自動添加到Ajax請求中。注意: 請記住, that lines after this function will be executed before callback.

執行個體

從Flickr JSONP API中載入最新的四幅貓的圖片

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",        function(data){          $.each(data.items, function(i,item){            $("<img/>").attr("src", item.media.m).appendTo("#images");            if ( i == 3 ) return false;          });        });

從test.js載入JSON資料， 從返回的JSON資料讀取name值。

$.getJSON("test.js", function(json){  alert("JSON Data: " + json.users[3].name);});

從test.js載入JSON資料， 傳遞一個附加參數，從返回的JSON資料讀取name值。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){  alert("JSON Data: " + json.users[3].name);});

顯示向test.php發送請求的傳回值 (HTML 或 XML, 根據不同傳回值).

$.getIfModified("test.php", function(data){  alert("Data Loaded: " + data);});

顯示向test.php發送請求的傳回值 (HTML 或 XML, 根據不同傳回值)，提供了一個附加的參數.

$.getIfModified("test.php", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });

列出從pages.php返回的查詢結果，將返回的數組轉化為一段HTML代碼。

var id=$("#id").attr("value");  $.getJSON("pages.php",{id:id},dates);function dates(datos){  $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);}

jQuery.getScript( url, [callback] )

參數:

• url (String): 裝入頁面的URL地址
• callback (Function): （可選） 當資料裝入完成時執行的函數

  function (data, textStatus) {  // data應該是javascript  this; // the options for this ajax request}

傳回值:

• XMLHttpRequest

使用GET請求JavaScript檔案並執行。

在jQuery 1.2前, getScript只能從頁面所在的主機載入指令碼，1.2中, 你可以從任何主機載入指令碼。警告: Safari 2 及其更老的版本不能在全域上下文中正確識別指令碼。如果你通過getScript載入函數，請保證設定一個延遲來執行這個指令碼。

執行個體

我們動態載入一個新的官方jQuery顏色動畫外掛程式，載入後綁定一些動畫效果到元素上。

$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){  $("#go").click(function(){    $(".block").animate( { backgroundColor: 'pink' }, 1000)      .animate( { backgroundColor: 'blue' }, 1000);  });});

載入test.js JavaScript檔案並執行。

$.getScript("test.js");

載入test.js JavaScript檔案並執行,當執行結束後顯示一條警告資訊。

$.getScript("test.js", function(){  alert("Script loaded and executed.");});

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

參數:

• url (String): 裝入頁面的URL地址
• Map(可選): （可選）發送到服務端的鍵／值對參數
• callback (Function): （可選） 當資料裝入完成時執行的函數

  function (data, textStatus) {  // data可能是 xmlDoc, jsonObj, html, text, 等...  this; // the options for this ajax request}

• String

  $.postJSON = function(url, data, callback) { $.post(url, data, callback, "json");};

傳回值:

• XMLHttpRequest

使用POST請求一個頁面。

這是向伺服器發送post請求的簡單方法。它可以指定一個回呼函數，在請求完成後執行(只有在請求成功時)。如果還需要設定error和success回呼函數，則需要使用$.ajax。

ajaxComplete( callback )

參數:

• callback (Function): 要執行的函數

  function (event, XMLHttpRequest, ajaxOptions) {  this; // dom element listening}

傳回值:

• jQuery

當一個AJAX請求結束後，執行一個函數。這是一個Ajax事件

執行個體

當AJAX請求完成時顯示一條資訊。

$("#msg").ajaxComplete(function(request, settings){   $(this).append("<li>Request Complete.</li>"); });

ajaxError( callback )

參數:

• callback (Function): 要執行的函數

  function (event, XMLHttpRequest, ajaxOptions, thrownError) {  // thrownError only passed if an error was caught  this; // dom element listening}

傳回值:

• jQuery

當一個AJAX請求失敗後，執行一個函數。這是一個Ajax事件.

執行個體

當AJAX請求錯誤時顯示一條資訊。

$("#msg").ajaxError(function(request, settings){   $(this).append("<li>Error requesting page " + settings.url + "</li>"); });

ajaxSend( callback )

參數:

• callback (Function): 要執行的函數

  function (event, XMLHttpRequest, ajaxOptions) {  this; // dom element listening}

傳回值:

• jQuery

在一個AJAX請求發送時，執行一個函數。這是一個Ajax事件.

執行個體

當AJAX請求發出後顯示一條資訊。

$("#msg").ajaxSend(function(evt, request, settings){   $(this).append("<li<Starting request at " + settings.url + "</li<"); });

ajaxStart( callback )

參數:

• callback (Function): 要執行的函數

  function () {  this; // dom element listening}

傳回值:

• jQuery

在一個AJAX請求開始但還沒有啟用時，執行一個函數。這是一個Ajax事件.

執行個體

當AJAX請求開始(並還沒有啟用時)顯示loading資訊。

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

ajaxStop( callback )

參數:

• callback (Function): 要執行的函數

  function () {  this; // dom element listening}

傳回值:

• jQuery

當所有的AJAX都停止時，執行一個函數。這是一個Ajax事件.

執行個體

當所有AJAX請求都停止時，隱藏loading資訊。

$("#loading").ajaxStop(function(){   $(this).hide(); });

ajaxSuccess( callback )

參數:

• callback (Function): 要執行的函數

  function (event, XMLHttpRequest, ajaxOptions) {  this; // dom element listening}

傳回值:

• jQuery

當一個AJAX請求成功完成後，執行一個函數。這是一個Ajax事件

執行個體

當AJAX請求成功完成時，顯示資訊。

$("#msg").ajaxSuccess(function(evt, request, settings){   $(this).append("<li>Successful Request!</li>"); });

jQuery.ajaxSetup( options )

參數:

• Options: 用於Ajax請求的鍵／值對

為所有的AJAX請求進行全域設定。查看$.ajax函數取得所有選項資訊。

執行個體

設定預設的全域AJAX請求選項。

$.ajaxSetup({  url: "/xmlhttp/",  global: false,  type: "POST"});$.ajax({ data: myData });

serialize( )

傳回值:

• jQuery

以名稱和值的方式串連一組input元素。傳回值類似於： single=Single2&multiple=Multiple&multiple=Multiple3&radio=radio2 。在jQuery 1.2中。serialize方法實現了正確表單元素序列，而不再需要外掛程式支援。

執行個體

串連表單元素的一組查詢字串，可用於發送Ajax請求。

function showValues() {      var str = $("form").serialize();      $("#results").text(str);    }    $(":checkbox, :radio").click(showValues);    $("select").change(showValues);    showValues();

serializeArray( )

傳回值:

• jQuery

串連所有的表單和表單元素(類似於.serialize()方法)，但是返回一個JSON資料格式。

執行個體

從form中取得一組值，顯示出來

function showValues() {      var fields = $(":input").serializeArray();      alert(fields);      $("#results").empty();      jQuery.each(fields, function(i, field){        $("#results").append(field.value + " ");      });    }    $(":checkbox, :radio").click(showValues);    $("select").change(showValues);    showValues();