以下內容是看了楊中科(傳智播客)老師的.net視頻及牛腩老師的新聞發布系統視頻相關Ajax章節所做大概記錄，初學理解能力有限，因此筆記可能有誤。
一、用JS原始代碼實現Ajax（不用任何Ajax架構）
1、建立AjaxText.html
-點擊Button1按鈕擷取伺服器時間並顯示到Text1文字框中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>用JS原始代碼實現Ajax,面試經常會要求寫</title> </head><body>擷取伺服器時間：<br/> <input id="Text1" type="text" /> <input id="Button1" type="button" value="擷取" onclick="btnClick()" /></body></html>
2、添加JS代碼，該JS用於實現Ajax
-這裡要注意，如果把JS或JQuery寫在單獨的JS檔案中，ashx頁面url要相對於html或aspx頁面，而不是相對於js頁面
<script type="text/javascript"> function btnClick() { var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHTTP對象,相當於WebClient(注意，這是微軟IE下的方法，在其他瀏覽器是不支援的) if (!xmlhttp) { alert("建立xmlhttp對象異常!"); return false; } //準備向伺服器的GetDate.ashx頁面發出POST請求，並傳遞參數id，&ts=new Date().getTime()為預防頁面有緩衝 xmlhttp.open("POST", "GetDate.ashx?id="+encodeURI("中國")+" &ts="+new Date().getTime(), false); //XMLHTTP預設(也推薦)不是同步請求的，也就是open方法並不像WebClient的DownLoadString那樣把伺服器返回資料拿到才返回，是非同步，因此需要監聽onreadystatechange事件 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { //伺服器請求完成 if (xmlhttp.status == 200) { //如果狀態代碼為200，則是請求成功 document.getElementById("Text1").value = xmlhttp.responseText; //★responseText屬性為伺服器返回的文本 } else { alert("AJAX伺服器返回錯誤！"); } } } xmlhttp.send();//這時才開始發送請求 } </script>
3、建立一般處理常式頁面GetDate.ashx
public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/plain"; string id = context.Request["id"]; context.Response.Write(DateTime.Now.ToString()+"--頁面傳過來的參數id="+id);//擷取伺服器時間,★通過context.Response.Write()返回資料}
註：ashx通過context.Response.Write()來返回資料
二、用JQuery實現Ajax（一般都是用JQuery來實現Ajax，比較方便）
引出JQuery.js檔案，並將第一步中的Js代碼改為JQuery代碼
function btnClick() { $.post("GetDate.ashx", { "id": "中國"}, function(data, status) { if (status = "success") { // 第二個參數status為伺服器返回狀態代碼，success表示返回成功 $("#Text1").val(data); // 第一個參數data為伺服器返回的內容 } else { //如果返回失敗 alert("AJAX錯誤!"); } }); }
JQuery中提供了簡化ajax使用的方法。$.ajax()函數是JQuery中提供的ajax訪問函數，一般不直接調用$.ajax()函數，
$.post()是對$.ajax()的post方式提交ajax查詢的封裝，$.get()對$.ajax()的get方式提交ajax查詢的封裝。推薦用post方式，因為post方式沒有緩衝的問題。
如果需要在出錯時執行函數，請使用 $.ajax。
$.post(url,[data],[callback],[type])：第234參數為可選
url：為發送請求的地址，如上面的GetDate.ashx(注意，這裡的ashx頁面路徑，是相對於頁面的路徑，而不是相對於JS檔案的路徑)
data：待發送的key/value參數，為字典數組，如{"id":idText , "name":nameText},也可把url寫成"GetDate.ashx?id="+idText+"&name="+nameText形式，而省略改參數，該post方法會自動對傳進來的中文參數進行編碼；
（★注意：如果用$.get()則必須解決緩衝問題，可加參數"t":new Date().getTime()；還必須考慮編碼問題，如果傳入的參數value是中文，存到資料庫會有亂碼，因此必須進行二次轉碼，如"name":encodeURI(encodeURI(nameText))，然後在ashx中再對該參數值進行解碼context.Server.UrlDecode(context.request["name"]，因此推薦使用$.post())
calback：發送成功時回呼函數，如上面的function(data,status){}，回呼函數中data(可省略)為伺服器返回的資料，status(可省略)為伺服器返回狀態代碼status = "success"表示返回成功
三、上面方法回傳的資料都是單字串，可用Json實現傳數組
1、建立JsonTest.html檔案，在html檔案中加入一下JQuery代碼
<script type="text/javascript"> $(function() { $.post("JsonTest.ashx", function(data, status) { //alert(data);//彈出字典數組行式的字串{"Name":"tom","Age":30} var person = $.parseJSON(data);//反序列，直接得到一個字典數組 alert(person.Name);//相當於person["Name"] }); });</script>
2、建立一般處理常式頁面JsonTest.ashx
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Script.Serialization; //引入該命名空間namespace Ajax{ [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class JsonTest: IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //JavaScriptSerializer為啟用 AFAX 的應用程式提供序列化和還原序列化功能。 JavaScriptSerializer jss = new JavaScriptSerializer(); //Serialize():當在衍生類別中重寫時，產生成對的名稱和數值的字典數組。 string json = jss.Serialize(new Person() { Name = "tom", Age = 30 }); context.Response.Write(json);//返回一個字典數組形式的字串：{"Name":"tom","Age":30} } public bool IsReusable { get { return false; } } } public class Person { public string Name { get; set; } public int Age { get; set; } }}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
