01第一節：概述
#JavaScript#對於jQuery的ajax技術，本身就是一種很輕的數據操作方法，可以通過ajax技術從遠程的伺服器上拉取數據，這樣做就可以實現單向的拿出數據，然後斷開連接，剩下的就是在客戶端進行操作了，是一種很輕量級的操作數據的方法。
這裡使用jQuery的ajax技術+JSON格式的數據+SQL Server資料庫來實現數據以表格形式顯示的功能。
02第二節：編寫ASPX頁面後臺代碼
這裡我們通過ajax技術向ASP.NET WebForm編寫的後臺代碼請求數據。
對於ASPX頁面，微軟使用了巧妙的Web方法標註靜態方法可以被遠程的Ajax調用。
這裡創建一個普通的aspx頁面，然後在該頁面的*.aspx.cs後臺代碼中編寫一個靜態方法，這裡需要提前引入Newtonsoft.Json的第三方程序集。
完整C#代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.Services;using System.Web.Script.Services;using Newtonsoft.Json;using System.Data;namespace Yidosoft.Edu.JSWeb{public partial class WebForm1 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}[WebMethod]//對於前臺的Get請求，必須使用[ScriptMethod(UseHttpGet=true)]，否則出現500錯誤，//但是對於POST請求，則無需使用[ScriptMethod(UseHttpGet=true)]。[ScriptMethod(UseHttpGet=true)]public static string GetJsonData(){DBHelper db = new DBHelper();DataTable dt = db.GetDataTable("select * from AJAXTable");string str = JsonConvert.SerializeObject(dt);return str;}}}
這段C#代碼說明如下：
1：引用命名空間：
using System.Web.Services;
using System.Web.Script.Services;
這兩個命名空間是使用腳本請求Web方法的類庫。
Newtonsoft.Json是個第三方的JSON處理相關的類庫，現在已成為微軟的標準。
2：[WebMethod]：
對於被腳本調用的方法，該屬性必須在方法上標註。WebMethod存在System.Web.Services名稱空間下。
3：靜態方法：
對於被腳本調用的方法，也必須是靜態的方法。
4：[ScriptMethod(UseHttpGet=true)]：
如果$.ajax()使用的是GET請求，則必須使用[ScriptMethod(UseHttpGet=true)]進行標註，否則會出現HTTP 500錯誤，存在System.Web.Script.Services名稱空間下。
對於POST請求，此標註可以省略。
5：JsonConvert.SerializeObject()：
使用該方法可以將任何對象序列化為JSON字符串。
03第三節：編寫$.ajax()代碼
有了伺服器端的後臺代碼，我們就可以在自己的客戶端請求伺服器端的數據了。
在Html文件中編寫如下客戶端代碼：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function loadData() {var d= $.ajax({url: "WebForm1.aspx/GetJsonData",dataType: "json",type: "GET",//當返回json格式時，contentType不設置也是返不回的。contentType: "application/json",success: function (data,status,xhr) {console.log(data);},eror: function (er) {console.log(er);}});}</script></head><body><input id="Button1" type="button" value="加載數據" onclick="loadData()"/></body></html>
這段Html代碼說明如下：
對於調用ASPX頁面的靜態方法，需要在將方法名寫在請求的aspx頁面的後面，但不需要圓括號。如：WebForm1.aspx/GetJsonData，WebForm1.aspx是頁面，GetJsonData是後臺要請求的靜態方法。dataType：設置要請求的數據類型，目前已流行JSON數據格式，輕量級，簡單。type：設置HTTP請求的類型，可以是GET或POST，當然也可以是PUT、DELETE等。contentType：返回的內容類型，如果設置的dataType是json，則一定要將contentType設置為：application/json，這樣才能正確返回json數據。success：表示成功請求後返回的回調函數。具有三個參數：data、status、XHR。獲取的數據就在data對象中。error：表示失敗請求後返回的回調函數。一般使用一個參數，用於獲取錯誤信息。查看返回的JSON數據正式在Html頁面上顯示數據之前，我們先測試一下這個GET請求是否成功了，是否能從伺服器上拿取數據。
在運行後的頁面上點擊按鈕，然後打開瀏覽器的控制臺窗口，我們看到，已經有了一個object的對象，其中正好是從資料庫中獲取的數據。
這就是從伺服器端返回的JSON字符串。從結果上看，這一堆JSON字符串是存在d屬性中的。
所以在success回調函數中，可以直接獲取d屬性的值：
success: function (data,status,xhr) {console.log(data.d);},
此時，在上圖中，以鍵值對的形式將數據組織在一起，正是一個JSON格式的數據。
在資料庫的表中，我們也看到與拿到的數據是一樣的。表示使用ajax技術正確在客戶端從伺服器上拿到數據了。
04第四節：將JSON字符串轉換為JSON對象
對於從後臺獲取的一般都是JSON字符串，什麼是JSON字符串呢？就是符合JSON格式的字符串，使用單引號或雙引號括起來的。
如：var b = '{"name":"小強","sex":"男","age":"18"}';
就是JSON字符串。
那什麼是JSON對象呢？
那就是與JavaScript中的object類型的值是一樣的，使用花括號括起來的鍵值對。如：
var person = { "name": "小華", "sex": "女", "age": "28" }console.log(person.name);
可以使用對象.屬性的形式獲取對象中某屬性的值。
對於從伺服器端獲取的都是JSON字符串，那麼在前端使用JS處理時，就需要轉換為JSON對象，以便好處理數據。
使用JSON.parse()方法就可以將JSON字符串轉換為JSON對象。
使用JSON.stringify()方法可以將JSON對象轉換為JSON字符串。
將上面從資料庫中獲取的數據轉換為JSON對象，如下代碼：
var jsonData = JSON.parse(data.d);
非常的簡單，然後輸出結果：
對於這樣的對象，我們再進行處理就容易的多了。
05第五節：將數據呈現在列表中
上面的所有工作都完成之後，我們就可以拿到的數據顯示在Html頁面上了，用戶就可以看到了。
Html+jQuery的完整代碼如下：
<!DOCTYPE html><html><head><title>一都編程，每個知識就是一個案例。</title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function loadData() {var d= $.ajax({url: "WebForm1.aspx/GetJsonData",dataType: "json",type: "GET",//當返回json格式時，contentType不設置也是返不回的。contentType: "application/json",success: function (data, status, xhr) {//將JSON字符串轉換為JSON對象var jsonData = JSON.parse(data.d);var StudentTable = $("#StudentTable");for (var i = 0; i < jsonData.length; i++) {StudentTable.append("<tr><td>" + jsonData[i].AJAXId + "</td><td>" + jsonData[i].AJAXName + "</td></tr>");}console.log(jsonData);},eror: function (er) {console.log(er);}});}</script><style type="text/css">.theader{background-color:#808080;color:#fff;width:200px;text-align:center;}th{width:100px;}tr{text-align:center;}</style></head><body><input id="Button1" type="button" value="加載數據" onclick="loadData()"/><table id="StudentTable" border="1"><tr><th>編號</th><th>姓名</th></tr></table></body></html>
將上面的代碼運行後，並點擊一下「加載數據」按鈕，此時資料庫中的數據就會按表格的形式顯示出來。
此圖表中的數據是從資料庫中獲取的。是動態的數據。通過ajax技術從後臺資料庫中獲取。
因此，我們使用Html+jQuery+Ajax+後臺代碼就可以輕鬆的實現獲取數據的功能，對於一些數據量小的應用程式，使用這種方式是不錯的選擇。