01第1節：GET和POST請求概述
#JavaScript#在Http中，有多種請求方式，如get、post、put、deletet等，但是最常用的是獲取數據和提交數據，獲取數據是get請求，提交數據是post請求。
注意：HTTP請求是指客戶端向伺服器發送的請求。例如使用自己的電腦打開瀏覽器，輸入「百度」的網址，此時就是從你的計算機向百度的伺服器發起HTTP請求。
HTTP GET請求：一般情況下是指從指定的資源獲取數據，將遠程伺服器上的數據拿過來使用。GET請求時，Url地址是暴露出來的，大家都可以看，且還可以收藏起來以便下次使用。HTTP POST請求：一般情況下是指將本地的數據提交到遠程的伺服器上去處理和存儲。POST請求時，URL地址是隱藏起來的，不能被收藏。在jQuery的Ajax技術中，可以使用的有3個方法：
$.get()方法主要用於以HTTP GET的方式請求數據。$.post()方法主要用於以HTTP POST的方式請求數據。$.ajax()方法不僅可以POST方式請求，還可以GET方式請求。$.get()方法在jQuery中，對於HTTP GET的請求，專門封裝了$.get()方法進行專項的GET請求，這樣當我們只需要獲取數據時，直接使用$.get()專項方法從遠程伺服器拿數據即可。
$.get()方法的基本語法如下：
$.get(URL,callback);
該基本語法說明如下：
第1個URL參數是必選參數，主要靠這個URL地址從遠程伺服器上拿數據，因此，這個URL地址必須準確，是請求的有效資源。第2個callback參數是可選的，功能是請求成功後所要處理的函數代碼。使用$.get()方法主要是從遠程伺服器上獲取數據。現在使用jQuery的$.get()方法從遠程的ASP.NET伺服器上獲取內容。
使用ASP.NET的一般處理程序*.ashx提供請求的數據。
Handler1.ashx文件中的內容用於提供給請求者一段文本內容，相當於伺服器上端的資源。
現在使用jQuery的$.get()方法獲取遠程ASP.NET應用程式中Handler1.ashx的內容。
Html+jQuery代碼如下：
<!DOCTYPE html><html><head><title>一都編程，每個知識就是一個案例。</title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function getNETData() {var d = $.get("Handler1.ashx", function (data, status) {if (status == "success") {$("#div1").text(data);}});}</script></head><body><input id="Button1" type="button" value="從ASP.NET伺服器獲取數據" onclick="getNETData()" /><div id="div1"></div></body></html>
將上面的代碼運行一下，結果如下：
當我們點擊此頁面上的按鈕後，過一會兒，就會將一般處理程序中的內容返回並顯示在頁面上了。
在$.get()方法的回調函數中，第一個data參數的值就是從遠程伺服器上獲取到的數據。
02第2節：$.post()方法
使用$.post()方法可以將html客戶端的內容提交到伺服器上，並且還可以將Post過來的數據存儲到資料庫中。
Html文件的代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function postDataToServer() {var t = $("#Text1");$.post("Data1.aspx", {name:t.val()}, function (data, status) {if (status == "success") {alert("提交成功！");}});}</script></head><body><input id="Text1" type="text" /><input id="Button1" type="button" value="提交到伺服器" onclick="postDataToServer()" /></body></html>
在此代碼中，使用$.post()向Data1.aspx提交數據，提交的數據放在$.post()方法的第二個參數中，並以對象的形式傳遞，這裡只傳遞了name屬性的值。
然後在Data1.aspx頁面中可以使用Request.Form()方法接收，C#代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Yidosoft.Edu.JSWeb{public partial class Data1 : System.Web.UI.Page{DBHelper db = new DBHelper();protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){//接收從Post提交過來的數據object o = Request.Form["Name"];if (o != null){db.ExecuteNonQuery(string.Format("insert into AJAXTable(AJAXName) values('{0}')", o.ToString()));}}}}}
注意：這裡使用了DBHelper.cs類庫，此類庫封裝了對SQL Server資料庫的基本訪問。
將上面的代碼運行後，並在頁面上輸入幾個姓名，並提交。提交完成後，打開資料庫看一下結果：
03第3節：$.ajax()方法
除了使用$.get()方法和$.post()方法之外，還可以使用$.ajax()方法對伺服器進行異步和同步請求數據。
$.ajax()功能最為強大，一般情況下，獲取數據的GET請求和提交數據的POST請求，都可以使用$.ajax()方法來實現。
$.ajax()方法的參數是一個對象，以鍵值對的形式設置參數：
$.ajax({鍵:值})
一、async參數
在$.ajax()方法中，可以使用async參數設置同步還是異步，默認$.ajax()方法是異步的，即async=true表示異步請求。
注意：同步請求會導致瀏覽器不能繼續下一步操作，必須等待用戶完成一個操作之後才能繼續後面的操作。存在等待的一個情況，嚴重影響了用戶體驗。
二、dataType參數
在$.ajax()方法中，使用dataType參數可以設置希望伺服器給我們返回什麼類型的數據，是數字呀，還是字符串呢？
也可以理解為是我們想要的數據類型，數據類型以字符串的形式設置。可以使用的類型有：
Html類型：使用"html"表示，主要用於返回具有Html代碼的文本內容。Xml類型：使用"xml"表示，用於返回Xml格式的數據內容。JS代碼類型：使用"script"表示，用於返回JavaScript代碼段，以文本的形式返回。JSON類型：使用"json"表示，希望伺服器返回JSON格式的內容，也是以文本的形式返回的。這也是常用的一種格式。文本類型：使用"text":表示，返回文本字符串。三、type參數
Type是$.ajax()方法的一個重要的參數，用於設置HTTP的請求方式，如果沒有指定type參數，則使用的是GET請求。
四、url參數
Url參數也是$.ajax()方法的重要參數，用於設置請求的URL地址，如果沒有設置URL地址，則默認是當前頁面。
五、xhr參數
當$.ajax()方法需要得到一個XMLHttpRequest對象時，可以使用xhr參數來得到，這個參數不常用，我們也不會需要這麼一個XMLHttpRequest對象，給我們也帶不來什麼有用的信息。
04第4節：獲取伺服器的數據
現在，我們來舉一個例子，使用$.ajax()方法獲取伺服器上的數據，這裡獲取ASP.NET一般處理程序中的數據。
Html和jQuery的代碼如下：
<!DOCTYPE html><html><head><title>一都編程，每個知識就是一個案例。</title><script src="jquery-3.3.1.js"></script><script type="text/javascript">//使用$.ajax()獲取數據function getData() {var text1 = $("#Text1");var d = $.ajax({url: "Handler1.ashx",async: true,dataType: "text",type: "GET",success: function (data, textStatus, jqXHR) {text1.val(data);}});}</script></head><body><input id="Text1" type="text" /><input id="Button1" type="button" value="獲取" onclick="getData()" /><input id="Button2" type="button" value="提交" /></body></html>
將上面的代碼運行一下，主要功能是使用$.ajax()技術獲取數據，結果如下：
此時，當我們點擊「獲取」按鈕後，就會通過GET請求從一般處理程序中以text格式異步的方式得到遠程伺服器上的數據。
05第5節：提交數據到伺服器
同樣道理，使用$.ajax()方法也可以向伺服器提交數據，語法都是一樣的，只不過，需要將提交的數據以對象的方式提交給伺服器。
Html代碼和jQuery代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">//使用$.ajax()提交數據function setData() {$.ajax({url: "Data1.aspx",type: "POST",data: {name:$("#Text1").val()},success: function (data, textStatus, jqXHR) {alert("提交成功");},error: function (errorMsg) {alert("提交失敗" + errorMsg);}});}</script></head><body><input id="Text1" type="text" /><input id="Button1" type="button" value="獲取" onclick="getData()" /><input id="Button2" type="button" value="提交" onclick="setData()" /></body></html>
使用這段代碼，就可以將頁面上的數據收集起來，並提交到遠程的伺服器上。運行結果如下：
在此代碼中，當在文本框中輸入內容之後，點擊「提交」按鈕就會觸發$.ajax()方法的執行，並將數據存儲到資料庫中：
此時，我們在遠程的伺服器上，已經得到了提交過來的數據了，這表明上面使用$.ajax()方法和一般處理程序是可以實現數據從客戶端以AJAX的方式提交數據到伺服器上。