AJAX-AjaxPro的应用
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
AjaxPro的应用
1、首先下载AjaxPro组件。
并将AjaxPro.dll引用到网站(或项目)。
2、修改Web.config。
在<system.web> 元素中添加以下代码。
<configuration>
<system.web>
<httpHandlers>
<!-- Register the ajax handler -->
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers>
</system.web>
</configuration>
3、对AjaxPro在页Page_Load事件中进行运行时注册。
如:
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));//这的_Default是指页面
类的类名。
如是放在命名空间,则需要写上完整的命名空间(如:namespaces._Default)
}
4、创建服务器端方法。
只要给一个方法加上[AjaxPro.AjaxMethod]标记,
该方法就变成一个AjaxPro可进行影射调用的方法。
如下:
[AjaxPro.AjaxMethod]
public string getValue(int a,int b)
{
//该方法我们将实现从客户端传入两个数,在服务器端相加计算后返回到客户端。
return Convert.ToString(a+b);
}
5、客户端调用。
<script language="javascript">
function getValue(){
_Default.getValue(1,2,getGroups_callback);//该处即调用服务器端的_Default.getValue方法。
这在里边需要指定个回调函数,以接受服务器端处理完后返回客户端结果。
form1.TextBox1.value="123";
}
//这个方法用户接受并处理服务器端返回的结果。
function getGroups_callback(response){
var dt=response.value;
alert(dt);
}
</script>
到这一个简单,但已是一个完整的AjaxPro的使用了。
当然AjaxPro 还可做很多更实用的,更强大的功能。
这个仅做个抛砖引玉。
其它的改天整理后再放上来。
请各位注意,实际有AjaxPro.dll和Ajax.dll两个版本,这两个版本使用上虽然差不多,但还是有区别的,主要的区别在下面两点
(1)web.config配置文件不一样
Ajax.dll的配置文件写法为
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
AjaxPro.dll的配置文件写法为
<add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> (2)调用服务器方法的时候方式不一样,有很多朋友就是因为这个原因,发现命名空
间找不到或者对象未定义引用Ajax.dll的时候,调用服务器方法不要加命名空间,应用AjaxPro.dll的时候,调用服务器方法需要加命名空间。
例如当页面设置为这种设置的时候
<%@ Page language="c#" Codebehind="Test.aspx.cs" AutoEventWireup="false" Inherits="Web.Test" %>
客户端调用方式:
Ajax.dll为
var response=Test.GetServerMethod();
alert(response.value);
AjaxPro.dll为
var response=Web.Test.GetServerMethod();
alert(response.value);
-------------------------------------------------------------
AJAX技巧的风起云涌,也使得B/S利用的表现力日益加强,大有逐步吞食C/S 领地之势。
利用ajaxpro.dll,你可以从JavaScript客户调用.NET法子。
首先下载ajaxpro.dll,你可以从获得。
最新版本是6.4.15.1,下载解压后的文件夹中有个AjaxPro.dll,就是它了。
应用VS2005新建web项目,并添加对
AjaxPro.dll的引用,然后在Web配置文件中添加:
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
这个配置项表明所有的ajaxpro/*.ashx恳求(即从客户发送的Ajax恳求)都交给AjaxPro.AjaxHandlerFactory处理,而不是由默认的System.Web.UI.PageHandlerFactory来处理。
新建的web项目有个默认的_Default页面,我们为其加上命名空间如MyAjaxNetTest,然后在_Default的HTML第一句也要加上这个名目空间:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MyAjaxNetTest._Default" %> 然后在PageLoad中注册本页面到AjaxPro中:
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}
测试一:
一切已经筹办就绪了,我们先进行第一个测试,从客户调用服务端的简略法子。
首先在_Default类中添加法子:
[AjaxPro.AjaxMethod]
public string GetServerTime()
{
return DateTime.Now.ToString();
}
客户现在可以在JS中调用这个法子了,如
<script type="text/javascript">
function getTime()
{
alert(MyAjaxNetTest._Default.GetServerTime().value);
}
</script>
然后你可以加个HTML的button,onclick处理函数设为getTime()。
<input id="Button1" type="button" value="button" onclick="getTime()"/> 测试二:
为GetServerTime法子添加static润色,测试仍然成功!
测试三:
简略法子调用已经OK了,GetServerTime法子返回的是一个简略的string,那么服务端可不可以返回稍微繁杂一点的对象了?我们来试试。
先新建一个Student类:
public class Student
{
public string Name = "sky" ;
public int Age = 26;
}
服务端添加GetStudent法子:
[AjaxPro.AjaxMethod]
public Student GetStudent()
{
return new Student();
}
对应的,客户端添加调用:
function getStudent()
{
var stu = MyAjaxNetTest._Default.GetStudent().value ;
alert( + " " + stu.Age) ;
}
遵循前面的加个HTML按钮测试getStudent函数,答案是,一切照我们预感的进行,客户js可以造访服务端返回的对象。
测试四:
最后看看能够在客户端提交对象给服务器,先在服务端添加法子:
1 private Student student = null;
2 [AjaxPro.AjaxMethod]
3 public void SetStudent(Student stu)
4 {
5 this.student = stu;
6 string name = ;
7 } 可以在第六行添加断点,然后当客户端调用时,会进入该断点。
客户端添加调用:
function putStudent()
{
var stu = MyAjaxNetTest._Default.GetStudent().value ;
= "chenqi" ;
MyAjaxNetTest._Default.SetStudent(stu) ;
} 同样,当调用putStudent这个js法子时,服务端进入断点已经表明客户成功的提交了对象,并且对象的Name字段已经转变为“chenqi”了。
测试五:
前面客户设置的都是Student的public字段,那么造访属性如何了?我们将Student定义更改如下:
public class Student
{
private string name = "sky" ;
public int Age = 26;
public string Name
{
get
{
return ;
}
set
{
= value;
}
}
}
再重复前面的测试,效果我想已经在你的料想中了。
单从前面的几个小测试,我已经创造了应用Ajaxpro.dll的方便与迅捷,看来B/S开发不再像我以前感受的那样繁琐了。
异步调用:
function getValue()
{
MyAjaxNetTest._Default.getValue(getGroups_callback);
}
function getGroups_callback(response)
{
var dt = response.value;
alert(dt);
}
***************************************************************** Ajax根基
(1)创立XmlHttp对象
function createXMLHttp()
{
var xmlHttp ;
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest() ;
}
return xmlHttp;
}
(2)POST Ajax恳求
function startRequest()
{
var xmlHttp=createXMLHttp() ;
xmlHttp.onreadystatechange = handleStateChangeComplex ;
xmlHttp.open("POST" ,"Default.aspx?timeStamp="+ new Date().getTime(),true) ; //true为异步false为同步
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded ") ;//Post法子首部设置,必须
xmlHttp.send(null); //send法子必须要,参数一般为null }
(3)处理异步效果
function handleStateChangeComplex()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
document.getElementById("results").innerText = xmlHttp.responseText ;
}
}
}
get法子同步:
function tb(){
var xmlHttp=createXMLHttp();
xmlHttp.open("get","http://localhost/Test/myFile.txt?timeStamp="+ new Date().getTime(),false);
xmlHttp.send(null);
alert("Status is "+xmlHttp.status+" ("+xmlHttp.statusText+")");
alert("Response Text is: "+xmlHttp.responseText);。