天天看點

使用ASP.Net 3.5 的Ajax與Web服務開發執行個體

本文繼續介紹使用ASP.NET3.5中的AJAX環境中如何從用戶端JavaScript調用Web服務方法。編寫本文的目的在于讓大家深刻了解基于ASP.Net3.5的Ajax和Web的服務,雖然例子比較簡單,但是比較能說明問題。在這裡我又介紹了命名空間System. Web.Script的方式确定用戶端調用Web服務方法。

     在AJAX中調用Web服務方法可以提高Web使用者的體驗,微軟在ASP.NET3.5中的AJAX加入了它的新功能,新的功能可以從用戶端JavaScript調用Web服務方法無重新整理整個頁面。AJAX技術使你能夠調用伺服器端的方法,沒有post back。用戶端腳本可以提出請求的Web方法,并可以通過資料作為輸入參數的方法和資料也可以從伺服器發回給用戶端浏覽器。

      為了使你的應用程式調用的ASP.NET Web service使用用戶端腳本,伺服器異步通信層會自動生成的JavaScript代理類。代理類生成為每個Web服務的

一個<asp:ServiceReference>元素被列入<asp:ScriptManager>控制的頁面。 

<asp:ScriptManager runat="server" ID="scriptManagerId">

     <Services>

            <asp:ServiceReference  Path="WebService.asmx" />

     </Services>

</asp:ScriptManager>

     這是下載下傳的代理類的浏覽器在網頁加載時間,并提供了一個用戶端對象,代理調用方法的Web服務。在調用相應的方法所産生的JavaScript的代理類。該代理類打開通信與網絡服務。這些請求通過的XMLHTTP對象的浏覽器異步通訊。 

      如下圖所示,詳細規定了不同的層上的客戶機和伺服器方面通訊架構。

  <asp:ScriptReference>元素指定注冊一個JavaScript檔案,用來在網頁中。隻有在注冊CallWebServiceMethod.js檔案,您才可以在方法上進行調用,調用Web服務方法的腳本是異步的。獲得傳回值或以确定何時傳回的請求,您必須提供一個成功的回調函數。回調函數被調用時,請求已成功完成,并且它包含的傳回值(如果有的話)從Web方法調用。您也可以提供一個失敗的回調函數來處理錯誤。此外,您還可以通過使用者的背景資料,使用中的回調函數。

如下圖,是WCF和Ajax調用Web service時序圖。 

<system.web>

    <webServices>

        <protocols>

          <clear/>

        </protocols>

      </webServices>

</system.web>

      請求一個Web服務方法通過這些層面。你可以看到如何使用一種方法,要求在一個可用的代理對象和Web請求中,并由一個XMLHttp對象在用戶端浏覽器端運作。在伺服器端,你的要求是與往常一樣是由一個HTTP處理程式,發出的XML/JSON序列化。

如下圖所示,asp.net 3.5調用Ajax與Web服務的類關系圖。

      在AJAX中使用Web服務方法包括兩個步驟:第一步是,建立和定義Web服務。第二個步,是使用用戶端腳本來從一個網頁的服務通話方法。建立一個Web服務:

在System.Web.Scripts.Services命名空間,你可能會發現一個屬性類“ScriptSrvice ”,這需要适用于Web服務類,使Web服務方法可以調用來自用戶端的腳本。這将使代理生成腳本來生成一個代理對象對應于Web服務類。

      同樣,在相同的命名空間,可能會發現另一個屬性類“ScriptMethod”,如果采用此屬性為Web方法,你可以指定哪些HTTP動詞是用來調用一個方法和響應形式。此屬性有三個參數描述如下:

      UseHttpGet :如果設定為true,将調用該方法使用HTTP GET指令。預設值為false 。

      ResponseFormat :指定是否反應将序列化的簡JSON或XML 。預設值為JSON。

      XmlSerializeString :指定是否所有傳回類型,包括字元串類型,是為XML序列化的值将被忽略XmlSerializeString連續的響應來系列化的JSON 。

      現在,建立新的Web使用ASP.NET Web Service模闆在Microsoft Visual Studio 2008和修改Web服務類如下:

using System.Web.Script.Services;

namespace AjaxWebService

{

