Ajax学习(一)

2021-07-18 02:31:33

Ajax技术在当前的web开发领域显得非常热门、使这个称"新瓶装旧酒"的技术一下子成为人门口中的热门词汇！为了不让自己落伍、在繁忙的工作之余、偶也开始学习Ajax...(这里用的是Ajax.Net框架)
下是一个小例子、来说明Ajax所带来的用户体验!
1.新建一个项目、添加对Ajax.dll的引用
2.web.config中设置
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
.................
<system.web>
3.WebForm1.aspx代码如下：(通过js调用服务端方法)

<HTML>

<HEAD>

<title>Ajax学习(一)</title>

function ClientAdd()
Ajax学习(一)

{

var first=document.all("first");
Ajax学习(一)

var second=document.all ("second");
Ajax学习(一)

var result=document.all ("result");
Ajax学习(一)

result.value=WebForm1.ServerSideAdd(first.value,second.value).value;
Ajax学习(一)

// 调用服务器端方法：类名.方法
Ajax学习(一)

}

</script>

</HEAD>

<body>

<form id="Form1" method="post" runat="server">
Ajax学习(一)

<input id="first" type="text" size="5">+<input id="second" type="text" size="5">=<input id="result" type="text" size="5"> <input id="calc" type="button" value="计算" onclick="ClientAdd()">
Ajax学习(一)

</form>

</body>

</HTML>

4.WebForm1.aspx.cs代码如下：

private void Page_Load(object sender, System.EventArgs e)
Ajax学习(一)

{

Ajax.Utility.RegisterTypeForAjax (typeof(WebForm1));
Ajax学习(一)

}

[Ajax.AjaxMethod ()]
Ajax学习(一)

public int ServerSideAdd(int firstNumber,int secondNumber)
Ajax学习(一)

{

return firstNumber+secondNumber;
Ajax学习(一)

}

5.运行界面如：

在文本框中输入数字后点击"计算按钮"，调用服务器端方法获得结果、但是整个页面并没有刷新、只是结果的值发生了改变、
6.代码下载/Files/chy710/AjaxTest1.rar

本文转自chy710博客园博客，原文链接：http://www.cnblogs.com/chy710/archive/2006/08/25/486382.html，如需转载请自行联系原作者

码农公寓

相关文章