Ajax 簡單的用法

jQuery 將 jQuery.ajax (最底層的) 包裝成下面幾個常用的簡單函式來作 Ajax Request；

但是如果你有更複雜的使用需求，還是要用到稍後會提到的 jQuery.ajax。

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

load 函式 － 用來動態載入 HTML 文件並把它插入 DOM 中。此函式預設是以 GET 的方式來發送請求，但是如果有設參數 data 則會自動轉為 POST ；對於 url 參數我們可以加上 Selector 來篩選被載入的 HTML，即將 URL 參數的型式寫如「url selector」。
函式說明：
參數 型別 說明
url String 指定要進行呼叫的位址
data Map 要傳給server的Key/value值對
callback Callback Ajax 請求完成時(不需要是success)呼叫的callback
語法範例：
$("#container").load("http://domain/path/something.html selectors",
  function (responseText, textStatus, XMLHttpRequest){
    this;
 ······
});
參數說明：
this：DOM元素，即$("#container")[0] 
responseText：請求的文件內容
textStatus：請求狀態 (success、error)
XMLHttpRequest：XMLHttpRequest Object
jQuery.get(url, [data], [callback], [type])

jQuery.get 函式 － 一個簡單的 HTTP GET 不同步請求函式，若想在出錯時 (error) 能執行一些函式，那你得使用 $.ajax。
函式說明：
參數 型別 說明
url String 指定要進行呼叫的位址
data Map 要傳給server的Key/value值對
callback Callback Ajax 請求完成時(必需是success)呼叫的callback
type String 返回的資料類型
"xml", "html", "script", "json", "jsonp", "text"
語法範例：
$.get("something.html", {var1:"val1",var2:"val2"}, function (data,textStatus){
    this;
 ······
});
語法說明：
this：指向此Ajax請求的options 
data：請求的文件內容
textStatus：請求狀態 (success、error)，只有success
jQuery.post(url, [data], [callback], [type])

jQuery.get 函式 － 一個簡單的 HTTP POST 不同步請求函式，若想在出錯時 (error) 能執行一些函式，那你得使用 $.ajax。
函式說明：
參數 型別 說明
url String 指定要進行呼叫的位址
data Map 要傳給server的Key/value值對
callback Callback Ajax 請求完成時(必需是success)呼叫的callback
type String 返回的資料類型
"xml", "html", "script", "json", "jsonp", "text"
語法範例：(取得一JSON內容文件，test.php)
<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>
jQuery Codes：
$.post("test.php",{func:"getNameAndTime"},
  function(data){
    alert(data.name); // John
    console.log(data.time); //  2pm
  }, "json");
語法說明：
同jQuery.get
jQuery.getScript(url, [callback])

透過 HTTP GET 的方式載入並執行一份 JavaScript。在 jQuery 1.2 版之後開始能跨網域請求；1.2 版前只能在同網域下。另一方面，Safari 2- 不能在全域同步執行程式碼，透過 getScript 載入的腳本需要延時執行。
函式說明：
參數 型別 說明
url String 指定要進行呼叫的位址
callback Callback Ajax 請求完成時(必需是success)呼叫的callback
語法範例：
$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});
參數說明：
callback：
function (data, textStatus) {
  // 返回的 javascript
  this; // the options for this ajax request
}
jQuery.getJSON(url, [data], [callback])

透過 HTTP GET 的方式載入 JSON data。在 jQuery 1.2 版之後開始能跨網域請求；1.2 版前只能在同網域下。若要使用 JSONP，你需要在 URL 加上「myurl?callback=?」(也可以不叫做callback)，當送出請求時，回呼函式名稱「問號?」會被jQuery自動取代為一個亂數的函數名稱(如callback=jsonp1225116612487)，在 server 這邊你就可以抓 callback 的值來送回對應的 JSON 給 browser 來執行。
函式說明：
參數 型別 說明
url String 指定要進行呼叫的位址
data Map 要傳給server的Key/value值對
callback Function Ajax 請求完成時(必需是success)呼叫的callback
語法範例：
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

參數說明：
callback：
function (data, textStatus) {
  // data 是一個 json 物件
  this; // the options for this ajax request
} 
jQuery Ajax 事件 (Events)

你可以設定在 Ajax 請求過程中觸發 jQuery 自定義的一些不同的事件，共分為兩大類 － 「全域事件」與「局部事件」。
局部事件 (Local Events)

局部事件就是在 $.ajax 物件 (稍後談到) 裡面定義到的事件，如：
$.ajax({
 beforeSend: function(){
   // beforeSend事件發生時的處理函式
 },
 complete: function(){
   // complete事件發生時的處理函式
 }
 // ...
});
全域事件 (Global Events)

