ASP.NET MVC Framework - AJAX

AJAX

AJAX，Asynchronous JavaScript and XML
一種非同步的技術

以此圖做為範例解釋

圖片來源

Classic Web Application Model

左邊是傳統 HTTP 的行為模式，Browser Client 發出 HTTP 協定請求給 Web Server
而 Web Server 將完整的結果例如 HTML + CSS + JavaScript 回傳給 Browser Client
但可能因為要傳輸的資料較多，封包就會比較大

AJAX Web Application Model

右邊是 AJAX 的模式，Browser Client 利用 JavaScript/jQuery Call 發出一個 AJAX 的請求給 Web Server
而 Web Server 僅會以 XML Data 回傳純 Data 的部分，不會把整個頁面都拋給 Client，資料量較小

一個簡單的辨別 Classic Web Application Model 和 AJAX Web Application Model 的方式

如果在頁面載入時，有一瞬間會閃一下全白的，大多是 Classic Web Application Model
若是 AJAX Web Application Model，頂多會停在頁面轉轉轉

AJAX GET

可以在 JavaScript 中吃參數傳給 Controller

$(document).ready(function(){
    $("#btnajaxSearch").click(function(e){
        e.preventDefault();

        $.ajax({
            type: "GET",
            url: "/Book/AjaxGet?arg=123",
            dataType: "json",
            success: function(response){
                console.log(response);
            }
        });
    });
});

在 Controller 接收來自 JavaScript 的傳值

[HttpGet()]
public JsonResult AjaxGet(string arg){
    Models.BookService service = new Models.BookService();
    return this.Json(service.GetBookByCondition(), JsonRequestBehavior.AllowGet);
}

AJAX Post

在 Controller 裡可以這樣寫

[HttpPost()]
public JsonResult AjaxPost(Models.AjaxPostArg arg)
{
    List<SelectListItem> result = new List<SelectListItem>();
    result.Add(new SelectListItem() {Value = "1", Text="Admin"});
    result.Add(new SelectListItem() {Value = "2", Text="Test"});

    return this.Json(result)
}

在 JavaScript 裡可以用這樣的方式寫

$('#btnAjaxPost').click(function(e){
    e.preventDefault();
    var postBody = {
        "1" : "Hello",
        "2" : "World"
    }

    $.ajax({
        type: "POST",
        url: "/Default/AjaxPost",
        data: postBody,
        success: function(response){
            console.log(response);
        }
        error: function(error){
            console.log(error);
        }
    })
})

XHR

因為內容較多，另寫了一篇文章，可參考這邊：ASP.NET MVC Framework - XHR