ASP.NET AJAX調用WebService

時間 2019-11-07

標籤 asp.net asp ajax 調用 webservice 欄目 ASP 简体版

原文原文鏈接

如何在客戶端直接調用WebService中的方法？html

這裏結合經驗本身寫一寫
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對象。那麼，究竟是什麼給咱們實施了「障眼法」？答案看下圖：
web

上圖就是這個所謂「直接調用」真正的祕密。
如圖，如今假設有個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的後臺方法。框架