Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，在ASP.NET中，我们可以使用Ajax技术来实现无刷新的数据交互和页面更新，本文将详细介绍如何在ASP.NET中使用Ajax。
引入Ajax库
在使用Ajax之前，我们需要引入相关的库文件，在ASP.NET项目中，我们可以通过NuGet包管理器来安装Microsoft Ajax库，安装完成后，我们需要在Web.config文件中添加以下配置：
<system.web>
<httpHandlers>
<add verb="*" path="Ajax/*.ashx" type="System.Web.UI.PageHandlerFactory" />
</httpHandlers>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</controls>
</pages>
</system.web>
创建Ajax处理程序
接下来，我们需要创建一个Ajax处理程序，在项目中添加一个新的Web用户控件，并将其命名为AjaxHandler.ashx，在AjaxHandler.ashx中编写如下代码：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using System.IO;
public partial class AjaxHandler : Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request["action"];
switch (action)
{
case "getData":
GetData();
break;
default:
Response.Write("Invalid action");
break;
}
}
private void GetData()
{
// 获取数据的逻辑，例如从数据库中查询数据等
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("Name");
dt.Rows.Add(1, "张三");
dt.Rows.Add(2, "李四");
dt.Rows.Add(3, "王五");
// 将数据转换为JSON格式并返回给客户端
StringBuilder json = new StringBuilder();
json.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
json.Append("{");
json.Append("\"ID\":").Append(dt.Rows[i]["ID"] + ",");
json.Append("\"Name\":\"").Append(dt.Rows[i]["Name"]).Append("\"");
json.Append("}");
if (i < dt.Rows.Count 1)
{
json.Append(",");
}
}
json.Append("]");
Response.ContentType = "application/json";
Response.Write(json.ToString());
}
}
在ASPX页面中使用Ajax调用处理程序
在ASPX页面中，我们可以使用JavaScript来调用Ajax处理程序，我们可以在一个按钮的点击事件中调用Ajax处理程序来获取数据：
<button id="btnGetData">获取数据</button>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("btnGetData").click(function () {
$.ajax({
type: "POST",
url: "AjaxHandler.ashx",
data: { action: "getData" },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var resultDiv = $("result");
for (var i = 0; i < data.length; i++) {
resultDiv.append("<p>ID：" + data[i].ID + "，Name：" + data[i].Name + "</p>");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败：" + textStatus);
}
});
});
});
</script>
