JQuery Ajax的非同步重新整理可實現html靜態頁面率先載入完畢,呈現給使用者,對提升使用者體驗很有幫助.本文舉一個小例子,在.net的MVC框架下面實現JQuery Ajax的非同步重新整理.

我們模擬一個場景,在頁面載入完畢後,通過Ajax獲取使用者的某些資訊,這些操作需要呼叫後臺介面查詢資料庫,往往耗時較長.因此這部分資料通過區域性重新整理來呈現.

1.首先在visual studio中建立MVC的.net工程.
2Model層定義實體類如下: 該實體表示模擬的使用者資訊

namespace AjaxStudy.Models
{
    public class UserInfo
    {
        public
 
 string UserId { get; set; }
        public string UserName { get; set; }
        public string Mobile { get; set; }
    }
}

1. Control層定義介面方法如下:其中利用Tread.Sleep(3000)休息3s,來模擬耗時操作.

        [HttpPost]
        public JsonResult GetUserInfo(string id)
        {
            Thread.Sleep(3000);
            UserInfo userInfo = new
 
 UserInfo();
            userInfo.UserId = id;
            userInfo.UserName = "AjaxJquery";
            userInfo.Mobile = "13816656565";
            return Json(new { IsSuccess = "1", userInfo });
        }

1. View層在預設頁面(預設頁面為Home/Index.cshtml,建立完專案後預設的)下面增加如下幾行.
   建立三個文字框,載入Jquery與getUserInfo.js,呼叫getUserInfo()方法.

<input id="ID" type="text" size="15" />
<input id="NAME" type="text" size="15" />
<input id="MOBILE" type="text" size="15" />


<script type="text/javascript" src="~/Content/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/getUserInfo.js"></script>
<script>
    getUserInfo();
</script>

5.getUserInfo.js內容如下:通過$.ajax提交請求到controller.得到Json返回結果呈現到文字框中.

function getUserInfo() {
    //alert('Test')
    $.ajax({
        url: "/Home/GetUserInfo",  //ajax請求地址
        type: "POST",//請求方式 "POST" 或 "GET"， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
        dataType: "json",    //根據返回資料型別可以有這些型別可選：xml html script json jsonp text
        //傳送到伺服器的資料，可以直接傳物件{a:0,b:1}，如果是get請求會自動拼接到url後面，如：&a=0&b=1
        //如果為陣列，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 "&foo=bar1&foo=bar2"。
        data: {id: "22"},
        success: function (result) {
            //this 呼叫本次AJAX請求時傳遞的options引數 ,如果設定context來改變了this，那這裡的this就是改變過的
            if (result.IsSuccess == "1") {
                //alert(result.userInfo.UserId);
                //alert(result.userInfo.UserName);
                //alert(result.userInfo.Mobile);
                var textId = $("#ID");
                var textId2 = $("#NAME");
                var textId3 = $("#MOBILE");
                textId.val(result.userInfo.UserId);
                textId2.val(result.userInfo.UserName);
                textId3.val(result.userInfo.Mobile);
                //document.getElementById("ID") = result.userInfo.UserId;
                //document.getElementById("NAME").textContent = result.userInfo.UserName;
                //document.getElementById("MOBILE").textContent = result.userInfo.Mobile;
            } else {
                alert("The result is failed!");
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("系統繁忙,請稍候");
        },
        //請求完成後回撥函式 (請求成功或失敗之後均呼叫)。引數： XMLHttpRequest 物件和一個描述成功請求型別的字串
        complete: function (XMLHttpRequest, textStatus) {
            //this 呼叫本次AJAX請求時傳遞的options引數
        },
        //一組數值的HTTP程式碼和函式物件，當響應時呼叫了相應的程式碼。例如，如果響應狀態是404，將觸發以下警報：
        statusCode: {
            404: function () {
                alert('404，頁面不存在');
            }
        }
    });
}

執行結果如下圖所示,可以看到紅色標註區域的靜態文字框同主頁一起載入,3秒之後,資料區域性刷新出來.