使用Javascript 调用.NET WEB服务

过去使用Javascript调用服务器端代码时，后台代码一直都是放在普通的ASPX页面的Page_Load方法内，一直觉得这种方式不是很好，每实现一个功能都要一个新的页面来实现，也许还有其他问题。如果能够使用WEB服务的话，就可以解决上述问题，如可以在一个Web服务页面内放置多个函数和代码，解决web服务调用验证等。

在网上搜索Javascript调用web服务的方法，找到一篇使用 Ajax 调用 SOAP Web 服务，但总是感觉好像太复杂了，要使用到它的Web Services JavaScript Library。另外一种我知道的方法就是使用ASP.NET Ajax，使用这个库调用web服务很简单并且实现的功能也很强。但是如果不使用这么重量的库能不能直接使用Javascript调用WEB服务呢？

一个偶然的机会，我发现使用ASP.NET编写的Web服务格式是这样的。加入名为Demo的asmx页面中有一个Web方法为foo()。那么调用它的时候，在地址栏显示的地址是Demo.asmx/foo。那么在Javascript能不能直接post（get）到服务器的这个页面呢？答案是可以，从而这样很简单的就实现了通过Javascript 调用WEB服务，也不需要其他库的支持。

下面用一个例子简单实现Javascript 调用WEB服务，假设WEB应用程序的Services/Demo.asmx中存在foo方法返回"Hello World"。

   1: [WebMethod]

   2: public string foo()

   3: {

   4:     return "Hello World";

   5: }

直接通过Services/Demo.asmx/foo访问，得到下面结果，是一个XML文件

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

   2: <string xmlns="http://sacranto.blogspot.com/">Hello World</string> 

在Javascript中的调用如下：（Javascript中使用了jQuery库，这个库与是否调用WEB服务没有关系，下同）

   1: $(document).ready(function() {

   2:     $("#btnFoo").click(function(){

   3:         $.post("Services/Demo.asmx/foo",

   4:             function(res){

   5:                 alert($(res).text());

   6:             }

   7:         );

   8:     });

   9: });

这段代码用于显示返回xml中的字符，IE7和FF2的结果不同，个人认为FF2的好一些。不知道IE6和其他浏览器的结果怎么样？

那么能不能直接传递参数给WEB服务呢？在ASP.NET WEB服务中，答案仍然是可以（使用其他语言编写的WEB服务应该也可以吧）。借助于WebService.Context 获取当前请求的ASP.NET HttpContext，它封装了由 HTTP 服务器用来处理Web 请求的所有HTTP 特定的上下文。

修改请求的Javascript代码，多了传递参数的一行。

   1: $(document).ready(function() {

   2:     $("#btnFoo").click(function(){

   3:         $.post("Services/Demo.asmx/foo",

   4:             {name:'sacranto',age:'24'},

   5:             function(res){

   6:                 alert($(res).text());

   7:             }

   8:         );

   9:     });

  10: });

这样在web服务页面中，可以通过如下代码访问传递的参数

   1: string name = Context.Request.Form["name"];

   2: int age = Convert.ToInt32(Context.Request.Form["age"]);

解决了传递参数的问题，救下来就是返回值了。web服务直接返回的都是xml，我们也可以利用Respone返回其他格式，如text/plain。例如线面的fooText方法就返回了纯文本，记得把方法改成无返回值。

   1: [WebMethod]

   2: public void fooText()

   3: {

   4:     string name = Context.Request.Form["name"];

   5:     int age = Convert.ToInt32(Context.Request.Form["age"]);

   6:     Context.Response.Expires = -1;       

   7:     Context.Response.ContentType = "text/plain";

   8:     Context.Response.Write("Hello " + name + ", your age is " + age.ToString());

   9:     Context.Response.End();

  10: }

在Javascript中的调用与上面基本相同，只是回调类型是text，直接使用即可。这也意味着text可以直接是json字符串了。

   1: $("#btnFooText").click(function(){

   2:     $.post("Services/Demo.asmx/fooText",

   3:         {name:'sacranto',age:'24'},

   4:         function(res){

   5:             alert(res);

   6:         }

   7:     );

   8: });

看看结果

使用Javascript 调用.NET WEB服务，是不是很简单呢?

 

 

PS：据说这种方法使用 http://localhost/... 访问就正常, 但用域名会出错。　我试了用IP是没有问题的，用域名？我还没有域名呢 :-)

解决方法：
在Web.config里面加上就可以了.

   1: <webServices> 

   2:     <protocols> 

   3:         <add name="HttpPost" /> 

   4:         <add name="HttpGet" /> 

   5:     </protocols> 

   6: </webServices>