使用AjaxPro.Net框架实现在客户端调用服务端的方法
此文档将使用ajaxpro.net框架实现ajax功能:在客户端异步调用服务端方法。ajaxpro.net是一个优秀的.net环境下的ajax框架,用法很简单,可以查阅相关资料,本文档是一个简单的实例讲述使用ajaxpro的几个关键点。
1、下载ajaxpro 组件。并将ajaxpro.dll引用到网站(或项目)。下载:download latest version 7.7.31.1.
2、修改web.config。在 <system.web> 元素中添加以下代码。
<configuration><system.web> <httphandlers> <!-- 注册 ajax handler,2.0以上框架用ajaxpro.2 -->
<add verb="post,get" path="ajaxpro/*.ashx" type="ajaxpro.ajaxhandlerfactory, ajaxpro.2"/>
</httphandlers> </system.web> </configuration>
3、对ajaxpro在页page_load事件中进行运行时注册。如:
//ajaxpro.utility.registertypeforajax(typeof(所在类的类名));类的类名。如是放在命名空间,则需要写上完整的命名空间(如:namespaces._default)
ajaxpro.utility.registertypeforajax(typeof(testpro1));
4、创建服务器端方法。只要给一个方法加上[ajaxpro.ajaxmethod]标记,该方法就变成一个ajaxpro可进行影射调用的方法。如下:(我现在是新建一个testpro1.aspx页面,在它的cs代码中加入)
[ajaxpro.ajaxmethod]
public string getstring()
{
return "hello ajaxpro";
}
[ajaxpro.ajaxmethod]
public string getservertime()
{
return datetime.now.tostring();
}
5、客户端调用:
<script type="text/javascript">
function gettime() {
alert(testpro1.getservertime().value);
}
function getserverstr() {
//ajaxpro_guide.getstring(getstring_callback); // asynchronous call
//var p = classpro.getservertime().tostring();
alert(testpro1.getstring().value);
}
</script>
页面中加入以下代码:
<input id="button1" type="button" value="获是服务器时间" onclick="gettime()" />
<input id="button3" type="button" value="获是服务器对象" onclick="getstudent()" />
二、扩展,客户端访问服务器对象
1、在app_code中新建类:
public class student
{
private string _name = "郑伯城";
public int age = 30;
public string name
{
get { return this._name; }
set { this._name = value; }
}
}
2、在测试页面testpro1.aspx页面,在它的cs代码中加入
[ajaxpro.ajaxmethod]
public student getstudent()
{//服务端添加getstudent方法
return new student();
}
private student student = null;
[ajaxpro.ajaxmethod]
public void setstudent(student stu)
{
this.student = stu;
string name = this.student.name;
}
3、aspx页面的javascript脚本
测试aspx页面中的脚本
<head id="head1" runat="server">
<title>ajaxpro测试</title>
<script type="text/javascript">
function getstudent() {
var stu = testpro1.getstudent().value;
alert(stu.name + " " + stu.age); //客户js可以访问服务端返回的对象
}
function putstudent() {
var stu = testpro1.getstudent().value;
stu.name = "刘宁";
testpro1.setstudent(stu); //客户提交对象,并且对象的name字段已经改变为“刘宁”了。
alert(stu.name + " " + stu.age); //客户js可以访问服务端返回的对象
}
</script>
</head>
<div><input id="button3" type="button" value="获是服务器对象" onclick="getstudent()" />
<input id="button4" type="button" value="客户端提交对象给服务器" onclick="putstudent()" />
</div>
参考:官网
下一篇: Java实现二维码功能的实例代码