ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中能夠在客戶端js中很方便地調用服務器Webservice,以下為一些調用的示例。筆者安裝的ASP.NET 2.0 AJAX
版本為AJAX November CTP。
三個示例分別為:
1 帶參數的WS方法
2?不帶參數的WS方法
3?參數類型為DataTable的WS方法
一、WebMethod
注意要點:
1 WebMethod類需要添加命名空間 Microsoft.Web.Script.Services,此空間需要引用Microsoft.Web.Preview.dll
2 類聲明加入標簽 [ScriptService]
3 在Asp.net 2.0里可以直接用DataTable作為返回類型了,但是需要在Web.config文件添加序列化轉換器的屬性。DataSet、DataTable、DataRow均有轉換器WEB服務1:WS1
using?System.Web;
using?System.Collections;
using?System.Web.Services;
using?System.Web.Services.Protocols;
using?Microsoft.Web.Script.Services;
using?System.Data;
/**////?<summary>
///?WS1?的摘要說明
///?</summary>
[WebService(Namespace?=?"http://tempuri.org/")]
[WebServiceBinding(ConformsTo?=?WsiProfiles.BasicProfile1_1)]
[ScriptService]
public?class?WS1?:?System.Web.Services.WebService?{
????public?WS1?()?{
????????//如果使用設計的組件,請取消注釋以下行?
????????//InitializeComponent();?
????}
????[WebMethod]
????public?string?ServerTime()
????{
????????return?String.Format("now:?{0}",?DateTime.Now);
????}
????[WebMethod]
????public?DataTable?GetDataTable()
????{
????????DataTable?dt?=?new?DataTable("Person");
????????dt.Columns.Add(new?DataColumn("Name",?typeof(string)));
????????dt.Columns.Add(new?DataColumn("LastName",?typeof(string)));
????????dt.Columns.Add(new?DataColumn("Email",?typeof(string)));
????????dt.Rows.Add("kui",?"he",?"hekui168@163.com");
????????dt.Rows.Add("ren",?"chao",?"chaoren888@163.com");
????????return?dt;
????}
}
WEB服務2:WS
using?System;using?System.Web;
using?System.Collections;
using?System.Web.Services;
using?System.Web.Services.Protocols;
using?Microsoft.Web.Script.Services;
/**////?<summary>
///?WS?的摘要說明
///?</summary>
[WebService(Namespace?=?"http://tempuri.org/")]
[WebServiceBinding(ConformsTo?=?WsiProfiles.BasicProfile1_1)]
[ScriptService]
public?class?WS?:?System.Web.Services.WebService?{
????public?WS?()?{
????????//如果使用設計的組件,請取消注釋以下行?
????????//InitializeComponent();?
????}
????[WebMethod]
????[ScriptMethod(UseHttpGet?=?true)]
????public?string?HelloWorld(String?query)
????{
????????string?inputString?=?Server.HtmlEncode(query);
????????if?(!String.IsNullOrEmpty(inputString))
????????{
????????????return?String.Format("hello,?{0}.?",?inputString);
????????}
????????else
????????{
????????????return?"query?string?is?null?or?empty";
????????}
????}
}
二、前臺頁面:
注意要點:
需要使用的后臺WebService的方法均設置在如下位置
????????????<Services>
????????????????<asp:ServiceReference?Path="~/WS.asmx"?/>
????????????????<asp:ServiceReference?Path="~/WS1.asmx"?/>
????????????</Services>
????????</asp:ScriptManager>
Default頁面:
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="Default.aspx.cs"?Inherits="_Default"?%><!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?runat="server">
????<title>Untitled?Page</title>
????<script?language="javascript"?type="text/javascript"?src="js.js">
????</script>
</head>
<body>
????<form?id="form1"?runat="server">
????????<asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????????<Services>
????????????????<asp:ServiceReference?Path="~/WS.asmx"?/>
????????????????<asp:ServiceReference?Path="~/WS1.asmx"?/>
????????????</Services>
????????</asp:ScriptManager>
????????<div>
????????????<asp:Button?ID="Button1"?runat="server"?Text="Button"?OnClientClick="dd();return?false;"?/>
????????????<div?id="time">
????????????</div>
????????????<div?id="List1">
????????????????<asp:DropDownList?ID="ddl1"?runat="server"?Width="187px">
????????????????</asp:DropDownList>
????????????????</div>
????????????
????????</div>
????</form>
</body>
</html>
三、JavaScript程序:
注意要點:
AJAX November CTP 需要用 eval() 方法將其轉換成一個DataTable對象(并且要裁掉最前面的"("),而AJAX December CTP 支持以下方法轉換“Sys.Preview.Data.DataTable.parseFromJson(result)”
????{
????????WS.HelloWorld(???
?????????????????????????'hekui',?
?????????????????????????function(result)?
?????????????????????????{?
????????????????????????????alert(result);?
?????????????????????????}?
?????????????????????);
????????WS1.ServerTime(??
?????????????????????????function(result)?
?????????????????????????{?
????????????????????????????alert(result);?
????????????????????????????var?divTime?=?document.getElementById("time");
????????????????????????????divTime.innerHTML?=?result;
?????????????????????????}?
?????????????????????);
???????WS1.GetDataTable(
?????????????????????????function(result)?
?????????????????????????{
????????????????????????????//?獲取到下拉框控件
????????????????????????????var?List?=?document.getElementById("ddl1");?
???????????????????????????????????????????????????????
????????????????????????????//AJAX?November?CTP?需要用?eval()?方法將其轉換成一個DataTable對象(并且要裁掉最前面的"(")
????????????????????????????var?Text=?result.dataArray.substring(0,result.dataArray.length?-1);????????????
????????????????????????????var?Table?=?eval(?Text);
????????????????????????????
????????????????????????????//AJAX?December?CTP?支持以下方法轉換
//????????????????????????????var?Table?=?Sys.Preview.Data.DataTable.parseFromJson(result);
????????????????????????????
????????????????????????????//清除下拉框原有列表項
????????????????????????????for?(x=List.options.length-1;?x?>?-1;?x--)?
????????????????????????????{
????????????????????????????????List.remove(0);
????????????????????????????}
????????????????????????????
????????????????????????????//從獲取的DataTable添加數據到下拉框列表項
????????????????????????????for?(x=0;?x?<?Table.length;?x++?)
????????????????????????????{
????????????????????????????????//獲取每一行
????????????????????????????????var?Row?=?Table[x];??????????
????????????????????????????????//創建一個列表項??????????????????
????????????????????????????????var?option?=?document.createElement("option");?
????????????????????????????????//列表項顯示文本賦值
????????????????????????????????option.text?=?Row.Name?+?"?"?+?Row.LastName;???
????????????????????????????????//列表項選項值賦值
????????????????????????????????option.value?=?Row.Email;??????????????????????
????????????????????????????????//判斷瀏覽器類型,進行項目添加?????
????????????????????????????????if?(?window.navigator.appName.toLowerCase().indexOf("microsoft")?>?-1)?
???????????????????????????????????List.add(option);??
????????????????????????????????else
???????????????????????????????????List.add(option,?null);??????????
????????????????????????????}
?????????????????????????}
???????????????????????);
????}
示例代碼:/Files/heekui/AJAXStudy.rar
????<scripting>
??????<webServices>
????????<jsonSerialization>
??????????<converters>
????????????<add?name="DataSetConverter"?type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,?Microsoft.Web.Preview"/>
????????????<add?name="DataRowConverter"?type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,?Microsoft.Web.Preview"/>
????????????<add?name="DataTableConverter"?type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,?Microsoft.Web.Preview"/>
??????????</converters>
????????</jsonSerialization>
??????</webServices>
????</scripting>
??</system.web.extensions>
?
總結
以上是生活随笔為你收集整理的ASP.NET 2.0 AJAX中Webservice调用方法示例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一双Nike的正版袜子,要多少钱?
- 下一篇: 《感兴二首》第十三句是什么