在asp.net中使JQuery的Ajax用總結

自從有了JQuery，Ajax的使用變的愈來愈方便了，可是使用中仍是會或多或少的出現一些讓人短期內痛苦的問題。本文暫時總結一些在使用JQuery Ajax中應該注意的問題，若有不恰當或者不完善的地方，歡迎你們指正和補充。

本文將從Ajax請求aspx、ashx和asmx三種方式討論。

 

首先看看請求aspx的狀況 

Aspx頁面的Ajax請求能夠有兩種方式：

一、 經過使用get或者post方法，傳遞頁面地址爲url參數的值，並附帶一些標記參數，直接請求。這種方式的Ajax被一些人譽爲「假的Ajax」，表面上沒有刷新頁面，其實後臺的執行狀況和刷新 頁面的效果是同樣的。

其實這種狀況也能夠請求頁面中的特定的方法，只要使用附帶的參數去判斷，就能夠「請求」特定的方法了。

下面展現了使用兩種不一樣的方法請求兩個不一樣頁面的狀況，只是摘抄了代碼，具體的詳細代碼能夠在文章結尾下載。 

前臺： 

//  直接請求頁面的方式
        $( function () {
             /*
            $.get(
                "RequestPage.aspx",
                { "token": "ajax" },
                function (data) {
                $("#dataShow").text(data);
                }
            ); */
            $.ajax({
                type:"Post",
                url: "ResponsePage.aspx",
                 //  data: "{'token':'ajax'}",// 使用這種方式居然沒法傳遞參數，各位有知道緣由的告訴一下啊。
                data:"token=ajax",
                success:  function (data) {
                    $("#dataShow").text(data); 
                }
            });
        })

後臺： 

protected  void Page_Load( object sender, EventArgs e)
{
   if (! this.IsPostBack)
   {
      if ((Request[ " token "]?? "")== " ajax ")
      {
          //  下面這些內從能夠放在一個方法裏，而後經過「token」標記去判斷執行哪一個方法。
                    Response.Write( " 我是直接請求aspx頁面返回的文字！ ");
                    Response.End();
        }
     }
 }

 以上請求返回值都是字符串也就是dataType爲text或者html類型。

若是要是但願請求返回的數據是xml或者json格式的，該怎麼辦呢？

若是要是xml格式的，需要添加一句Response.ContentType=」application/xml」；還有一點要注意的是Write中的內容必須是能夠解析爲xml的字符串才能夠，好比「<my>123</my>」是能夠的，「123」是不能夠的，由於返回的信息中responseXml等於null。以下圖：

前臺： 

  $.ajax({

                type: "Post",
                url: "ResponsePage.aspx",
                 //  data: "{'token':'ajax'}",// 使用這種方式居然沒法傳遞參數，各位有知道緣由的告訴一下啊。
                data: "token=ajax",
               //  不須要指定contentType，由於指定後返回的是整個頁面的html，不知道爲啥，請求解答啊。
                dataType: "xml",
                success:  function (data) {
                    alert(data);
                },
                error:  function (d, c,e) {
                    alert(e);  
                }
            });

後臺： 

 // 若是要是返回的響應爲xml，則必須這樣設置

Response.ContentType =  " application/xml ";
//  若是要是返回的響應爲xml,返回的字符串必須是能夠被解析的xml文檔格式。
Response.Write( " <my>123</my> ");
Response.End();

 

 若是是爲json格式的，後臺代碼中Response.ContentType=」application/json」這句無關緊要，不影響返回的值。可是Response.Write中的值必定要是json格式的，不然會有Invalid Json格式的錯誤。

前臺：

$.ajax({
                type: "Post",
                url: "ResponsePage.aspx",
                 //  data: "{'token':'ajax'}",// data必須是一個{key：value}的形式，這是一個字符串，是不行的。

                // data:{token:"ajax"},// 這種方式也可行。
                data: "token=ajax",
               //  不須要指定contentType，由於jquery會自動添加contentType=「application/x-www-form-urlencode」。
                dataType: "json",
                success:  function (data) {
                    alert(data);
                },
                error:  function (d, c,e) {
                    alert(e);  
                }

            }); 

 記錄：若是直接請求一個頁面，若是data使用"{'token':'ajax'}"這種字符串的形式，jquery是沒法轉換爲token=ajax的形式的。

