之前在Ajax初步理解中介紹了對Ajax的初步理解，本文將介紹在ASP.NET中如何方便使用Ajax，第一種當然是使用jQuery的ajax，功能強大而且操作簡單方便，第二種是使用.NET封裝好的ScriptManager。
這是最簡單的一種方式了，先簡單了解jQuery ajax的語法，最常用的調用方式是這樣：$.ajax({settings}); 有幾個常用的setting，全部參數及其解釋可以去jQuery官方API文檔查詢
1. type:請求方式 get/post
2. url:請求的Uri
3. async：請求是否為異步
4. headers：自定義的header參數
5. data：發往服務器的參數
6. dataType：參數格式，常見的有string、json、xml等
7. contents：決定怎樣解析response的一個”字符串/正則表達式” map
8. contentType：發送到服務器的額數據的內容編碼類型，它的默認值是"application/x-www-form-urlencoded; charset=UTF-8""。
9. success:請求成功后調用的句柄
10.error：請求失敗后調用的句柄
沒使用過jQuery的ajax話這樣看有些云里霧里的感覺,來看一個簡單例子
首先使用Visual Studio新建一個WebApplication，把jQuery.js引入PRoject，然后添加兩個頁面，Default.aspx作為測試用
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %><!DOCTYPE html ><html><head runat="server"> <title>Ajax</title> <script src="jQuery.js" type="text/javascript"></script> <style type="text/CSS"> html, body, form { width: 100%; height: 100%; padding: 0px; margin: 0px; } #container { margin: 100px; height: 300px; width: 500px; background-color: #eee; border: dached 1px #0e0; } </style></head><body> <form id="form1" runat="server"> <div id="container"> <input type="button" value="Test Ajax" onclick="testGet()" /> <br /> </div> <script type="text/Javascript"> function setContainer(text) { document.getElementById("container").innerHTML += ('<br/>' + text); } function testGet() { $.ajax({ type: 'get', url: 'NormalPage.aspx', async: true, success: function (result) { alert(result); }, error: function () { setContainer('ERROR!'); } }); } </script> </form></body></html>
NormalPage.aspx作為請求頁面，先不做任何處理。在Default.aspx頁面中的JavaScript中可以看到testGet函數就利用jQuery的ajax向Normal.aspx發送了了一個get請求，沒寫的參數使用jQuery默認參數，這個調用沒使用任何參數，簡單向Normal.aspx頁面發送請求，請求成功則alert全部response（即success方法參數：result，jQuery會把responseText傳入success方法第一個參數），請求失敗則向DIV中添加一行錯誤提示文本。如果一切正常，可以看到頁面彈出對話框，對話框內內容即是Normal.aspx頁面內容
一個簡單的get請求完成了，這樣的結果一般沒有多大用處，也不是ajax意圖所在，使用Ajax主要是想使用JavaScript可以異步向服務器發送特定請求，獲取服務器相關數據，比如向服務器詢問天氣，然后獲得天氣數據，更新頁面，而不是獲取整個頁面，換句話說，使用Ajax本身就是為了擺脫更新整個頁面來更新頁面數據這種模式，僅僅需要服務器給我們數據即可，這就需要調用服務器端的特定方法。
我們這時候需要修改NormalPage.aspx，為其添加幾個方法供Default.aspx測試調用
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web{ public partial class NormalPage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string action = Request.QueryString["action"]; Response.Clear(); //清除所有之前生成的Response內容 if (!string.IsNullOrEmpty(action)) { switch (action) { case "getTime": Response.Write(GetTime()); break; case "getDate": Response.Write(GetDate()); break; } } Response.End(); //停止Response后續寫入動作，保證Response內只有我們寫入內容 } private string GetDate() { return DateTime.Now.ToShortDateString(); } private string GetTime() { return DateTime.Now.ToShortTimeString(); } }}然后為Default.aspx添加一個新的方法，并修改button的onclick方法為新寫的函數
function testGet2() { $.ajax({ type: 'get', url: 'NormalPage.aspx', async: true, data:{action:'getTime'}, success: function (result) { setContainer(result); }, error: function () { setContainer('ERROR!'); } }); }testGet2函數是在testGet函數的基礎上做了些許修改，首先對success方法做了更改，把得到的response寫到頁面；然后對請求添加了data參數，請求向服務器發送了一個action：getTime的鍵值對，在get請求中jQuery會把此參數轉為url的參數，上面寫法和這種寫法效果一樣
function testGet3() { $.ajax({ type: 'get', url: 'NormalPage.aspx？action=getTime', async: true, success: function (result) { setContainer(result); }, error: function () { setContainer('ERROR!'); } }); }看一下執行效果，這是Chrome的監視結果
如果調試我們發現這個請求調用的服務器頁面NormalPage.aspx的GETime方法，并且response中只包含對有用的數據，如果把請求中參數的值改為getDate，那么就會調用對應GetDate方法。
這樣向一個頁面發送請求然后在Load事件處理程序中根據參數調用不同方法，清除Response，寫入Response，終止Response，而且傳入的參數局限性太大，好業余的趕腳，看看專業些解決方法。為project添加一個General Handler類型文件，關于HttpHandler相關內容本文不做詳細解釋，只需知道它可以非常輕量級的處理HTTP請求，不用走繁瑣的頁面生命周期處理各種非必需數據。
Handler.ashx.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;using Newtonsoft.Json;namespace Web{ /// <summary> /// Summary description for Handler /// </summary> public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { Student stu = new Student(); int Id = Convert.ToInt32(context.Request.Form["ID"]); if (Id == 1) { stu.Name = "Byron"; } else { stu.Name = "Frank"; } string stuJsonString= JsonConvert.SerializeObject(stu); context.Response.Write(stuJsonString); } public bool IsReusable { get { return false; } } }}關于這個類語法本文不做詳細說明，每次發起HTTP請求ProcessRequest方法都會被調用到，Post類型請求參數和一再Request對象的Form中取得，每次根據參數ID值返回對應json對象字符串，為了展示json格式數據交互，需要為項目引入json.net這一開源類庫處理對象序列化反序列化問題，然后創建一個Student類文件
Student.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web{ public class Student { public int ID { get; set; } public string Name { get; set; } }}看看頁面如何處理
function testPost() { $.ajax({ type: 'post', url: 'Handler.ashx', async: true, data: { ID: '1' }, success: function (result) { setContainer(result); var stu =eval ('('+result+')'); setContainer(stu.ID); setContainer(stu.Nam
新聞熱點
疑難解答
