使用ASP.Net 3.5的Ajax與Web服務(wù)開發(fā)實例
在這里我又介紹了命名空間System.Web.Script的方式確定客戶端調(diào)用Web服務(wù)方法。
在AJAX中調(diào)用Web服務(wù)方法可以提高Web用戶的體驗，微軟在ASP.NET3.5中的AJAX加入了它的新功能，新的功能可以從客戶端JavaScript調(diào)用Web服務(wù)方法無刷新整個頁面。AJAX技術(shù)使你能夠調(diào)用服務(wù)器端的方法，沒有post back。客戶端腳本可以提出請求的Web方法，并可以通過數(shù)據(jù)作為輸入?yún)?shù)的方法和數(shù)據(jù)也可以從服務(wù)器發(fā)回給客戶端瀏覽器。
為了使你的應(yīng)用程序調(diào)用的ASP.NET Web service使用客戶端腳本，服務(wù)器異步通信層會自動生成的JavaScript代理類。代理類生成為每個Web服務(wù)的一個
<asp:ScriptManager id=scriptManagerId runat="server">
<SERVICES>
<asp:ServiceReference Path="WebService.asmx"></asp:ServiceReference>
</SERVICES>
</asp:ScriptManager> |
這是下載的代理類的瀏覽器在網(wǎng)頁加載時間，并提供了一個客戶端對象，代理調(diào)用方法的Web服務(wù)。在調(diào)用相應(yīng)的方法所產(chǎn)生的JavaScript的代理類。該代理類打開通信與網(wǎng)絡(luò)服務(wù)。這些請求通過的XMLHTTP對象的瀏覽器異步通訊。
如下圖所示，詳細規(guī)定了不同的層上的客戶機和服務(wù)器方面通訊框架。
如下圖，是WCF和Ajax調(diào)用Web service時序圖。
<SYSTEM.WEB>
<WEBSERVICES>
<PROTOCOLS>
<CLEAR />
</PROTOCOLS>
</WEBSERVICES>
</SYSTEM.WEB> |
請求一個Web服務(wù)方法通過這些層面。你可以看到如何使用一種方法，要求在一個可用的代理對象和Web請求中，并由一個XMLHttp對象在客戶端瀏覽器端運行。在服務(wù)器端，你的要求是與往常一樣是由一個HTTP處理程序，發(fā)出的XML/JSON序列化。
如下圖所示，asp.net 3.5調(diào)用Ajax與Web服務(wù)的類關(guān)系圖。
在AJAX中使用Web服務(wù)方法包括兩個步驟：***步是，創(chuàng)建和定義Web服務(wù)。第二個步，是使用客戶端腳本來從一個網(wǎng)頁的服務(wù)通話方法。創(chuàng)建一個Web服務(wù)：
在System.Web.Scripts.Services命名空間，你可能會發(fā)現(xiàn)一個屬性類“ScriptSrvice ”，這需要適用于Web服務(wù)類，使Web服務(wù)方法可以調(diào)用來自客戶端的腳本。這將使代理生成腳本來生成一個代理對象對應(yīng)于Web服務(wù)類。
同樣，在相同的命名空間，可能會發(fā)現(xiàn)另一個屬性類“ScriptMethod”，如果采用此屬性為Web方法，你可以指定哪些HTTP動詞是用來調(diào)用一個方法和響應(yīng)形式。
此屬性有三個參數(shù)描述如下:
UseHttpGet ：如果設(shè)置為true，將調(diào)用該方法使用HTTP GET命令。默認值為false 。
ResponseFormat ：指定是否反應(yīng)將序列化的簡JSON或XML 。默認值為JSON。
XmlSerializeString ：指定是否所有返回類型，包括字符串類型，是為XML序列化的值將被忽略XmlSerializeString連續(xù)的響應(yīng)來系列化的JSON 。
現(xiàn)在，創(chuàng)建新的Web使用ASP.NET Web Service模板在Microsoft Visual Studio 2008和修改Web服務(wù)類如下:
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>
</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();
}
/// <SUMMARY>
/// This method uses XML response formatting
/// </SUMMARY>
/// <RETURNS></RETURNS>
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
[WebMethod]
public XmlDocument GetBookTitle()
{
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(myXmlData);
return xmlDoc;
}
/// <SUMMARY>
/// This method uses HTTP-GET protocol to call it
/// </SUMMARY>
/// <RETURNS></RETURNS>
[ScriptMethod(UseHttpGet = true)]
[WebMethod]
public string HelloWorld()
{
return "Hello, world";
}
}
}注：Web服務(wù)創(chuàng)建的ScriptService使用如上將不會被瀏覽器默認。您需要修改文件中的設(shè)置Web.config文件如下，以測試上述Web服務(wù)。
<WEBSERVICES>
<PROTOCOLS>
<ADD name="HttpGet" />
<ADD name="HttpPost" />
</PROTOCOLS>
</WEBSERVICES> |
調(diào)用Web服務(wù)方法使用客戶端腳本，Asp.Net Web服務(wù)方法可以說是從客戶端腳本異步不回傳，并沒有刷新整個頁面。只有其之間傳輸數(shù)據(jù)的服務(wù)器和客戶端的瀏覽器。
目前，.NET 3.5框架支持Web服務(wù)和客戶端的網(wǎng)頁可以在相同的域（同一網(wǎng)站）。
現(xiàn)在增加一個新的“Ajax激活Web頁” ，以現(xiàn)有的Web服務(wù)項目并添加控件的網(wǎng)頁中指定的標(biāo)記如下，編寫JavaScript函數(shù)調(diào)用Web服務(wù)和回調(diào)方法。調(diào)用Web服務(wù)方法是通過使用代理類和參數(shù)列表，成功回調(diào)函數(shù)名，失敗的回調(diào)函數(shù)，用戶方面是通過額外的參數(shù)的要求調(diào)用。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AjaxWebService.Default" %>
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD runat="server">
<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)
{
var myresult = document.getElementById("Text1");
myresult.value = "Title: " + result.documentElement.text;
}
// This is the callback function that processes the Web Service return value in XML format.
function OnFail(error)
{
var myresult = document.getElementById("Text1");
myresult.value = "Service Error: " + error.get_message();
}
</SCRIPT>
<STYLE type=text/css>
#Text1
{
width: 375px;
}
#Button2
{
width: 140px;
}
</STYLE>
<FORM id=form1 runat="server">
<DIV>
<asp:ScriptManager id=ScriptManager1 runat="server">
<SERVICES>
<asp:ServiceReference Path="~/Service.asmx"></asp:ServiceReference>
</SERVICES>
</asp:ScriptManager>
<BR>
Result: <INPUT id=Text1><BR>
<BR>
<INPUT id=Button1 onclick=CallNextDate() type=button value="Get Server Time">
<INPUT id=Button2 onclick=CallHelloWorld() type=button value="Say Hello World">
<INPUT id=Button3 onclick=CallBookTitle() type=button value="Get Book Title">
<BR>
<BR>
<BR>
</DIV>
</FORM>
在上面的標(biāo)記，通知的路徑屬性如何在ServiceReference元素ScriptManager控制點到Web服務(wù)類。這使得Web服務(wù)方法被稱為從腳本中的default.aspx頁面。
內(nèi)嵌功能CallNextDate ， CallHelloWorld ， CallBookTitle是用來調(diào)用的三個Web服務(wù)方法。 OnSuccess和OnFail方法是回調(diào)方法，得到執(zhí)行的Web服務(wù)的方法得到了執(zhí)行。為了使客戶端的Web頁的正常工作，您需要添加以下設(shè)置的Web.config文件。
<RUNTIME>
<ASSEMBLYBINDING xmlns="urn:schemas-microsoft-com:asm.v1">
<DEPENDENTASSEMBLY>
<ASSEMBLYIDENTITY name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35" />
<BINDINGREDIRECT newVersion="3.5.0.0" oldVersion="1.0.0.0-1.1.0.0" />
</DEPENDENTASSEMBLY>
<DEPENDENTASSEMBLY>
<ASSEMBLYIDENTITY name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35" />
<BINDINGREDIRECT newVersion="3.5.0.0" oldVersion="1.0.0.0-1.1.0.0" />
</DEPENDENTASSEMBLY>
</ASSEMBLYBINDING>
</RUNTIME>本文使用微軟ASP.NET 3.5引用的System.Web.Extensions.dll等DLL，利用內(nèi)置的ASP.NET3.5中的AJAX技術(shù)僅供學(xué)習(xí)人員參考。
【編輯推薦】