jquery 文檔中說，可使用{key：value}形式的data請求頁面，此時jquery會自動添加contentType=「application/x-www-form-urlencode」，使傳入的data自動轉換爲key=value的形式。

後臺：

//  若是要是返回的響應爲xml，則必須這樣設置
Response.ContentType =  " application/json ";
//  若是要是返回的響應爲xml,返回的字符串必須是能夠被解析的xml文檔格式。
Response.Write(「[ 123] " );

Response.End();

二、 請求aspx頁面後臺中的方法。

其實上面的直接請求頁面的方法中也跟介紹了一種請求頁面內方法的解決方案，那就是在前臺的ajax中傳遞一個參數做爲標記，好比上面的那個「token」，而後在後臺的page_load裏面判斷token的值，根據值的不一樣執行不一樣的方法。下面要介紹的是直接執行頁面後臺中的方法。

  （1）使用簡便get或者post方法時，因爲不能設置contentType和dataType因此即便請求的是頁面中的方法，最後請求的仍是當前頁面，返回的值仍舊是當前頁面的html內容。因此在請求        方法的時候，簡便方法仍是不合適的。

    (2) 使用非簡便方法時，不論是post仍是get，若是dataType爲xml、text、htm，最後返回的值仍舊是整個html頁面的內容。因此若是要想到的值，仍是設置dataType爲「json」吧，不       要忘記還要設置contentType爲「application/json;charset=utf-8」，不設置這個，json也是返不回來的。並且還必須保證後臺的被請求的方法是static的，還有[webmethod]標         記，並且還必須是public的。

 前臺：

 $.ajax({

                type: "post",
                url: "RequestPage.aspx/RequestedMethod",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success:  function (res) {
                    alert("success:"+res.d);  //  注意這點後面要加個d才能獲取字符串信息，至於爲何要加個d，你經過chrome看看返回的響應就知道了，O(∩_∩)O
                },
                error:  function (xmlReq, err, c) {
                    alert("error:" + err);                }
            });

後臺： 

//  須要被Ajax請求的後臺方法
[WebMethod]
[ScriptMethod(UseHttpGet= true)]  //  若是要使用POST請求，去掉這個標記
public  static  string RequestedMethod()
{
    return  " [123] ";

} 

 直接使用post是沒有問題的：

若是type改成「get」，則會出現「500內部錯誤」。錯誤信息爲：{"Message":"嘗試使用 GET 請求調用方法「RequestedMethod」，但不容許這樣作。

解決方法就是在後方法上再加一個標[ScriptMethod(UseHttpGet=true)]，ScriptMethod 在System.Web.Script.Services下.這樣以後，就能夠在前臺經過Get方式請求了，可是若是加了這個標記以後，前臺就不能用POST進行請求了。

 

 三、 請求aspx頁面後臺中的方法，帶參數

前臺：

 $.ajax({
                type: "Post",
                url: "ResponsePage.aspx/RequestMethod1",
                data:"{'msg':'hello'}",
                contentType: "application/json;charset=utf-8",// 這句可不要忘了。
                dataType: "json",
                success: function (res) {
                    $("#dataShow").text("success:" + res.d); // 注意有個d，至於爲何經過chrome看響應吧，O(∩_∩)O。
                },
                error: function (xmlReq, err, c) {
                    $("#dataShow").text("error:" + err);
                }
            });

後臺：

[WebMethod]
public static string RequestMethod1(string msg)
{
      return msg;
 }

整體上帶參數的方式和不帶參數相似，不一樣點就是在使用ajax請求的時候，要傳遞一個data參數，注意這個data必定是一個json格式的字符串，不然就會報json錯誤的，具體爲何，由於你傳遞的contentType是application/json啊。

 

請求asmx（webservice）的狀況 

 

請求webservice的時候，主要是請求webservice中的方法，在請求以前不要忘記了代碼開頭的那段取消註釋的提示「// 若要容許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的註釋。

                   // [System.Web.Script.Services.ScriptService]」

請求webservice中的方法的處理方式和請求aspx頁面後臺方法的處理方式相似，但也有一些不一樣。

 被請求的webservice中方法的特色：

（1）   請求的方法必須是爲public的。

（2）  方法必須有[WebMethod]標記。

（3） 若是想使用Get的方式請求，還要有[ScriptMethod(UseHttpGet=true)]標記。使用Get請求Webservice的方法的時候，只添加這個標記是不夠的，還要修改Web.Config文件，讓WebService支持Get方式請求，不然會出現 「因 URL 意外地以「/GetXmlByGet」結束，請求格式沒法識別。「的錯誤。修改方法爲：在System.web配置節下添加如下紅色的內容：

< System .web >
……………
< webServices >
       < protocols >
         < add  name ="HttpGet" />
         < add  name ="HttpPost" />
       </ protocols >
     </ webServices >

</System.web> 

 

 

（4） 請求xml數據類型的時候，要注意，若是方法返回的是string類型的，返回的xml格式是這樣的：

若是方法返回的是字符串，則會把返回的字符串包裝在<string>標籤中返回。

   好比如下方法請求後的返回值： 

    [WebMethod]

public  string GetXmlByPost()
{
    return  " 我是經過Post方式請求返回的xml  ";
}

 返回值：

<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">我是經過Post方式請求返回的xml</string>

紅色部分是被請求方法返回的字符串，其餘是自動添加的，因此在前臺中經過jquery獲取數據的時候，應該$(res).find(」string」).text();

若是方法返回的是xmlDocument對象，則就是方法中構造的xml對象。

    好比如下方法請求後的返回值: 

     // 使用Get方式請求xml，注意返回的字符串必定要是能夠解析的xml格式。

[WebMethod]
[ScriptMethod(UseHttpGet =  true)]
public System.Xml. XmlDocument GetXmlByGet()
{
    string xml =  " <?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是經過Get方式請求返回的xml</my> ";
    System.Xml.XmlDocument doc =  new System.Xml.XmlDocument();
   doc.LoadXml(xml);
    return doc;

} 

 返回的響應爲：

<?xml version=\"1.0\" encoding=\"utf-8\"?><my>我是經過Get方式請求返回的xml</my>

此時就能夠經過$(res).find(」my」).text()的方式取數據了。此時操做的徹底是你本身構造的xml。

 

（5）   關於請求返回JSON須要注意的就是，返回的也是「[d:{}]」格式的數據，所在前臺獲取的時候，必定要加個」.d」，其餘的和xml差很少了。

（6）    Text的類型的就很少說了。

 

 

請求ashx的狀況 

 

 請求ashx的時候和直接請求apsx頁的狀況相似，畢竟都是經過response.Write(string)的方式返回數據的。

  須要注意的地方是：context.Response.ContentType的值，根據dataType的值區分：

Text：「text/plain「;

XML：「application/xml「;

JSON：「application/json「.

dataType爲xml的時候，response.Write(string)中的字符串必定要符合xml的格式，爲json的時候，response.Write(string)中的字符串必定要符合json的格式爲不然會出現解析錯誤，這個和aspx頁是同樣的。

 

若是要使用session的話，在handler的代碼中添加System.Web.SessionState的引用，並讓這個handler繼承IRequiresSessionState接口，必定要繼承這個接口，不然會出錯的。

 

其實都是很基本的東西，總結一下，有不妥的地方歡迎你們指正。 

 

排版比較差，你們將就着看吧。 

 

 /Files/acles/JQueryAjaxDemo.rar

下面這個版本添加了請求頁面中方法的代碼，爲了保存之前的代碼，這裏從新上傳最新。

 /Files/acles/JQueryAjaxDemo20130709.rar

  

出處：http://www.cnblogs.com/acles/articles/2385648.html