    [WebService(Namespace = "http://localhost:1382/AjaxWebService/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [ScriptService]

    public class Service : System.Web.Services.WebService

    {

        string myXmlData = @"<?xml version=""1.0"" encoding=""utf-8"" ?>

                <Book>

                    <Title>Programming ASP.NET 3.5, AJAX and Web Services</Title>

                </Book>";

        /// <summary>

        /// This method uses JSON response formatting 

        /// </summary>

        /// <param name="months"></param>

        /// <returns></returns>

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        [WebMethod]

        public string getNextBackupDate(int months)

        {

            return DateTime.Now.AddMonths(months).ToShortDateString();

        }

        /// This method uses XML response formatting

        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]

        public XmlDocument GetBookTitle()

            XmlDocument xmlDoc = new XmlDocument();

            xmlDoc.LoadXml(myXmlData);

            return xmlDoc;

        /// This method uses HTTP-GET protocol to call it

        [ScriptMethod(UseHttpGet = true)]

        public string HelloWorld()

            return "Hello, world";

    }

}

 注:Web服務建立的ScriptService使用如上将不會被浏覽器預設。您需要修改檔案中的設定Web.config檔案如下,以測試上述Web服務。

<webServices>

     <protocols>

       <add name="HttpGet"/> 

       <add name="HttpPost"/>

    </protocols>

</webServices>

      調用Web服務方法使用用戶端腳本,Asp.Net Web服務方法可以說是從用戶端腳本異步不回傳,并沒有重新整理整個頁面。隻有其之間傳輸資料的伺服器和用戶端的浏覽器。

目前,.NET 3.5架構支援Web服務和用戶端的網頁可以在相同的域(同一網站)。 

 現在增加一個新的“Ajax激活Web頁” ,以現有的Web服務項目并添加控件的網頁中指定的标記如下,編寫JavaScript函數調用Web服務和回調方法。調用Web服務方法

是通過使用代理類和參數清單,成功回調函數名,失敗的回調函數,使用者方面是通過額外的參數的要求調用。

<%@ Page  Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AjaxWebService.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>AJAX Web Form</title>

    <script type="text/javascript">

function CallNextDate() 

        AjaxWebService.Service.getNextBackupDate(1, OnSucceeded);

    function CallHelloWorld() 

        AjaxWebService.Service.HelloWorld(OnSucceeded);

   function CallBookTitle() 

        AjaxWebService.Service.GetBookTitle(OnSuccess, OnFail, "XmlDocument");

    // This is the callback function that processes the Web Service return value in JSON format.

    function OnSucceeded(result)

        var myresult = document.getElementById("Text1");

        myresult.value = result;

   // This is the callback function that processes the Web Service return value in XML format.

    function OnSuccess(result)

        myresult.value = "Title: " + result.documentElement.text;

    function OnFail(error)

        myresult.value = "Service Error: " + error.get_message();

     </script>

    <style type="text/css">

        #Text1

            width: 375px;

        #Button2

            width: 140px;

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Services>

        <asp:ServiceReference Path="~/Service.asmx"/>

        </Services>

        </asp:ScriptManager>

        <br />

        Result:           <input id="Text1" type="text" /><br />

        <input id="Button1" type="button" value="Get Server Time" onclick="CallNextDate()" />  

        <input id="Button2" type="button" value="Say Hello World" onclick="CallHelloWorld()" />  

        <input id="Button3" type="button" value="Get Book Title" onclick="CallBookTitle()" />     

        </div>

    </form>

</body>

</html>

      在上面的标記,通知的路徑屬性如何在ServiceReference元素ScriptManager控制點到Web服務類。這使得Web服務方法被稱為從腳本中的default.aspx頁面。内嵌功能CallNextDate , CallHelloWorld , CallBookTitle是用來調用的三個Web服務方法。 OnSuccess和OnFail方法是回調方法,得到執行的Web服務的方法得到了執行。為了使用戶端的Web頁的正常工作,您需要添加以下設定的Web.config檔案。

<runtime>

    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

      <dependentAssembly>

        <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>

        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>

      </dependentAssembly>

        <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>

    </assemblyBinding>

  </runtime>

   本文使用微軟ASP.NET 3.5引用的System.Web.Extensions.dll等DLL,利用内置的ASP.NET3.5中的AJAX技術僅供學習人員參考。

繼續閱讀