65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 AJAX 扩展工具包 [Script Manager] 调用 Web 服务

Pareen Vatani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.67/5 (2投票s)

2011年4月24日

CPOL

4分钟阅读

viewsIcon

45734

downloadIcon

749

使用代理从 JavaScript 调用 Web 方法。

Sample Image

引言

代理类是由服务器自动生成并在页面加载时下载到浏览器的脚本。代理类提供了一个客户端对象，该对象表示 Web 服务暴露的方法。通过 XMLHTTP 对象异步进行调用。

有两种方法可以发出 Web 服务请求

  1. 使用 HTTP POST 动词调用 Web 服务。POST 请求有一个包含浏览器发送到服务器的数据的正文。它没有大小限制。因此，当数据大小超过 GET 请求的固有大小限制时，您可以使用 POST 请求。客户端将请求序列化为 JSON 格式，并将其作为 POST 数据发送到服务器。服务器将 JSON 数据反序列化为 .NET Framework 类型，并执行实际的 Web 服务调用。在响应过程中，服务器将返回值序列化并将其传回客户端，客户端将其反序列化为 JavaScript 对象以进行处理。
  2. 使用 HTTP GET 动词调用 Web 服务。这类似于 POST 请求的功能，但有以下区别：
    • 客户端使用查询字符串将参数发送到服务器。
    • GET 请求只能调用使用 ScriptMethodAttribute 属性配置的 Web 服务方法。
    • 数据大小受浏览器允许的 URL 长度限制。

背景

在尝试本教程之前，了解 AJAX 方法和 REST 架构的工作原理非常重要。

使用代码

我使用 .NET Framework 4.0 开发了示例。如果使用早期版本，可能需要更改一些代码。在使用示例之前，必须预先安装 Microsoft AJAX 扩展工具包。

  1. 创建一个 ASP.NET Web 应用程序或一个启用了 ASP.NET AJAX 的应用程序。
  2. 向项目中添加一个新的 Web 服务项。
  3. 您将看到 Web 服务中实现了一个默认的 HelloWorld () 方法。但我们将实现自己的方法。
  4. 将此代码复制到类中。在此，[WebMethod] 属性表示该方法将通过 Web 服务供调用。[ScriptMethod] 属性表示该方法的 GET 调用将通过 JavaScript 可用。
    5. [WebMethod]
[ScriptMethod(UseHttpGet = true)]
public  string Add(int a, int b)
{
    return (a + b).ToString();
}
  5. 通过运行程序来测试您的 Web 服务。如果 Web 服务未设置为“设置为启动页”，则需要调用它。请记住，为了避免以后出现与动态端口相关的错误，您应该在 IIS 中创建应用程序。
  6. 现在，如果一切正常，我们将生成客户端代理 JS 文件。它将自动从服务器创建。因此，在浏览器中键入 URL https:///webservicename.asmx/js。调用此 URL 后，系统会要求您保存文件。您可以将其保存在脚本文件夹中。请记住将文件保存为带有“.js”扩展名的文件。
  7. 请在您的 web.config 文件中添加以下几行。
    8. <httpHandlers >
  <remove verb="*" path="*.asmx"/>
  <add verb="*" path="*.asmx"
  type="System.Web.Script.Services.ScriptHandlerFactory"
  validate="false"/>

  <add verb="GET,HEAD" path="ScriptResource.axd"
       type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, 
             Version=4.0.0.0, Culture=neutral,PublicKeyToken=31BF3856AD364E35" 
       validate="false"/>
</httpHandlers>

    根据您使用的框架，可能需要更改 System.Web.Script.Services.ScriptHandlerFactory 类型。如果遇到类型错误，您可以轻松地在网上搜索或给我留言。

  8. 在代码隐藏文件 (default.aspx.cs) 中放入以下代码。基本上，我们正在从 ASP.NET 页面调用 WebService。
    9. //Create the webservice Object     
MyService obj = new MyService();

protected void Page_Load(object sender, EventArgs e)
{
    //Call the Add method inside the created web service.
    //The Ptag is a server side Paragraph tag.
    //you can also do respone.write for testing.
    ptag.InnerHtml = obj.Add(1, 2);  
}
  9. 测试应用程序以查看一切是否正常工作。如果所有内容都打印正确，则意味着您已成功实现 Web 服务并从服务器端调用了它。
  10. 现在我们将从客户端调用它，即从 JavaScript 调用。此功能由 ScriptManager 控件提供，该控件是 AJAX 扩展工具包的一部分。
  11. 将 ScriptManager 添加到您的页面。页面中只能有一个 ScriptManager。在 ScriptManager 控件代码中输入以下代码：
    12. <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/ClientProxy.js"/>
    </Scripts>
    <Services>
        <asp:ServiceReference  Path="~/MyService.asmx"/>
    </Services>
</asp:ScriptManagerProxy>

    ScriptReference 路径应包含指向已生成 JS 文件的路径 [在第 6 点中提到]。ServiceReference 应包含指向 WebService 的路径。

  12. 在同一页面上，您需要引用 Microsoft AJAX 库。下面是对服务器将生成的 JavaScript 的动态引用。请记住，这些文件的包含顺序要相同。
    13. <script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="MyService.asmx/js" type="text/javascript"></script>
  13. 在您的 head 部分实现以下代码：
    14. <script language="javascript" type="text/javascript">
    function Button1_onclick() {
        ClientProxySample.MyService.Add(10, 20, OnsuccessComplete, null, null);
    }

    function OnsuccessComplete(result) {
        alert(result);
    }

</script>

//Button that calls the function
<input id="Button1" type="button" value="Call Webservice via proxy" 
       onclick="return Button1_onclick()" />

    基本上，我们创建了一个名为 Button1_onclick() 的函数，它将由按钮的 onclick 事件调用。第二行是对 Web 服务 Add 方法的调用。ClientProxySample 是命名空间。如果您正确引用了代码，您将通过智能感知获得命名空间和类。如果 WebService 调用成功，将执行 OnsuccessComplete(result)。

  14. 运行程序，瞧！您应该会看到一个包含从客户端调用的 Web 服务结果的警报。

关注点

在 Fiddler 中测试代码时，我很容易就能看到数据在网络上传输。这可以通过实现 SSL 来保护。您也可以使用 WSDL 工具生成的代理类。

© . All rights reserved.