ASP.NET Ajax简介及使用
简介：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax字段含义：
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状 态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状 态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
代码案例：
案例一：
if (cursel == 8) { var rows = $("#gvCardStat tbody").find("tr").length; if (rows == 1) {//判断是否加载过， $.ajax({ type: "GET", url: "/ashx/CardStat.ashx", dataType: "json", async: false, success: function (response) { var arrayLenth = response.length; var table = $("#gvCardStat"); for (var i = 0; i < arrayLenth; i++) { var trHtml = "<tr>" + "<td>" + response[i].Region + "</td>" + "<td>" + response[i].YelloCards + "</td>" + "<td>" + response[i].RedCards + "</td>" + "<td>" + response[i].SumCount + "</td>" + "</tr>" $("#gvCardStat tbody").append(trHtml); } } }); } }
//一般处理程序ashx public void ProcessRequest(HttpContext context) { User user = Auth.GetUserReq(); IList<string> groupList = new List<string>() { "XX", "XXX", "XXXX" }; IList<RegionCheck> regionChecks = GetCheckProject(user, groupList); DataContractJsonSerializer serializer = new DataContractJsonSerializer(regionChecks.GetType()); string json = string.Empty; using (MemoryStream ms = new MemoryStream()) { serializer.WriteObject(ms, regionChecks); json = Encoding.UTF8.GetString(ms.ToArray()); } HttpContext.Current.Response.Write(json); }
案例二：
前端：
<input type="button" class="btns" value="查询" id="searchBtn" onclick="GetDataList()" /> <script type="text/javascript"> $(function () { }); function GetDataList() { var formArray = $(document.forms[0]).serializeArray(); var obj = { name: "methodName", value: "GetDataList" }; formArray.push(obj); $.ajax({ url: "ProgressSummary.aspx", type: "post", dataType: "text", data: formArray, success: function (dataStr) { $("#datalist").html(""); var dataObj = JSON.parse(dataStr); if (dataObj.success + "" == "1") { var data = dataObj.data; //表头第一行 var tr_3 = $("<tr></tr>"); tr_3.append($("<th rowspan='2'>地市</th>")); var head_2Str = data.ListHead_2.join(',') + ""; for (var i = 0; i < data.ListHead_1.length; i++) { tr_3.append($("<th colspan='" + head_2Str.match(RegExp(data.ListHead_1[i], "g")).length + "'>" + data.ListHead_1[i] + "</th>")); } $("#datalist").append(tr_3); //表头第二行 var tr = $("<tr></tr>"); for (var i = 0; i < data.ListHead_2.length; i++) { if (i != 0) { tr.append($("<th>" + data.ListHead_2[i].split("_")[1] + "</th>")); } } $("#datalist").append(tr); //表内容 for (var i = 0; i < data.ListBody.length; i++) { var tr_1 = $("<tr></tr>"); for (var j = 0; j < data.ListBody[i].length; j++) { tr_1.append($("<td>" + data.ListBody[i][j] + "</td>")); } $("#datalist").append(tr_1); } } else { alert(dataObj.message); } }, error: function (data) { alert("出现未处理异常"); } }); } </script>
后端：
public string GetDataList() { object result = new { }; try { DataSet ds = new DataSet(); ds = IoCContainer.Get<IT_PCRoomProjectDao>().GetProgressSummary(plan_CitySelect.SelectedValue + ""); if (ds == null) { result = new { success = "0", message = "未查到数据" }; return Newtonsoft.Json.JsonConvert.SerializeObject(result); } object dataList = new object(); List<object> listHead_1 = new List<object>(); List<object> listHead_2 = new List<object>(); List<List<string>> listBody = new List<List<string>>(); List<string> totalObj = new List<string>(); foreach (DataRow dr in ds.Tables[0].Rows) { object obj = dr["name"] + ""; listHead_1.Add(obj); } foreach (DataRow dr in ds.Tables[1].Rows) { object obj = dr["name"] + ""; listHead_2.Add(obj); } for (int j = 0; j < ds.Tables[2].Rows.Count; j++) { List<string> obj = new List<string>(); for (int i = 0; i < ds.Tables[2].Columns.Count; i++) { obj.Add(ds.Tables[2].Rows[j][i] + "" == "0" ? "-" : ds.Tables[2].Rows[j][i] + ""); if (j == 0) { totalObj.Add(0 + ""); } if (i == 0) { totalObj[i] = "全省"; } else { totalObj[i] = (int.Parse(totalObj[i]) + int.Parse(ds.Tables[2].Rows[j][i] + "")) + ""; if (j == ds.Tables[2].Rows.Count - 1) totalObj[i] = totalObj[i] + "" == "0" ? "-" : totalObj[i] + ""; } } listBody.Add(obj); } if (plan_CitySelect.SelectedValue + "" == "") { listBody.Add(totalObj); } dataList = new { ListHead_1 = listHead_1, ListHead_2 = listHead_2, ListBody = listBody }; result = new { success = "1", message = "查询成功", data = dataList }; } catch (Exception e) { result = new { success = "0", message = "查询失败，" + e.Message, data = "" }; } return Newtonsoft.Json.JsonConvert.SerializeObject(result
优点：
1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
