ASP.NET AJAX调用WebService

最新推荐文章于 2017-04-18 12:25:05 发布

logenliqiang

最新推荐文章于 2017-04-18 12:25:05 发布

阅读量255

点赞数

分类专栏： ASP.NET 文章标签： webservice asp.net ajax xmlhttprequest ajax框架 function

本文链接：https://blog.csdn.net/logenliqiang/article/details/5337994

版权

ASP.NET 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

如何在客户端直接调用WebService中的方法？

这里结合经验自己写一写
1.首先新建一个 ASP.NET AJAX-Enabled Web Site,这样系统为我们自动配置好了环境，这主要体现在Web.config这个文件上，如果已有网站不是ASP.NET AJAX-Enabled Web Site也可以对照修改下Web.config，也可以达到相同的效果。
2.新建一个web服务，WebService.asmx，在WebService.cs需要添加System.Web.Script.Services;这个命名空间：
using System.Web.Script.Services;
然后给WebService 类添加[ScriptService]属性这里先说步骤，后面说原理，然后给我们需要调用的方法加上
[WebMethod]属性
3.新建一个JScript文件，JScript.js，里面用来响应界面事件处理回调方法返回的数据
4.新建一个页面Default.aspx,如果是ASP.NET AJAX-Enabled Web Site页面上会自动添加ScriptManager控件，如果不是只要手工拖上去一个，然后给ScriptManager添加Script节点，这个节点用来指定要使用的js文件
<Scripts><asp:ScriptReference Path="~/JScript.js" /></Scripts>
再给ScriptManager添加Services节点，这个节点用来指定要使用的WebService
<Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>
这些工作完成后只要在界面上某个控件或者某个地方调用我们的js方法就可以了。
说的是调用本地的WebService,如果是调用网上的WebService,原理也是一样，不过需要添加点东西，就拿“一些常用的WebServices”中的第一个WebService来说吧，天气预报Web服务，在网站上添加web引用，

在url地址中填入地址服务地址，前往，然后添加引用就可以了，其它处理和本地一样。
贴一下代码，包括本地的web服务和远程web服务
I.Default.aspx代码：
<html xmlns="[color=#000000]http://www.w3.org/1999/xhtml[/color]">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
        <Scripts>
            <asp:ScriptReference Path="~/JScript.js" />
        </Scripts>
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
        </asp:ScriptManager>
        <input type="button" value="问好！" /><p/>
         <input type="button" value="北京天气！" />
        <div id="result">
        </div>
    </form>
</body>
</html>
II.JScript.js代码：

    //问好方法
    function SayHello() {
            WebService1.HelloWorld(completeAjax);
        }
    //问好回调方法
      function completeAjax(result) {
        document.getElementById("result").innerHTML = result;
        }
        //天气方法
        function GetData(cityName)
        {
            WebService1.getWeather(cityName,complete);
        }
       //天气回调方法
        function complete(result)
        {
            var data ="";
            for(i =0;i<result.length;i++)
            {
                data+=result+"<br/>"
            }
document.getElementById("result").innerHTML = data;
        }

III.WebService.cs代码：
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService1 : System.Web.Services.WebService {
      public WebService1 () {
            //如果使用设计的组件，请取消注释以下行
            //InitializeComponent();
    }
    [WebMethod]
      public string HelloWorld() {
            return "你好啊";
    }
    /// <summary>
      /// 得到今天和明天、后天的天气及穿衣指数等等
    /// </summary>
      /// <param name="cityName"></param>
      /// <returns></returns>
    [WebMethod]
      public string[] getWeather(string cityName)
    {
            cn.com.webxml.www.WeatherWebService wws = new cn.com.webxml.www.WeatherWebService();
            return wws.getWeatherbyCityName(cityName);
    }
}
运行效果就不贴图了，如果有兴趣自己试验一下就知道了

在JScript.js中我们直接调用WebService1类的HelloWorld方法，虽然我们说是“直接调用”，但这是指在语法层面上“直接调用”。而实际上，JavaScript代码是不可能真正直接调用后台程序的，这中间一定使用了XMLHttpRequest对象。那么，到底是什么给我们实施了“障眼法”？答案看下图：

