一、AJAX簡介

什麼是Ajax

Asynchronous JavaScript and XML (JavaScript執行異步網絡請求)
如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊“Submit”按鈕，表單開始提交，瀏覽器就會刷新頁面，然後在新頁面裏告訴你操作是成功了還是失敗了。如果不幸由於網絡太慢或者其他原因，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應一個頁面。
如果要讓用戶留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到數據後，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷地更新。
最早大規模使用AJAX的就是Gmail，Gmail的頁面在首次加載後，剩下的所有數據都依賴於AJAX來更新。

Ajax的應用場景

分析目前的網站的註冊、分頁等功能。例如註冊有一個功能是驗證ID或者手機號是否已經註冊過的這個功能。
按照之前的技術嘗試實現，發現必須要通過提交整個表單，訪問後臺服務器，做出驗證，導致頁面刷新，這樣降低網站的效率
而Ajax技術就是爲了解決這個問題，需要的是頁面無刷新訪問服務器

二、Ajax的JS實現

用JavaScript寫一個完整的AJAX代碼並不複雜，但是需要注意：AJAX請求是異步執行的，也就是說，要通過回調函數獲得響應。
在現代瀏覽器上寫AJAX主要依靠XMLHttpRequest這個JS對象實現

window.onload = function () {
var txtckn = this.document.getElementById("ckn");
var txtName = this.document.getElementById("txtName");
//當文本框失去焦點，開始使用Ajax驗證輸入的姓名能夠繼續註冊
txtName.onblur = function () {
// 【1】新建Ajax核心對象XMLHttpRequest
var request = null;
try
{
    //Firefox, Opera8.0+, Safari
    request=new XMLHttpRequest();
}
catch (e)
{
      try
      {
          // Internet Explorer
      	  request=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
         {
             //最低版本的IE瀏覽器支持的Ajax對象
            request=new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e)
         {
         	alert("您的瀏覽器不支持AJAX！");
         	return false;
         }
   }
}
//【2】當Ajax對象狀態發生變化時觸發事件
request.onreadystatechange = function (data) {
        //【3】當Ajax對象的readyState == 4證明請求已完成
        if (request.readyState == 4) {
            //【4】當Ajax對象的status==200證明針對請求的響應是成功
            if (request.status==200) {
                //【5】針對響應結果做出新的處理
                if (request.responseText=="True") {
                   txtckn.innerText = "姓名可以使用！";
                }
                else {
                    txtckn.innerText = "該姓名已被註冊！";
                    txtName.focus();
                 }
              }
           }
        }
   var uname = this.value;
   //【6】發送請求，指定請求的方式是post，請求的目標源是Manager控制器中的CheckName動作方法
   request.open("post", "CheckName");
   //【7】如果這個Ajax請求是post請求那麼向傳遞參數的話必須聲明這個請求頭，如果這個Ajax請求是get請求的話那麼參數直接以問號方式寫在open的URL地址中，get傳遞不需要設置這個報文頭
   request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //【8】開始進行發送請求，post請求的話參數通過此處傳遞
    request.send( "name="+uname);
   }
}

針對於Ajax請求的處理在服務器中的處理代碼

public class ManagerController : Controller
{
      public bool CheckName(string name)
     {
       UserServer server = new UserServer();
       //再判斷姓名是否已經被註冊過
       if (server.IsHave(name))
       {
          //註冊
          return true;
        }
        else
        {
          //姓名已被註冊
          return  false;
         }
   }
}

三、Ajax涉及的內容

動作方法處理Ajax

職責一：接收請求的數據(和非Ajax一樣)
職責二：返回客戶端需要的數據(純文本，JSON，HTML，其他)

返回JSON數據

使用場合

客戶端需要複雜結構的數據，比如一個集合，這個時候可以使用JSON格式和XML格式
對於ASP.NET MVC中，可以輕鬆的藉助控制器方法輸出JSON格式數據

認識JSON格式數據

JSON(JavaScript Object Notation)是一種輕量級的數據交換格式
JSON採用完全獨立於語言的文本格式，是理想的數據交換語言，易於編寫和閱讀，同時也易於機器解析和生成(方便網絡傳輸，傳輸速度快)

JSON和XML數據比較

XML格式數據

<UserList>
    <UserInfor>
        <Id>1</Id>
        <Name>張三</Name>
        <Sex>男</Sex>
        <Age>23</Age>
        <Pwd>123</Pwd>
    </UserInfor>
    <UserInfor>
        <Id>2</Id>
        <Name>李四</Name>
        <Sex>女</Sex>
        <Age>23</Age>
        <Pwd>123</Pwd>
    </UserInfor>
    ...
</UserList>

JSON格式數據

{
 "UserList":[
 {"Id":"1","Name":"張三","Sex":"男","Age":"23","Pwd":"123"},
 {"Id":"2","Name":"李四","Sex":"女","Age":"23","Pwd":"123"},
 ...
 ]
}

XML的優缺點

XML的優點

格式統一，符合標準
容易與其他系統進行遠程交互，數據共享比較方便。

XML的缺點

