自從jQuery 提供Ajax 非同步請求/ 處理的機制,網頁前端的處理就越來越便利與多元化。
什麼是Ajax的?
Ajax 是A synchronous J avaScript a nd X ML的縮寫,是一種不需要重新整理頁面,透過JavaScript來與伺服器交換資料、更新網頁內容的技術。目的在於改善使用者的操作介面,提昇流暢度。
$.ajax({ /* 參數型態: Boolean 說明: 是否啟用非同步方法 true: 非同步,不用等$.ajax(){...} 執行完就會直接執行主程式 false: 同步, 必須等$.ajax(){...} 執行完才會繼續執行主程式 預設值: true */ async : true, /* 參數型態: Boolean 說明: 1.2版加入的新功能,如果發現瀏覽器一直抓到舊資料,設定成flase就不會從瀏覽器中抓cache住的舊資料 預設值: true */ cache : false, /* 參數型態: String 說明: 傳送資料至Server的編碼類型 預設值: application/x-www-form-urlencoded; charset=UTF-8 */ contentType : "application/x-www-form-urlencoded; charset=UTF-8", /* 參數型態: Boolean 說明: 是否觸發全域Ajax事件 預設值: true */ global : true, /* 參數型態: Boolean 說明: 由Last-Modified header判斷,僅在Server更新文件時才下載 預設值: false */ ifModified : false, /* 參數型態: Boolean 說明: 1.5版加入的新功能,是否自動將data轉為query string 預設值: true */ processData : true, /* 參數型態: Boolean 說明: 1.5版加入的新功能,跨網域 data type必須設定成 'jsonp' 預設值: false */ crossDomain: false, /* 參數型態: String 說明: 指定要進行呼叫的路徑,MVC為「/Controller/method」, WebForm為「method.php」 預設值: false */ url: "/Controller/method", /* 參數型態: Object, String 說明: 傳送至Server的資料,會自動轉為query string的型式 如果是GET請求還會幫你附加到URL 可用processData選項禁止此自動轉換,物件型式則為一Key/Value pairs 傳送表單值方法: 1.「{ 後端方法名稱: HTML input name名稱} 2. serialize() 序列化表單 input 內容為「name1=value1&name2=value3···」格式的字串 若 HTML input 的 name 與後端 Class Model 名稱相同,會自動 Mapping 值 3. serializeArray() 序列化表單 input 內容為 JSON 結構資料 預設值: 無 */ data: { UserName: UserName, PassWord: PassWord }, /* 參數型態: String [POST/GET] 說明: 請求方式 預設值: GET */ type:"POST", /* 參數型態: String 說明: 預期Server傳回的資料類型,可選的資料類型有: 1. xml:傳回可用jQuery處理的XML 2. html:傳回HTML,包含jQuery會自動幫你處理的script tags。 3. script:傳回可執行的JavaScript。(script不會被自動cache,除非cache設為true) 4. json:傳回JSON 5. jsonp:在URL加上?callback=?參數,並在Server端配合送回此jsonp callback。(JSONP?) 6. text:傳回純文字字串 預設值: jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback */ dataType:'text', /* 參數型態: Function 說明: 過濾Server回傳的資料,函式中第一個參數為資料,第二個則為dataType 預設值: 無 */ dataFilter: function(data, type){ // 自訂實作方法 }, /* 參數型態: Function 說明: 發送請求之前事件,在此函式中return flase可取消Ajax request 預設值: 無 */ beforeSend: function(){ // 自訂實作方法 }, /* 參數型態: Function 說明: 請求成功時執行函式,資料可以是: xmlDoc, jsonObj, html, text, etc... 預設值: 無 */ success: function(data, textStatus){ // 自訂實作方法 }, /* 參數型態: Function 說明: 請求發生錯誤時執行函式,通常textStatus或errorThrown只有一個有值 預設值: 無 */ error:function(XMLHttpRequest, textStatus, errorThrown){ // 自訂實作方法 }, /* 參數型態: Function 說明: 請求完成時執行的函式,(不論結果是success或error) 都會進入此函式 預設值: 無 */ complete: function(){ // 自訂實作方法 } });
jQuery Ajax 官方說明文件
http://api.jquery.com/jquery.ajax/
較常運用簡易範例
$.ajax({ url: "/Controller/method", data: $("#form").serialize(), type:"POST", success: function(data){ // 後端方法回傳結果 }, complete: function(){ // 最後結果 } });