阳光博文 你的空间 知识的容器

jQuery调用WebService返回JSON数据

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。
  1. using System.Web.Script.Services;  
  2. using System.Web.Services;  
  3. namespace WebService35  
  4. {  
  5.     ///   
  6.     /// WebService1 的摘要说明  
  7.     ///   
  8.     [WebService(Namespace = "http://tempuri.org/")]  
  9.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  10.     [System.ComponentModel.ToolboxItem(false)]  
  11.     // 若要允许运用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。  
  12.     [System.Web.Script.Services.ScriptService]  
  13.     public class WebService1 : System.Web.Services.WebService  
  14.     {  
  15.         [WebMethod]  
  16.         [ScriptMethod(UseHttpGet = false)]  
  17.         public string WS1()  
  18.         {  
  19.             return "POST无参数";  
  20.         }  
  21.         [WebMethod]  
  22.         [ScriptMethod(UseHttpGet = false)]  
  23.         public string WS2(string s)  
  24.         {  
  25.             return s;  
  26.         }  
  27.         [WebMethod]  
  28.         [ScriptMethod(UseHttpGet = true)]  
  29.         public string WS3()  
  30.         {  
  31.             return "GET无参数";  
  32.         }  
  33.         [WebMethod]  
  34.         [ScriptMethod(UseHttpGet = true)]  
  35.         public string WS4(string s)  
  36.         {  
  37.             return s;  
  38.         }  
  39.     }     

 
  1. function fun1() {  
  2.            $.ajax({  
  3.                url: "WebService1.asmx/WS1",  
  4.                type: "POST",  
  5.                dataType: "json",  
  6.                contentType: "application/json; charset=utf-8",  
  7.                data: "",  
  8.                success: function(json) {  
  9.                    alert(json.d);  
  10.                },  
  11.                error: function(x, e) {  
  12.                    alert(x.responseText);  
  13.                },  
  14.                complete: function(x) {  
  15.                    alert(x.responseText);  
  16.                }  
  17.            });  
  18.        } 

 
上面的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,是因为我没有提交任何数据。
jQuery调用WebService返回JSON数据[多图]图片1
这要如何办呢?继续看下面的JS代码,因为我们这里是调用的一个没能参数的WebService要领,所以我们可以提交一个空和JSON对象“{}",如下所示,配置data为{}。
  1. function fun1() {  
  2.             $.ajax({  
  3.                 url: "WebService1.asmx/WS1",  
  4.                 type: "POST",  
  5.                 dataType: "json",  
  6.                 contentType: "application/json; charset=utf-8",  
  7.                 data: "{}",  
  8.                 success: function(json) {  
  9.                     alert(json.d);  
  10.                 },  
  11.                 error: function(x, e) {  
  12.                     alert(x.responseText);  
  13.                 },  
  14.                 complete: function(x) {  
  15.                     alert(x.responseText);  
  16.                 }  
  17.             });  
  18.         } 

现在我再来看下图,可以看到,Content-Length已经为2了,并且也有Contetn-Type,还是我们配置的值,这样就能正确的返回JSON格式的数据给我们运用了。
jQuery调用WebService返回JSON数据[多图]图片2
还有一种要领就是:既然jquery不给我们配置Content-Type,我们可以自己配置,如下面的代码所示,我们在发送数据之前配置一下Content-Type为“application/json; charset=utf-8”,这样就可以了。

  1. function fun1() {  
  2.             $.ajax({  
  3.                 url: "WebService1.asmx/WS1",  
  4.                 type: "POST",  
  5.                 dataType: "json",  
  6.                 data: "",  
  7.                 beforeSend: function(x) {  
  8.                     x.setRequestHeader("Content-Type""application/json; charset=utf-8");  
  9.                 },  
  10.                 success: function(json) {  
  11.                     alert(json.d);  
  12.                 },  
  13.                 error: function(x, e) {  
  14.                     alert(x.responseText);  
  15.                 },  
  16.                 complete: function(x) {  
  17.                     alert(x.responseText);  
  18.                 }  
  19.             });  
  20.         } 

下面是我们手工配置了Content-Type之后抓取的Request Headers,可以看到,即使Content-Length为0,里面也有了正确的Content-Type了。
jQuery调用WebService返回JSON数据[多图]图片3
不过,须要留心的是:如果我们配置了jquery的contentType,又发送了一个空的JSON对象,并且还手工配置了Content-Type,就如下代码所示:
  1. function fun1() {  
  2.             $.ajax({  
  3.                 url: "WebService1.asmx/WS1",  
  4.                 type: "POST",  
  5.                 dataType: "json",  
  6.                 contentType: "application/json; charset=utf-8",  
  7.                 data: "{}",  
  8.                 beforeSend: function(x) {  
  9.                     x.setRequestHeader("Content-Type""application/json; charset=utf-8");  
  10.                 },  
  11.                 success: function(json) {  
  12.                     alert(json.d);  
  13.                 },  
  14.                 error: function(x, e) {  
  15.                     alert(x.responseText);  
  16.                 },  
  17.                 complete: function(x) {  
  18.                     alert(x.responseText);  
  19.                 }  
  20.             });  
  21.         } 

那么在IE发送的Requst Headers就如下图所示,你会看到Content-Type有两个用逗号隔开的值,这是为什么呢?因为,jquery为Content-Type配置了一次值,我们手工又配置一次,而在IE是多次配置Content-Type的值它会追加,而不是替换,不过这并不影响WebService返回正确的JSON格式的数据给我们,不过应该防止这种情况出现。
jQuery调用WebService返回JSON数据[多图]图片4
如果说上面那种配置两次Content-Type的值还能正确的返回JSON格式的数据,那么下面代码就不能正确返回数据了。

  1. function fun1() {  
  2.             $.ajax({  
  3.                 url: "WebService1.asmx/WS1",  
  4.                 type: "POST",  
  5.                 dataType: "json",  
  6.                 data: "{}",  
  7.                 beforeSend: function(x) {  
  8.                     x.setRequestHeader("Content-Type", "application/json; charset=utf-8");  
  9.                 },  
  10.                 success: function(json) {  
  11.                     alert(json.d);  
  12.                 },  
  13.                 error: function(x, e) {  
  14.                     alert(x.responseText);  
  15.                 },  
  16.                 complete: function(x) {  
  17.                     alert(x.responseText);  
  18.                 }  
  19.             });  
  20.         } 

从下图可以看到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了。
jQuery调用WebService返回JSON数据[多图]图片5
下面是请求有参数的WebService要领,一些情况在上面也都说过了,这里就不多说了。
不过有一点要留心,就是用POST要领请求的时候,不用手工去编码有汉字的参数值,如下面的data: "{s:'POST有参数'}",就不用写成data: "{s:"+encodeURI('POST有参数')+"}"了。

  1. function fun2() {  
  2.             $.ajax({  
  3.                 url: "WebService1.asmx/WS2",  
  4.                 contentType: "application/json; charset=utf-8",  
  5.                 type: "POST",  
  6.                 dataType: "json",  
  7.                 data: "{s:'POST有参数'}",  
  8.                 success: function(json) {  
  9.                     alert(json.d);  
  10.                 },  
  11.                 error: function(x, e) {  
  12.                     alert(x.responseText); ;  
  13.                 },  
  14.                 complete: function(x) {  
  15.                     alert(x.responseText);  
  16.                 }  
  17.             });  
  18.         } 

以上是我们说的用POST要领请求,下面是用GET要领请求。
下面是一个用GET要领请求一个无参数的WebService要领,不过这是一段不正确的代码,错在哪儿呢,各们童鞋可以自己想一下,我们下面一起说。

  1. function fun3() {  
  2.      $.ajax({  
  3.          url: "WebService1.asmx/WS3",  
  4.          type: "GET",  
  5.          dataType: "json",  
  6.          data: "",  
  7.          contentType: "application/json; charset=utf-8",  
  8.          success: function(json) {  
  9.              alert(json.d);  
  10.          },  
  11.          error: function(x, e) {  
  12.              alert(x.responseText);  
  13.          },  
  14.          complete: function(x) {  
  15.              alert(x.responseText);  
  16.          }  
  17.      });  
  18.  } 

下图是用上面一段代码请求所抓取的Request Headers,大家看一下,疑问出在哪里。
jQuery调用WebService返回JSON数据[多图]图片6
下面的代码是正确的用GET要领调用无参数的WebService要领。
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要领。
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。
jQuery调用WebService返回JSON数据[多图]图片7
从上图可以看到,用GET要领请求,不管是有参数还是无参数,都是没有Content-Length的,所以jquery也就不能为我们配置Content-Type了,我只能手工配置Content-Type,所以我们也就没有必要配置jquery ajax的contentType了。
须要留心的是,GET要领与POST要领不同,有参数的时候,如果参数的值不是ASCII字符,要用encodeURI编一下码,要不服务端接收到的数据为乱码。

在线咨询