XML文件龐大，文件格式複雜，傳輸佔帶寬；
服務器端和客戶端都需要花費大量代碼來解析XML，導致服務器端和客戶端代碼變得異常複雜且不易維護；
客戶端不同瀏覽器之間解析XML的方式不一致，需要重複編寫很多代碼；
服務器端和客戶端解析XML花費較多的資源和時間。

JSON的優缺點

JSON的優點:

1.數據格式比較簡單，易於讀寫，格式都是壓縮的，佔用帶寬小；
2.易於解析，客戶端JavaScript可以簡單的通過eval()進行JSON數據的讀取；
3.支持多種語言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服務器端語言，便於服務器端的解析；
4.在PHP世界，已經有PHP-JSON和JSON-PHP出現了，偏於PHP序列化後的程序直接調用，PHP服務器端的對象、數組等能直接生成JSON格式，便於客戶端的訪問提取；
5.因爲JSON格式能直接爲服務器端代碼使用，大大簡化了服務器端和客戶端的代碼開發量，且完成任務不變，並且易於維護。

JSON的缺點:

1.沒有XML格式這麼推廣的深入人心和喜用廣泛，沒有XML那麼通用性；
2.JSON格式目前在Web Service中推廣還屬於初級階段。

JSON的語法規則

1.數據在“名稱/值”對中
2.數據由“逗號”分割
3.“花括號”保存對象
4.“方塊號”保存數組

四、Ajax的JQ實現

<script src="~/Scripts/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //get方式的Ajax請求
                //$.get();
                //post方式的Ajax請求
                //$.post();

                $(".new").remove();            
                var sex = $("input:checked").val();
                //回調函數
                $.post("GetUserList", { "Sex": sex }, function (data, status) {
                    //data參數就是Ajax請求之後響應的數據
                    var list = $.parseJSON(data);
                    //遍歷集合顯示數據
                    for (var i = 0; i < list.length; i++) {
                        var tr = "<tr class='new'><td> " + list[i].Id + "</td><td>" + list[i].Name + "</td><td>" + list[i].Sex + "</td><td>" + list[i].Age + "</td><td>" + list[i].Tel + "</td><td>" + list[i].Pwd + "</td></tr >";
                        $("#tb").append(tr);
                    }
                });
            });
        });
    </script>

//JSON格式數據必備命名空間
using System.Web.Script.Serialization;
public ActionResult GetUserList(string Sex)
        {
            //【1】先準備數據
            UserServer server = new UserServer();
            List<UserInfor> list = server.GetUserInforsBySex(Sex);
            //【2】JSON格式轉換
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            //將當前的List集合轉成字符串(JSON格式)
            string stringList = serializer.Serialize(list);
            //【3】返回JSON格式數據
            return Json(stringList, JsonRequestBehavior.AllowGet);
        }

JSON()方法的定義

protected internal virtual JsonResult Json(
    object data, //要序列化的對象
    string contentType, //內容類型
    Encoding contentEncoding, //內容編碼
    JsonRequestBehavior behavior //JSON請求行爲
);

JsonRequestBehavior

枚舉類型
包含AllGet/DenyGet兩種值，分別代表允許Get請求和不允許Get請求
提示：如果客戶端是Get請求，則務必寫上該參數

Ajax數據格式比較

分類	特點	應用場景
純文本	適合保存單個數據，數據傳輸量小，客戶端處理較多	保存數據處理結果，比如0,1等標識符
結構化數據(JSON等)	適合保存一行或多行數據，數據傳輸量較小，客戶端處理較多	展示列表數據，客戶端使用jQuery網格或樹等插件來表示數據
HTML(分部視圖等)	任意數據，數據傳輸量大，客戶端處理較少	顯示一定結構的任意內容，列表數據，表單等

AjaxHelper成員

主要屬性	說明
string UpdateTargetId	服務器響應來更新的DOM元素的ID
string Confirm	提交請求之前顯示在確認窗口中的消息
string HttpMethod	HTTP的請求方法{Get或者Post}
InsertionMode InsertionMode	將響應插入目標DOM元素的模式
int LoadingElementDuration	控制在顯示或隱藏加載元素時的動畫持續時間
string OnBegin	在更新頁面之前調用的JavaScript函數
string OnSuccess	在成功更新頁面之後調用的JavaScript函數

AjaxHelper的應用

修改Index視圖和控制器實現無刷新查詢
1. 添加兩個jQuery引用
2. 修改成無刷新表單

	<script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

@using (Ajax.BeginForm("GetUserList", new AjaxOptions { UpdateTargetId = "Surebtn" ,OnSuccess = "Success",  HttpMethod="post",Confirm = "確定查詢"}))
    {
        <input type="radio" name="Sex" value="男" />@("男")
        <input type="radio" name="Sex" value="女" />@("女")
        <input type="submit" value="加載所有用戶" id="Surebtn"/>
        <hr />
        <table id="tb">
            <tr id="title">
                <td>賬號</td>
                <td>姓名</td>
                <td>性別</td>
                <td>年齡</td>
                <td>電話</td>
                <td>密碼</td>
            </tr>
        </table>
    }

ASP.NET MVC中Ajax

文章目錄