全域事件是你可以在任何元素上綁定 Ajax Global Events，而當每次有 Ajax 請求時 jQuery 就會去適時地去觸發這些事件，如：
$("#loading").bind("ajaxSend", function(){
  $(this).show();
}).bind("ajaxComplete", function(){
  $(this).hide();
});
所有的 jQuery Ajax 事件列表

ajaxStart (Global Event)
一個 Ajax 請求產生且沒其它請求正在運行時
beforeSend (Local Event)
Ajax 請求發出之前
ajaxSend (Global Event)
同上 
success (Local Event)
Ajax 請求成功時 (沒任何 error) 
ajaxSuccess (Global Event)
同上
error (Local Event)
Ajax 請求發生錯誤時 (Ajax 請求不是 success，就是 error，沒都有的情況)
ajaxError (Global Event)
同上
complete (Local Event)
不論 Ajax 請求是 success 或是 error，都會觸發 complete 事件
ajaxComplete (Global Event)
同上
ajaxStop (Global Event)
沒有任何的 Ajax 請求正在運行時
事件觸發的順序：
ajaxStart ? ajaxSend ? ajaxSuccess or ajaxError ? ajaxComplete ? ajaxStop

jQuery.ajax(options)

這是 jQuery 最底層的 Ajax 物件，而上面提到的都是由 $.ajax 包成的簡單應用 ($.get、$.post等)。$.ajax 只有一個參數 － 一個包含初始化及處理 Ajax request 的 key/value pairs 物件，詳細參數選項 (Options) 如下所列：
參數名稱 型別 預設值 說明
async Boolean true 是否同部請求
beforeSend Function － 發送請求之前可在此修改XMLHttpRequest物件，如添加header等，你可以在此函式中return flase取消Ajax request。
function (XMLHttpRequest) { this; // the options for this ajax request }
cache Boolean true
false (dataType "script") 1.2版加入的新功能，設定成flase就不會從瀏覽器中抓cache住的舊資料。
complete Function － 請求完成時執行的函式(不論結果是success或error)。
function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType String application/x-www-form-urlencoded 傳送資料至Server的編碼類型
data Object,
String － 傳送至Server的資料，會自動轉為query string的型式，如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。
dataFilter Function － 過濾Server回傳的資料。函式中第一個參數為資料，第二個則為dataType。
function (data, type) {
......
return data;
}
dataType String 自動判斷 (xml or html) 預期Server傳回的資料類型，如果沒指定，jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。可選的資料類型有：
xml：
傳回可用jQuery處理的XML
html：
傳回HTML，包含jQuery會自動幫你處理的script tags。
script：
傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true)
json：
傳回JSON
jsonp：
在URL加上?callback=?參數，並在Server端配合送回此jsonp callback。(JSONP?)
text：
傳回純文字字串
error Function － 請求發生錯誤時執行函式。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常textStatus或errorThrown只有一個有值
this;// the options for this ajax request
}
global Boolean true 設定是否觸發全域Ajax事件。
ifModified Boolean false 由Last-Modified header判斷，僅在Server更新文件時才下載。
processData Boolean true 設定是否自動將data轉為query string。
success Function － 請求成功時執行函式。
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc... 
this; // the options for this ajax request 
}
url String 目前URL 指定要進行呼叫的位址
type String GET 請求方式，POST/GET。
若有指定dataType選項，請確定Server會傳回正確的MIME訊息 (如xml文件為"text/xml"))，錯誤的MIME訊息將會導致不可預期的錯誤。
若指定dataType選項為script，所有跨網域的POST請求都會被轉成GET，因為jQuery是利用script tag來下載。
jQuery 1.2版時，你可以跨網域下載JSON資料，需將dataType設為JSONP，這時jQuery會幫你在URL參數自動加上"callback=?"
(你也可以自己加，也可以不叫做callback)，當送出請求時，回呼函式名稱「問號?」會被jQuery自動取代為一個亂數的函數名稱(如callback=jsonp1225116612487)，
但你不用理它如何運作，只需直接使用回傳的JSON就行了。如你只需會：
...
success: function(data) {
  $('#show').html(data.sth);
  ...
}
...
例. 下載並執行 JavaScript 文件：
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});
例. 儲存資料到 Server，並通知使用者已儲存：
$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

其它函式

用來設定預設參數與序列化資料的函式。
jQuery.ajaxSetup(options)

預設 AJAX requests 的參數，範例如下：
$.ajaxSetup({
  url: "/xmlhttp/", //預設URL為/xmlhttp/
  global: false,  //禁止觸發全域Ajax事件
  type: "POST"  //預設採POST傳送
});
$.ajax({ data: myData }); //沒設定的選項將採預設值
serialize()

序列化表單 input 內容為「name1=value1&name2=value3···」格式的字串。例：
var str = $("form").serialize();
serializeArray()

序列化表單 input 內容為 JSON 結構資料。