自從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(){
        // 最後結果
    }
});