您的位置:首页 > 编程语言 > ASP

net 2.0下的asp.net ajax基本使用方法

2008-11-24 18:31 846 查看
net 2.0下的asp.net ajax基本使用方法

一、必要的组件下载



asp.net ajax中用到了几个dll文件,这些可以从网上下载。http://ajax.asp.net站点下可以找到相关的下载。这其中包括:System.Web.Extensions.dll、System.Web.Extensions.Design.dll、AjaxControlkit.dll、AjaxExtensionsToolBox.dll、Microsoft.Web.Preview.dll。其中,System.Web.Extensions.dll与AjaxControlKit.dll这两个组件是最重要的。在将这些组件下载到本地之后,需要将其引入到所需要的项目中。

System.Web.Extensions.dll中所包含的控件:

●ScriptManager

● ScriptManagerProxy

●Timer

●UpdatePanel

●UpdateProgress

AjaxControlToolkit.dll中所包含的控件(扩展了现有的一些控件,同时提供了一些独立的Ajax控件)

● Accordion

● AccordionPane

●AlwaysVisibleControlExtender

●AnimationExtender

●AutoCompleteExtender

●CalendarExtender

●CascadingDropDown

●CollapsiblePanelExtender

●ConfirmButtonExtender

●DragPanelExtender

●DropDownExtender

●DropShadowExtender

●DynamicPopulateExtender

●FilteredTextBoxExtender

●HoverMenuExtender

●ListSearchExtender

●MaskedEditExtneder

●MaskedEditValidator

●ModalPopupExtender

●MutuallyExclusiveCheckBoxExtender

●NoBot

●NumericUpDownExtender

●PaginBulletedListExtender

●PasswordStrength

●PopupControlExtender

●Rating

●ReorderList

●ResizableControlExtender

●RoundedCornersExtender

●SliderExtender

●SlideShowExtender

●TabContainer

●TextBoxWatermarkExtender

●ToggleButtonExtender

●ToolkitScriptManager

●UpdatePanelAnimationExtender

●ValidatorCalloutExtender

二、web.config文件配置

在项目中引用了asp.net ajax组件后,还需要对项目的web.config文件进行配置。web.config文件的配置,请参见:
http://hi.baidu.com/zhenghanzheng/blog/item/72d1c3c3ce385156b319a891.html。
<?xml version="1.0" encoding="utf-8"?>

<!--

注意: 除了手动编辑此文件以外,您还可以使用

Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的

“网站”->“Asp.Net 配置”选项。

设置和注释的完整列表在

machine.config.comments 中,该文件通常位于

/Windows/Microsoft.Net/Framework/v2.x/Config 中

-->

<configuration>

<!--configSections节点,asp.net ajax所需要的配置-->

<configSections>

<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

</sectionGroup>

</sectionGroup>

</sectionGroup>

</configSections>

<appSettings/>

<connectionStrings/>

<system.web>

<!--pages节点,asp.net ajax所需要的配置-->

<pages>

<controls>

<add tagPrefix="AJAX" namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add tagPrefix="AJAX" namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add tagPrefix="AJAX" namespace="Microsoft.Web.UI.Compatibility" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</controls>

</pages>

<!--

设置 compilation debug="true" 将调试符号插入

已编译的页面中。但由于这会

影响性能,因此只在开发过程中将此值

设置为 true。

-->

<compilation debug="false" />

<!--

通过 <authentication> 节可以配置 ASP.NET 使用的

安全身份验证模式,

以标识传入的用户。

-->

<authentication mode="Windows" />

<!--

如果在执行请求的过程中出现未处理的错误,

则通过 <customErrors> 节可以配置相应的处理步骤。具体说来,

开发人员通过该节可以配置

要显示的 html 错误页

以代替错误堆栈跟踪。

<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">

<error statusCode="403" redirect="NoAccess.htm" />

<error statusCode="404" redirect="FileNotFound.htm" />

</customErrors>

-->

<!--httpHandlers节点,asp.net ajax所需要的配置-->

<httpHandlers>

<remove verb="*" path="*.asmx"/>

<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

<add verb="GET,HEAD,POST" path="*.asbx" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

</httpHandlers>

<!--httpModules节点,asp.net ajax所需要的配置-->

<httpModules>

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</httpModules>

</system.web>

<!--system.webServer节点,asp.net ajax所需要的配置-->

<system.webServer>

<validation validateIntegratedModeConfiguration="false"/>

<modules>

<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

</modules>

<handlers>

<remove name="WebServiceHandlerFactory-Integrated"/>

<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services. ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add name="ASBXHandler" verb="GET,HEAD,POST" path="*.asbx" preCondition="integratedMode" type="System.Web.Script.Services. ScriptHandlerFactory,System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>

</handlers>

</system.webServer>

</configuration>

三、调用服务器端方法

(1)调用没有参数的服务器端方法

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

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

<script runat="server">

[System.Web.Services.WebMethod]

public static string ServerDate()

{

return DateTime.Now.ToShortDateString();

}

</script>

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

<head runat="server">

<title>asp.net ajax调用服务器方法</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

function GetServerDate()

{

Loading();

PageMethods.ServerDate(OnSuccess);

}

function Loading()

{

document.getElementById("ServerDate").innerText="Loading";

}

function OnSuccess(Message)

{

document.getElementById("ServerDate").innerText=Message;

}

</script>

<input type="button" value="GetServerTime" onclick="GetServerDate()" />

</div>

<div id="ServerDate"></div>

</form>

</body>

</html>

(2)调用需要参数的服务器方法

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

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

<script runat="server">

[System.Web.Services.WebMethod]

public static string ServerDate()

{

return DateTime.Now.ToShortDateString();

}

