JQuery的Ajax使用Get,Post方法調用C#WebService並返回數據

本文將介紹jQuery調用基於.NET Framework 3.5的WebService返回JSON數據，另外還要介紹一下用jQuery調用WebService的參數設置及設置不當所出現的問題，還有出現問題的緣由.

　　jQuery調用WebService網上的介紹也比較多，最近的項目中我也用到很多，一直都不多用.NET Ajax，比較鍾情於jQuery調用請求WebService有幾種方法，這主要說一下POST與GET方法，其實安全方法考慮不建議使用GET方法，下面就說一下用jquery調用WebService的參數設置及設置不當所出現的問題，還有出現問題的緣由。咱們這裏只討論返回JSON數據的狀況，相信你們都比較瞭解JSON格式的數據對於ajax的方便，不瞭解的能夠從網上找一下這方面的資料來看一下，這裏就很少說了，或者我之後再寫一篇這方面的文章。

　　下面是jQuery調用WebService服務器端代碼：

　　WS1和WS2方法爲POST方法請求的方法，因此設置UseHttpGet 爲false，WS3與WS4爲GET方法請求的方法，設置UseHttpGet 爲true。

-C#

using System.Web.Script.Services;   using System.Web.Services;   namespace WebService35   {       ///        /// WebService1 的摘要說明       ///        [WebService(Namespace = "http://tempuri.org/")]       [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]       [System.ComponentModel.ToolboxItem(false)]       // 若要容許運用  ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的註釋。       [System.Web.Script.Services.ScriptService]       public class WebService1 : System.Web.Services.WebService       {           [WebMethod]           [ScriptMethod(UseHttpGet = false)]           public string WS1()           {               return "POST無參數";           }           [WebMethod]           [ScriptMethod(UseHttpGet = false)]           public string WS2(string s)           {               return s;           }           [WebMethod]           [ScriptMethod(UseHttpGet = true)]           public string WS3()           {               return "GET無參數";           }           [WebMethod]           [ScriptMethod(UseHttpGet = true)]           public string WS4(string s)           {               return s;           }       }      } 

　　

-JavaScript

　　 function fun1() {              $.ajax({                  url: "WebService1.asmx/WS1",                  type: "POST",                  dataType: "json",                  contentType: "application/json; charset=utf-8",                  data: "",                  success: function(json) {                      alert(json.d);                  },                  error: function(x, e) {                      alert(x.responseText);                  },                  complete: function(x) {                      alert(x.responseText);                  }              });          } 

　　上面的JS方法爲用POST方法請求無參數的WebService方法的代碼，不過以上代碼並不能返回正確的JSON格式的數據，而是返回XML格式的數據，回爲要使WebService返回JSON格式的數據，要在Request Headers中設置Content-Type爲application/json，有人要問了，你不設置了contentType爲「application/json; charset=utf-8」了嗎？沒錯，是設置了，不過在jquery中，若是Content-Length爲0或者沒有設置，它會忽略你設置的contentType的，我能夠看下面的這個圖，這是抓取的Request Headers的數據，能夠看到Content-Length爲0，而且沒有Content-Type，所WebService就不知道咱們須要JSON格式的數據，它就返回了默認的XML格式的數據給咱們，之因此爲0，是由於我沒有提交任何數據。

 

　　這要怎麼辦呢？繼續看下面的JS代碼，由於咱們這裏是調用的一個沒能參數的WebService方法，因此咱們能夠提交一個空和JSON對象「{}"，以下所示，設置data爲{}。

-JavaScript

function fun1() {               $.ajax({                   url: "WebService1.asmx/WS1",                   type: "POST",                   dataType: "json",                   contentType: "application/json; charset=utf-8",                   data: "{}",                   success: function(json) {                       alert(json.d);                   },                   error: function(x, e) {                       alert(x.responseText);                   },                   complete: function(x) {                       alert(x.responseText);                   }               });           } 

　　如今我再來看下圖，能夠看到，Content-Length已經爲2了，而且也有Contetn-Type，仍是咱們設置的值，這樣就能正確的返回JSON數據給咱們使用了。

　　還有一種方法就是：既然jquery不給咱們設置Content-Type，咱們能夠本身設置，以下面的代碼所示，咱們在發送數據以前設置一下Content-Type爲「application/json; charset=utf-8」，這樣就能夠了。

-JavaScript

function fun1() {               $.ajax({                   url: "WebService1.asmx/WS1",                   type: "POST",                   dataType: "json",                   data: "",                   beforeSend: function(x) {                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8");                   },                   success: function(json) {                       alert(json.d);                   },                   error: function(x, e) {                       alert(x.responseText);                   },                   complete: function(x) {                       alert(x.responseText);                   }               });           } 

　　下面是咱們手工設置了Content-Type以後抓取的Request Headers，能夠看到，即便Content-Length爲0，裏面也有了正確的Content-Type了。

　　不過，須要注意的是：若是咱們設置了jquery的contentType，又發送了一個空的JSON對象，而且還手工設置了Content-Type，就以下代碼所示：

-JavaScript

function fun1() {               $.ajax({                   url: "WebService1.asmx/WS1",                   type: "POST",                   dataType: "json",                   contentType: "application/json; charset=utf-8",                   data: "{}",                   beforeSend: function(x) {                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8");                   },                   success: function(json) {                       alert(json.d);                   },                   error: function(x, e) {                       alert(x.responseText);                   },                   complete: function(x) {                       alert(x.responseText);                   }               });           } 

　　那麼在IE發送的Requst Headers就以下圖所示，你會看到Content-Type有兩個用逗號隔開的值，這是爲何呢？由於，jquery爲Content-Type設置了一次值，咱們手工又設置一次，而在IE是屢次設置Content-Type的值它會追加，而不是替換，不過這並不影響WebService正確返回JSON數據給咱們，不過應該避免這種狀況出現。

　　若是說上面那種設置兩次Content-Type的值還能正確的返回JSON數據，那麼下面代碼就不能正確返回JSON數據了。

-C#

function fun1() {               $.ajax({                   url:  "WebService1.asmx/WS1",                   type: "POST",                   dataType: "json",                   data: "{}",                   beforeSend: function(x) {                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8");                   },                   success: function(json) {                       alert(json.d);                   },                   error: function(x, e) {                       alert(x.responseText);                   },                   complete: function(x) {                       alert(x.responseText);                   }               });           } 

　　從下圖能夠看到Content-Type也有兩個值，不過這個和上面那個還有點不同，此次呢這個值是不同的，一個是application/x-www-form-urlencoded，一個是application/json; charset=utf-8，這種狀況就不能正確的返回JSON格式的數據了。這又是爲何呢？這是由於咱們沒有爲jquery設置contentType爲，而且又提交了一個空的JSON對象，能夠爲何這樣就會使用Content-Type出現這樣的狀況的呢？由於jquery的ajax用POST方法提交數據的時候，若是沒有設置contentType，而且所發送的數據不爲空，那麼它就會爲ContentType設置一個默認值，也就是application/x-www-form-urlencoded，因此就會出現這種狀況了。

　　因此呢，在用POST方法請求的時候，若是有提交數據，也就是jquery ajax的datar屬性不空的狀況下（不爲空的狀況：1.發送一個空對象調用無參數的WebService方法；2.請一個有參數的WebService方法。），必定要設置contentType屬性，而且不能手工設置Content-Type了。

　　下面是請求有參數的WebService方法，一些狀況在上面也都說過了，這裏就很少說了。

　　不過有一點要注意，就是用POST方法請求的時候，不用手工去編碼有漢字的參數值，以下面的data: "{s:'POST有參數'}"，就不用寫成data: "{s:"+encodeURI('POST有參數')+"}"了。 

-JavaScript

function fun2() {               $.ajax({                   url: "WebService1.asmx/WS2",                   contentType: "application/json; charset=utf-8",                   type: "POST",                   dataType: "json",                   data: "{s:'POST有參數'}",                   success: function(json) {                       alert(json.d);                   },                   error: function(x, e) {                       alert(x.responseText); ;                   },                   complete: function(x) {                       alert(x.responseText);                   }               });           }

　　以上是咱們說的用POST方法請求，下面是用GET方法請求。

　　下面是一個用GET方法請求一個無參數的WebService方法，不過這是一段錯誤的代碼，錯在哪兒呢，各們童鞋能夠本身想一下，咱們下面一塊兒說。

-JavaScript

function fun3() {        $.ajax({            url: "WebService1.asmx/WS3",            type: "GET",            dataType: "json",            data: "",            contentType: "application/json; charset=utf-8",            success: function(json) {                alert(json.d);            },            error: function(x, e) {                alert(x.responseText);            },            complete: function(x) {                alert(x.responseText);            }        });    } 

　　下圖是用上面一段代碼請求所抓取的Request Headers，你們看一下，問題出在哪裏。

　　下面的代碼是正確的用GET方法調用無參數的WebService方法。

-JavaScript

function fun3() {             $.ajax({                 url: "WebService1.asmx/WS3",                 dataType: "json",                 data: "",                 beforeSend: function(x) {                     x.setRequestHeader("Content-Type", "application/json; charset=utf-8");                 },                 success: function(json) {                     alert(json.d);                 },                 error: function(x, e) {                     alert(x.responseText);                 },                 complete: function(x) {                     alert(x.responseText);                 }             });         }

下面的代碼是正確的用GET方法調用有參數的WebService方法。

-JavaScript

       function fun4() {             $.ajax({                 url: "WebService1.asmx/WS4",                 dataType: "json",                 data: encodeURI("s='GET有參數'"),                 beforeSend: function(x) {                     x.setRequestHeader("Content-Type", "application/json; charset=utf-8");                 },                 success: function(json) {                     alert(json.d);                 },                 error: function(x, e) {                     alert(x.responseText);                 },                 complete: function(x) {                     alert(x.responseText);                 }             });

}
　　下圖是正確的用GET方法(有參數和無參數）調用WebService方法所抓取的Request Headers。

　　從上圖能夠看到，用GET方法請求，無論是有參數仍是無參數，都是沒有Content-Length的，因此jquery也就不能爲咱們設置Content-Type了，我只能手工設置Content-Type，因此咱們也就沒有必要設置jquery ajax的contentType了。

　　須要注意的是，GET方法與POST方法不一樣，有參數的時候，若是參數的值不是ASCII字符，要用encodeURI編一下碼，要不服務端接收到的數據爲亂碼。