上图就是这个所谓“直接调用”真正的秘密。
如图，现在假设有个WebService类，名为Class1，有两个方法：Method1和Method2。当这个WebService被我们用上面提到的方法处理过后，ASP.NET AJAX框架就会自动分析这个类，并且在客户端生成一个这个类的客户端代理（Proxy），这个代理类是一个JavaScript对象，其类名、方法名都和后台类一致。而当我们从客户端的JS脚本调用时，实际上调用的是这个代理类，而代理类则使用XMLHttpRequest对象，通过传统的Ajax方式，调用后台类。这样，我们就感觉好像在前台直接调用后台类似的。
    可是……哪里似乎还是不一样……
    通过上面的分析，我们知道，ASP.NET AJAX调用后台方法，说到底还是使用的XMLHttpRequest对象，这样传统Ajax的限制，就使得我们不可能真的像在后台调用方法一样方便。
    例如，我们在后台都是用“变量=类名.方法名”或者“变量=对象名.方法名”的方式调用，这样变量就直接获取了这个方法的返回值，但是Ajax不行，它必须通过回调函数获取返回值，这一点也体现在了ASP.NET AJAX的使用方法上。看上一篇文章的例子就知道，即使使用了ASP.NET AJAX框架，仍然还是需要用回调函数的，只不过是语法上简化了。
下面，正式给出调用后台类的语法：
    类名.方法名（参数1，参数2，……，参数n，回调函数）
    也就是说，调用上有两个差别：一是不需要使用变量接收返回值，二是要在所有参数后面加一个参数：回调函数。例如，有个类的方法，在后台调用是:
var1 = Class1.Method1(Para1,Para2);
    换到前台JS调用时，就是如下的样子：
Class1.Method1(Para1,Para2,CallBackFunction);
例上面的
//天气方法
        function GetData(cityName)
        {
            WebService1.getWeather(cityName,complete);
         }

    那么，返回值到哪里去取呢？答案是到回调函数中，回调函数的原型是：回调函数名（返回值）。当然，存储返回值变量的名字是开发人员随意取的，然后就可以在回调函数中使用这个返回值变量了
。例如，接着上面程序，写一个函数：
function CallBackFunction(result){}
    则在这个函数中，result就含有Class1.Method1(Para1,Para2,CallBackFunction);的返回值。
例上面的
      //天气回调方法
        function complete(result)
        {
            var data ="";
            for(i =0;i<result.length;i++)
            {
                data+=result+"<br/>";
            }
            document.getElementById("result").innerHTML = data;
        }

为什么不直接调用类中的方法，而非要经过WebService呢？
    上文我曾经说过，ASP.NET AJAX允许我们直接调用后台类中的方法，但是我们不提倡这样做，而是提倡经过WebService的过渡。其原因有如下几点：
    1.要使得某个类可以被JS调用，也需要在其中做一些修改，如增加一些属性（Attribute）等，这会对这些类造成一种“污染”。
    2.我们知道了，使用ASP.NET AJAX框架也需要从回调函数中获取返回值，而不是直接获取。考虑以下情况：如果某段JS需要调用三个后台方法完成一个操作，那么，就需要写三个回调函数。即要经过
“调用第一个方法-第一个回调函数中调用第二个方法-第二个回调函数中调用第三个方法-第三个回调函数中取得返回值”。
    这个过程很麻烦。而使用WebService后，我们可以将这个三个方法封装到一个WebService方法里，因为WebService是支持“变量=类名.方法名”这种传统的调用方法的。这样经过WebService过渡，JS
中只要一个回调函数就可以了。
    3.从本身特性上看，WebService比普通类更适合作为Ajax的后台方法。

logenliqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET AJAX调用WebService

如何在客户端直接调用WebService中的方法？这里结合经验自己写一写1.首先新建一个 ASP.NET AJAX-Enabled Web Site,这样系统为我们自动配置好了环境，这主要体现在Web.config这个文件上，如果已有网站不是ASP.NET AJAX-Enabled Web Site也可以对照修改下Web.config，也可以达到相同的效果。 2.新建一个web服务，WebSe
复制链接

扫一扫