[System.Web.Services.WebMethod]

public static String YourName( string firstName , string lastName )

{

return firstName + " " + lastName;

}

</script>

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

<head runat="server">

<title>asp.net ajax调用服务器方法</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

function GetServer(firstName,lastName)

{

Loading();

if ( arguments.length != 2 )

{

PageMethods.ServerDate(OnSuccess);

}

else

{

PageMethods.YourName(firstName,lastName,OnSuccess);//调用带有参数的服务器方法

}

}

function Loading()

{

document.getElementById("ServerDate").innerText="Loading";

}

function OnSuccess(Message)

{

document.getElementById("ServerDate").innerText=Message;

}

</script>

<input type="button" value="GetServerTime" onclick="GetServer()" />

<input type="button" value="GetYourName" onclick="GetServer('henry','yu')" />

</div>

<div id="ServerDate"></div>

</form>

</body>

</html>

说明:

(a)需要调用的服务器端方法必须以System.Web.Services.WebMethod特性进行标记

(b)需要调用的服务器端方法必须为公共静态方法

(c)需要调用的服务器端方法应写在.aspx页面(或对应的后台代码文件)中,不应写在用户控件中

(3)调用WebService

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

<!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>asp.net ajax调用WebService</title>

</head>

<body>

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

<div>

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

<Services>

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

</Services>

</asp:ScriptManager>

<input type="button" value="GetMachineName" onclick="GetMachineName()" />

<script language="javascript">

function GetMachineName(IsUTC)

{

Loading();

Ajax_Test.sample.ServerMachineName(OnSucess);

//Ajax_test为WebService的名命空间

//sample为类名

//ServerMachineName为所要调用的方法的名称

}

function Loading()

{

document.getElementById("ServerMachineName").innerText="正在与服务器进行交互...";

}

function OnSucess(ServerMachineName)

{

document.getElementById("ServerMachineName").innerText=ServerMachineName;

}

</script>

</div>

<div id="ServerMachineName"></div>

</form>

</body>

</html>

(4)关于错误处理

在调用服务端方法或WebService时,服务器端可能会发生异常!在客户端,这些异常分为服务器错误与服务器超时。

(a)服务器错误

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

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

<script runat="server">

[System.Web.Services.WebMethod]

public static float ServerDate(int x, int y)

{

return x / y;

}

</script>

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

<head runat="server">

<title>asp.net ajax调用服务器方法</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

function GetServer(x,y)

{

Loading();

//OnSuccess与OnError是两个回调函数

//OnSuccess表示当调用成功所要执行的回调函数

//OnError表示当调用不成功时所要执行的加调函数

PageMethods.ServerDate(x,y,OnSuccess,OnError);

}

function Loading()

{

document.getElementById("ServerDate").innerText="Loading";

}

//调用成功时的回调函数

function OnSuccess(Message)

{

document.getElementById("ServerDate").innerText=Message;

}

//发生错误时的回调函数,如果所调用的服务器方法在调用时发生错误,会有一个error对象被返回

//这个对象就是客户端的Sys.Net.WebServiceError对象

function OnError(ErrorHander)

{

document.getElementById("ServerDate").innerText='服务器发生错误!';

var ErrorMessage = '是否超时'+ErrorHander.get_timedOut()+'/n错误信息为:' + ErrorHander.get_message() + '/n异常名称为:' + ErrorHander.get_exceptionType() + '/n错误位置为:' + ErrorHander.get_stackTrace();

alert(ErrorMessage);

}

</script>

<input type="button" value="GetServerTime" onclick="GetServer(10,0)" />

</div>

<div id="ServerDate"></div>

</form>

</body>

</html>

说明:当服务器发生错误时,会为客户端返回一个异常实例,该异常类型为Sys.Net.WebServiceError。该类包含以下几个属性:

●timedOut:布尔值,表示服务器是否超时

●message:异常信息描述

●exceptionType:服务器端异常的类型名称

●stackTrace:异常位置

(b)服务器超时

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

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

<script runat="server">

[System.Web.Services.WebMethod]

public static float ServerDate(int x, int y)

{

return x / y;

}

[System.Web.Services.WebMethod]

public static float TimeOutTest()

{

//方法会延迟十秒

System.Threading.Thread.Sleep(10000);

return 0;

}

</script>

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

<head runat="server">

<title>asp.net ajax调用服务器方法</title>

</head>

<body>

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

<div>

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

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

function GetServer()

{

Loading();

//设置超时时间

PageMethods.set_timeout(2000);

//OnSuccess与OnError是两个回调函数

//OnSuccess表示当调用成功所要执行的回调函数

//OnError表示当调用不成功时所要执行的加调函数

PageMethods.TimeOutTest(OnSuccess,OnError);

}

function Loading()

{

document.getElementById("ServerDate").innerText="Loading";

}

//调用成功时的回调函数

function OnSuccess(Message)

{

document.getElementById("ServerDate").innerText=Message;

}

//发生错误时的回调函数,如果所调用的服务器方法在调用时发生错误,会有一个error对象被返回

//这个对象就是客户端的Sys.Net.WebServiceError对象

function OnError(ErrorHander)

{

document.getElementById("ServerDate").innerText='服务器发生错误!';

var ErrorMessage = '是否超时'+ErrorHander.get_timedOut()+'/n错误信息为:' + ErrorHander.get_message() + '/n异常名称为:' + ErrorHander.get_exceptionType() + '/n错误位置为:' + ErrorHander.get_stackTrace();

alert(ErrorMessage);

}

</script>

<input type="button" value="GetServerTime" onclick="GetServer()" />

</div>

<div id="ServerDate"></div>

</form>

</body>

</html>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: