使用ASP.Net 3.5的Ajax與Web服務(wù)開發(fā)實(shí)例
在這里我又介紹了命名空間System.Web.Script的方式確定客戶端調(diào)用Web服務(wù)方法。
在AJAX中調(diào)用Web服務(wù)方法可以提高Web用戶的體驗(yàn)，微軟在ASP.NET3.5中的AJAX加入了它的新功能，新的功能可以從客戶端JavaScript調(diào)用Web服務(wù)方法無刷新整個(gè)頁(yè)面。AJAX技術(shù)使你能夠調(diào)用服務(wù)器端的方法，沒有post back。客戶端腳本可以提出請(qǐng)求的Web方法，并可以通過數(shù)據(jù)作為輸入?yún)?shù)的方法和數(shù)據(jù)也可以從服務(wù)器發(fā)回給客戶端瀏覽器。
為了使你的應(yīng)用程序調(diào)用的ASP.NET Web service使用客戶端腳本，服務(wù)器異步通信層會(huì)自動(dòng)生成的JavaScript代理類。代理類生成為每個(gè)Web服務(wù)的一個(gè)
<asp:ScriptManager id=scriptManagerId runat="server">
<SERVICES>
<asp:ServiceReference Path="WebService.asmx"></asp:ServiceReference>
</SERVICES>
</asp:ScriptManager> |
這是下載的代理類的瀏覽器在網(wǎng)頁(yè)加載時(shí)間，并提供了一個(gè)客戶端對(duì)象，代理調(diào)用方法的Web服務(wù)。在調(diào)用相應(yīng)的方法所產(chǎn)生的JavaScript的代理類。該代理類打開通信與網(wǎng)絡(luò)服務(wù)。這些請(qǐng)求通過的XMLHTTP對(duì)象的瀏覽器異步通訊。
如下圖所示，詳細(xì)規(guī)定了不同的層上的客戶機(jī)和服務(wù)器方面通訊框架。
如下圖，是WCF和Ajax調(diào)用Web service時(shí)序圖。
<SYSTEM.WEB>
<WEBSERVICES>
<PROTOCOLS>
<CLEAR />
</PROTOCOLS>
</WEBSERVICES>
</SYSTEM.WEB> |
請(qǐng)求一個(gè)Web服務(wù)方法通過這些層面。你可以看到如何使用一種方法，要求在一個(gè)可用的代理對(duì)象和Web請(qǐng)求中，并由一個(gè)XMLHttp對(duì)象在客戶端瀏覽器端運(yùn)行。在服務(wù)器端，你的要求是與往常一樣是由一個(gè)HTTP處理程序，發(fā)出的XML/JSON序列化。
如下圖所示，asp.net 3.5調(diào)用Ajax與Web服務(wù)的類關(guān)系圖。
在AJAX中使用Web服務(wù)方法包括兩個(gè)步驟：***步是，創(chuàng)建和定義Web服務(wù)。第二個(gè)步，是使用客戶端腳本來從一個(gè)網(wǎng)頁(yè)的服務(wù)通話方法。創(chuàng)建一個(gè)Web服務(wù)：
在System.Web.Scripts.Services命名空間，你可能會(huì)發(fā)現(xiàn)一個(gè)屬性類“ScriptSrvice ”，這需要適用于Web服務(wù)類，使Web服務(wù)方法可以調(diào)用來自客戶端的腳本。這將使代理生成腳本來生成一個(gè)代理對(duì)象對(duì)應(yīng)于Web服務(wù)類。
同樣，在相同的命名空間，可能會(huì)發(fā)現(xiàn)另一個(gè)屬性類“ScriptMethod”，如果采用此屬性為Web方法，你可以指定哪些HTTP動(dòng)詞是用來調(diào)用一個(gè)方法和響應(yīng)形式。
此屬性有三個(gè)參數(shù)描述如下:
UseHttpGet ：如果設(shè)置為true，將調(diào)用該方法使用HTTP GET命令。默認(rèn)值為false 。
ResponseFormat ：指定是否反應(yīng)將序列化的簡(jiǎn)JSON或XML 。默認(rèn)值為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使用如上將不會(huì)被瀏覽器默認(rèn)。您需要修改文件中的設(shè)置Web.config文件如下，以測(cè)試上述Web服務(wù)。
<WEBSERVICES>
<PROTOCOLS>
<ADD name="HttpGet" />
<ADD name="HttpPost" />
</PROTOCOLS>
</WEBSERVICES> |
調(diào)用Web服務(wù)方法使用客戶端腳本，Asp.Net Web服務(wù)方法可以說是從客戶端腳本異步不回傳，并沒有刷新整個(gè)頁(yè)面。只有其之間傳輸數(shù)據(jù)的服務(wù)器和客戶端的瀏覽器。
目前，.NET 3.5框架支持Web服務(wù)和客戶端的網(wǎng)頁(yè)可以在相同的域（同一網(wǎng)站）。
現(xiàn)在增加一個(gè)新的“Ajax激活Web頁(yè)” ，以現(xiàn)有的Web服務(wù)項(xiàng)目并添加控件的網(wǎng)頁(yè)中指定的標(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控制點(diǎn)到Web服務(wù)類。這使得Web服務(wù)方法被稱為從腳本中的default.aspx頁(yè)面。
內(nèi)嵌功能CallNextDate ， CallHelloWorld ， CallBookTitle是用來調(diào)用的三個(gè)Web服務(wù)方法。 OnSuccess和OnFail方法是回調(diào)方法，得到執(zhí)行的Web服務(wù)的方法得到了執(zhí)行。為了使客戶端的Web頁(yè)的正常工作，您需要添加以下設(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í)人員參考。
【編輯推薦】
