ASP.NET AJAX 使用客户端调用服务器端的方法
2009-09-25 06:42
796 查看
Microsoft ASP.NET AJAX可以很方便的让我们在客户端使用脚本调用ASP.NET Web
Services(.asmx),要启用这一特性，像前面提到的一样，必须要配置Web.Config，可以参照Microsoft ASP.NET
AJAX安装目录下的Web.Config，如果是通过ASP.NET AJAX-enabled Web
site模版建立的站点，则不需要再进行设置了。配置节点如下：
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx"
validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory"/>
</httpHandlers>
<system.web>
以上配置节为Web应用程序添加了一个HTTP handler：ScriptHandlerFactory，它的作用是处理脚本调用Web
Service的请求，如果是非脚步对.asmx的调用请求，则转给默认的处理器。
使用脚本调用服务器方法有两种方式，一种是调用常规的ASP.NET Web
Service，另一种直接调用页面代码页上的方法。两种方式都非常简单，对于前者，我们只需在现有的Web Service上增加一个属性：
[System.Web.Script.Services.ScriptService]
而对于页面上的方法，只需给现有方法增加如下特性,并改为静态方法：
[System.Web.Services.WebMethod]
下面我们分别对其进行详细讨论。
Web Service方式
首先为项目添加一个文件夹WebServices，来存放所有要用到的Web Servcie页面，然后在Web
Services文件夹下面添加一个 Web
Service命名为SimpleWebService.asmx，在后台增加一个SayHello方法，并指定WebMethod特性。完整的代码如下：
SimpleWebService.cs
using
System;
using System.Web;
using System.Collections;
using
System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/
")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
public class SimpleWebService :
System.Web.Services.WebService
{
public SimpleWebService()
{
}
[WebMethod]
public string SayHello(string s)
{
return "Hello " + s;
}
}
然后添加一个Web Form,这里取名ServiceMethodDemo.aspx,添加一些JavaScript函数调用Web
Service,完整代码如下：
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="ServiceMethodDemo.aspx.cs"
Inherits="Demo6_ServiceMethodDemo" %>
<!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>Web
Service脚本调用示例</title>
<script type="text/javascript">
// 调用Web Service的JavaScript函数
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
SimpleWebService.SayHello(echoElem.value,
OnSucceeded);
}
// 调用成功后的回调函数
function OnSucceeded(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML
= result;
}
</script>
</head>
<body>
<form id="Form1"
runat="server">
<asp:ScriptManager runat="server"
ID="scriptManager">
<Services>
<asp:ServiceReference path="~/WebServices/SimpleWebService.asmx"
/>
</Services>
</asp:ScriptManager>
<div>
<h2>Web Service脚本调用示例</h2>
<p>请在下面文本框内输入名字，然后点击按钮.</p>
<input
id="EnteredValue" type="text" />
<input id="EchoButton"
type="button"
value="Echo" onclick="EchoUserInput()"
/>
</div>
</form>
<hr/><span
id="Results"></span>
</body>
</html>
最后在浏览器中查看，可以看到我们期望的效果，在页面的文本框中输入你的名字，点击按钮，页面显示出Hello xxx!
Page Method 方式
如果不想独立创建Web Service，而只是希望能够调用页面上的一些方法，那么可以采用Page
Method的的方法。同样的我们添加一个页面PageMethodDemo.aspx，增加一些JavaScript和一个后台方法，注意这个方法必须是静态方法，代码如下：
<script
type="text/javascript">
function PageMethodCall()
{
var
testString = "PageMethodCall";
PageMethods.Test($get('txtName').value,
OnSucceeded);
}
// 页面方法调用完成的回调函数.
function
OnSucceeded(result)
{
// 显示调用结果
var RsltElem =
document.getElementById("Results");
RsltElem.innerHTML =
result;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1" EnablePageMethods="True" runat="server">
//
EnablePageMethods="True"
启用PageMethods模式
</asp:ScriptManager>
<div>
<h2>Page Method</h2>
<input ID="txtName" type="text"
/>
<button id="Button1"
onclick="PageMethodCall();">调用Page
Method</button>
</div>
<hr/>
<div>
<span id="Results"></span>
</div>
</form>
代码页PageMethodDemo.aspx.cs
[System.Web.Services.WebMethod]
public static string Test(string
name)
{
return "Hello " + name + "!";
}
Services(.asmx),要启用这一特性，像前面提到的一样，必须要配置Web.Config，可以参照Microsoft ASP.NET
AJAX安装目录下的Web.Config，如果是通过ASP.NET AJAX-enabled Web
site模版建立的站点，则不需要再进行设置了。配置节点如下：
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx"
validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory"/>
</httpHandlers>
<system.web>
以上配置节为Web应用程序添加了一个HTTP handler：ScriptHandlerFactory，它的作用是处理脚本调用Web
Service的请求，如果是非脚步对.asmx的调用请求，则转给默认的处理器。
使用脚本调用服务器方法有两种方式，一种是调用常规的ASP.NET Web
Service，另一种直接调用页面代码页上的方法。两种方式都非常简单，对于前者，我们只需在现有的Web Service上增加一个属性：
[System.Web.Script.Services.ScriptService]
而对于页面上的方法，只需给现有方法增加如下特性,并改为静态方法：
[System.Web.Services.WebMethod]
下面我们分别对其进行详细讨论。
Web Service方式
首先为项目添加一个文件夹WebServices，来存放所有要用到的Web Servcie页面，然后在Web
Services文件夹下面添加一个 Web
Service命名为SimpleWebService.asmx，在后台增加一个SayHello方法，并指定WebMethod特性。完整的代码如下：
SimpleWebService.cs
using
System;
using System.Web;
using System.Collections;
using
System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/
")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
public class SimpleWebService :
System.Web.Services.WebService
{
public SimpleWebService()
{
}
[WebMethod]
public string SayHello(string s)
{
return "Hello " + s;
}
}
然后添加一个Web Form,这里取名ServiceMethodDemo.aspx,添加一些JavaScript函数调用Web
Service,完整代码如下：
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="ServiceMethodDemo.aspx.cs"
Inherits="Demo6_ServiceMethodDemo" %>
<!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>Web
Service脚本调用示例</title>
<script type="text/javascript">
// 调用Web Service的JavaScript函数
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
SimpleWebService.SayHello(echoElem.value,
OnSucceeded);
}
// 调用成功后的回调函数
function OnSucceeded(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML
= result;
}
</script>
</head>
<body>
<form id="Form1"
runat="server">
<asp:ScriptManager runat="server"
ID="scriptManager">
<Services>
<asp:ServiceReference path="~/WebServices/SimpleWebService.asmx"
/>
</Services>
</asp:ScriptManager>
<div>
<h2>Web Service脚本调用示例</h2>
<p>请在下面文本框内输入名字，然后点击按钮.</p>
<input
id="EnteredValue" type="text" />
<input id="EchoButton"
type="button"
value="Echo" onclick="EchoUserInput()"
/>
</div>
</form>
<hr/><span
id="Results"></span>
</body>
</html>
最后在浏览器中查看，可以看到我们期望的效果，在页面的文本框中输入你的名字，点击按钮，页面显示出Hello xxx!
Page Method 方式
如果不想独立创建Web Service，而只是希望能够调用页面上的一些方法，那么可以采用Page
Method的的方法。同样的我们添加一个页面PageMethodDemo.aspx，增加一些JavaScript和一个后台方法，注意这个方法必须是静态方法，代码如下：
<script
type="text/javascript">
function PageMethodCall()
{
var
testString = "PageMethodCall";
PageMethods.Test($get('txtName').value,
OnSucceeded);
}
// 页面方法调用完成的回调函数.
function
OnSucceeded(result)
{
// 显示调用结果
var RsltElem =
document.getElementById("Results");
RsltElem.innerHTML =
result;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1" EnablePageMethods="True" runat="server">
//
EnablePageMethods="True"
启用PageMethods模式
</asp:ScriptManager>
<div>
<h2>Page Method</h2>
<input ID="txtName" type="text"
/>
<button id="Button1"
onclick="PageMethodCall();">调用Page
Method</button>
</div>
<hr/>
<div>
<span id="Results"></span>
</div>
</form>
代码页PageMethodDemo.aspx.cs
[System.Web.Services.WebMethod]
public static string Test(string
name)
{
return "Hello " + name + "!";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET AJAX 以及AJAXPRO使用客户端调用服务器端的方法--初学者学习
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（5）：服务器端和客户端数据类型的自动转换：基本类型和枚举类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法：服务器端和客户端数据类型的自动转换：复杂类型
- Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（9）：服务器端和客户端数据类型的自动转换：DataTable和DataSet
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（6）：服务器端和客户端数据类型的自动转换：复杂类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（6）：服务器端和客户端数据类型的自动转换：复杂类型
- 使用asp.net ajax的PageMethods来让客户端代码调用服务器端的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（9）：服务器端和客户端数据类型的自动转换：DataTable和DataSet
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（7）：服务器端和客户端数据类型的自动转换：泛型集合类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（7）：服务器端和客户端数据类型的自动转换：泛型集合类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（9）：服务器端和客户端数据类型的自动转换：DataTable和DataSet
- asp.net客户端调用服务器端方法——AjaxPro.2.dll的使用
- Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（10）：服务器端和客户端数据类型的自动转换：以XML方式序列化数据、小结
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（6）：服务器端和客户端数据类型的自动转换：复杂类型
- Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（10）：服务器端和客户端数据类型的自动转换：以XML方式序列化数据、小结
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（8）：服务器端和客户端数据类型的自动转换：数组类型
- 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较