当前页面位置: » 丰搜网 » 文档中心 » 详细内容
ajax.net用户开发指南
概述
ajax依靠服务器作为中介来分发和处理请求。为了完成这项工作，.net封装类依赖于客户端的请求对象，而xmlhttprequest对象被大部分的浏览器支持，因此使用这个对象是一个不错的解决方案。因为封装的目的是隐藏xmlhttprequest的实现，故我们不讨论他的实现细节。
封装类是通过在.net的方法上增加ajax属性标记来实现的，一旦被标记，ajax创建客户端的javascript函数（这类似于客户端编写的javascript函数），并使用xmlhttprequest创建服务器代理，这个代理映射客户端的函数到服务器的处理函数。
复杂吗？不会的，让我们看看下面的简单例子，给出的.net 函数
'vb.net
public function add(firstnumber as integer, secondnumber as integer) as integer
return firstnumber + secondnumber
end sub
|
//c#
public int add(int firstnumber, int secondnumber)
{
return firstnumber + secondnumber;
}
|
ajax.net会立即自动的创建带有两个参数、名字为add的
javascript函数，当客户端调用这个
javascript函数时，请求将从后台送到
服务器端并从将计算结果返回给客户端。
初始安装 我们首先从如何把”.dll”安装到你的项目开始，当然，如果你了解如何使用，这一节可以跳过。
如果你还没有
ajax.dll，可以首先下载
ajax的最新版本。解压文件放到可以被你的项目引用的地方，在
.net项目中，添加上对其的引用，然后就可以开始使用
ajax.dll封装进行开发了。
|
如果你在安装引用时遇到了麻烦，可以参考这个链接的说明:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon/html/vbtskaddingremovingreferences.asp
|
设置httphandle 为了使其可以工作，第一步必须做的是在
web.config中安装设置封装包的httphandle，不去详细解释httphandle是如何工作的，我们只需要了解他们可以用来处理
asp.net请求。例如，所有的目的为*.
aspx的请求可以通过system.
web.ui.pagehandlerfactory类发送到控制句柄，简单的说，我们把任何向
ajax/*.ashx的请求发送到ajax.pagehandlerfactory的请求处理句柄：
＜configuration＞
＜system.web＞
＜httphandlers＞
＜add verb="post,get" path="ajax/*.ashx" type="ajax.pagehandlerfactory, ajax" /＞
＜/httphandlers＞
...
＜system.web＞
＜/configuration＞ |
上面的代码告诉
asp.net把任何匹配到特定的路径（
ajax/*.ashx）请求发送到
ajax.pagehandlerfactory产生的httphandle，而不再是默认的handler factory。你不需要创建
ajax子目录，这是一个只用来临时使用的虚拟的目录，因此别的httphandler可以用他们自己的目录来使用.ashx扩展名的文件。
配置页面 现在我们准备好开始代码编写了。打开一个新的网页或者已经存在的页面，在其codebehind文件中的page_load事件中增加以下代码：
'vb.net
public class index
inherits system.web.ui.page
private sub page_load(sender as object, e as eventargs) handles mybase.load
ajax.utility.registertypeforajax(gettype(index))
'...
end sub
'...
end class |
//c#
public class index : system.web.ui.page{
private void page_load(object sender, eventargs e){
ajax.utility.registertypeforajax(typeof(index));
//...
}
//...
} |
对registertypefor
ajax方法的调用在页面产生如下的
javascript代码（另外一种选择，你也可以人工在页面上添加如下的
javascript代码）
＜script language="javascript" src="ajax/common.ashx"＞＜/script＞
＜script language="javascript"
src="ajax/namespace.pageclass,assemblyname.ashx"＞＜/script＞ |
上面这段代码的粗体部分
namespace.pageclass,
assemblyname含义如下：
namespace.pageclass
|
当前页面的命名空间和类
|
assemblyname
|
当前页面的程序集的名称
|
下面是在
ajaxplay项目中sample.
aspx的示例输出：
＜%@ page inherits="ajaxplay.sample" codebehind="sample.aspx.cs" ... %＞
＜html＞
＜head＞
＜script language="javascript" src="ajax/common.ashx"＞＜/script＞
＜script language="javascript"
src="ajax/ajaxplay.sample,ajaxplay.ashx"＞＜/script＞
＜/head＞
＜body＞
＜form id="form1" method="post" runat="server"＞
...
＜/form＞
＜/body＞
＜/html＞ |
你可以
测试一下，人工通过浏览器将src path(通过查看源文件并copy)打开，一切都能正常的工作。如果输出了无意义的文本表示到目前为止是正确的，如果输出
asp.net错误，则表示中间出现了错误。
即使你不了解httphandle的工作方式，也应该可以理解上面的描述。通过
web.config,我们可以确保发送向
ajax/*.ashx的请求由我们自定义的句柄来处理，很显然，两个脚本标记由自定义句柄处理。
编写服务端函数 现在我们编写
服务器端函数，他们可以被客户端异步的调用。尽管现在还不能支持全部的返回类型，我们仍坚持
服务器端添加功能。在codebehind文件的页面类里，添加下面的方法：
'vb.net
＜ajax.ajaxmethod()＞ _
public function serversideadd (byval firstnumber as integer, byval secondnumber
as integer) as integer
return firstnumber + secondnumber
end function |
//c#
[ajax.ajaxmethod()]
public int serversideadd(int firstnumber, int secondnumber)
{
return firstnumber + secondnumber;
} |
注意，这个函数有
ajax.
ajaxmethod()定制属性，属性服务会告知
ajax封装类为此方法创建一个
javascript代理，这样才能被客户端调用。
定制客户端调用 接下来在客户端用
javascript调用函数。
ajax封装类会创建一个
javascript函数，带有两个参数，名字是 类名.servers
ideadd。作为最基本的功能，我们所需要作的只是调用这个方法并且传递参数：
＜%@ page inherits="ajaxplay.sample" codebehind="sample.aspx.cs" ... %＞
＜html＞
＜head＞
＜script language="javascript" src="ajax/common.ashx"＞＜/script＞
＜script language="javascript"
src="ajax/ajaxplay.sample,ajaxplay.ashx"＞＜/script＞
＜/head＞
＜body＞
＜form id="form1" method="post" runat="server"＞
＜script language="javascript"＞
var response = sample.serversideadd(100,99);
alert(response.value);
＜/script＞
＜/form＞
＜/body＞
＜/html＞ |
当然，我们不能把这么强大的功能仅仅用来通过alert来提醒浏览者，这就是为什么所有的客户端代理（如 类名.servers
ideadd函数）同时带有一个额外的定制属性。这个属性是用来处理
服务器响应的回调函数：
sample.serversideadd(100,99, serversideadd_callback);
function serversideadd_callback(response){
if (response.error != null){
alert(response.error);
return;
}
alert(response.value);
} |
从上面的代码中可以看出，我们为servers
ideadd函数增加了一个额外参数servers
ideadd_callback，这个参数就是用来处理
服务器端响应的客户端函数。这个callback函数接受一个带有四个关键属性的response对象：
value
|
服务器端函数执行的返回值（可能是一个字符串、自定义对象或者dataset）
|
error
|
如果发生错误，则返回错误信息.
|
request
|
原始的xmlhttprequest请求
|
context
|
一个上下文对象
|
我们首先应该检查是否有错误发生，你可以通过在
服务器端函数抛出异常来实现这个error属性。在上面这个例子中，我们简单的alert了一个值，就是value属性；request属性可以用来取得额外的信息（见下面的表格）
|
如果你想了解更多的关于xmlhttprequest的知识，可以查看下面的链接： http://www.quirksmode.org/blog/archives/2005/02/xmlhttp_linkdum.html
|
处理类型 返回一个复杂类型 ajax可以支持除了我们上面servers
ideadd函数返回的int值以外很多类型。他可以直接支持integers, strings, double, booleans, datetime, datasets 和 datatables，也支持简单的自定义类型和数组。其他的类型通过其tostring方式来返回字符串。
返回dataset的工作就像真正的
.net dataset.给出一个返回dataset的
服务器端函数，我们可以通过下面的方法在客户端显示：
＜script language="javascript"＞
//asynchronous call to the mythical "getdataset" server-side function
function getdataset(){
ajaxfunctions.getdataset(getdataset_callback);
}
function getdataset_callback(response){
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.tables != null){
var s = new array();
s[s.length] = "＜table border=1＞";
for(var i=0; i＜ds.tables[0].rows.length; i++){
s[s.length] = "＜tr＞";
s[s.length] = "＜td＞" + ds.tables[0].rows[i].firstname + "＜/td＞";
s[s.length] = "＜td＞" + ds.tables[0].rows[i].birthday + "＜/td＞";
s[s.length] = "＜/tr＞";
}
s[s.length] = "＜/table＞";
tabledisplay.innerhtml = s.join("");
}
else{
alert("error. [3001] " + response.request.responsetext);
}
}
＜/script＞ |
ajax也可以支持自定义类，但是需要这个类是可以被序列化的。如下面的类：
[serializable()]
public class user{
private int _userid;
private string _firstname;
private string _lastname;
public int userid{
get { return _userid; }
}
public string firstname{
get { return _firstname; }
}
public string lastname{
get { return _lastname; }
}
public user(int _userid, string _firstname, string _lastname){
this._userid = _userid;
this._firstname = _firstname;
this._lastname = _lastname;
}
public user(){}
[ajaxmethod()]
public static user getuser(int userid){
//replace this with a db hit or something :)
return new user(userid,"michael", "schwarz");
}
} |
我们需要通过调用registertypefor
ajax向
服务器注册getuser代理：
private void page_load(object sender, eventargs e){
utility.registertypeforajax(typeof(user));
} |
在客户端我们可以通过这样的方式调用getuser函数：
＜script language="javascript"＞
function getuser(userid){
user.getuser(getuser_callback);
}
function getuser_callback(response){
if (response != null && response.value != null){
var user = response.value;
if (typeof(user) == "object"){
alert(user.firstname + " " + user.lastname);
}
}
}
getuser(1);
＜/script＞ |
返回值同
服务器端对象一样有三个属性（firstname, lastname and userid）。
译者注：其他的类型只能由开发者通过在
服务器端函数在返回值时自定义转换为
ajax支持的类型来实现了，
ajax推荐使用tostring方法。
其他工作方式 在其他类注册函数 在上面的例子及描述中，我们都是通过在页面的codebehind文件里完成函数的注册，但并不是说只能在页面的codebehide文件里完成注册，我们也可以在其他类中注册函数。回忆一下，
ajax封装类是通过在特定类里面查找那些有
ajax.
ajaxmethod()属性的方法来完成工作的，这些类在客户端又通过两个script片断来完成返回值描述。使用
ajax.utility.registertypefor
ajax，我们可以得到任何我们想得到类的详细内容。例如，下面的例子可以说明我们在其他类中使用
服务器端函数是合法的：
public class ajaxfunctions
＜ajax.ajaxmethod()＞ _
public function validate(username as string, password as string) as boolean
'do something
'return something
end function
end class |
不过我们需要首先在调用页面注册这个代理类，类的名字不再是页面类，而是我们使用的这个类：
'vb.net
private sub page_load(sender as object, e as eventargs) handles mybase.load
ajax.utility.registertypeforajax(gettype(ajaxfunctions))
'...
end sub |
//c#
private void page_load(object sender, eventargs e){
ajax.utility.registertypeforajax(typeof(ajaxfunctions));
//...
} |
记住，客户端调用使用这种格式的名字＜classname＞.＜serversidefunctionname＞。因此，如果上面的servers
ideadd函数位于
ajaxfunctions类，而不是页面类的话，客户端调用则变为：
ajaxfunctions.servers
ideadd(1,2)
代理是怎样工作的呢？ 第二个script标签，如下面的示例
＜script type="text/
javascript" src="/cqyd/
ajax/cqyd.schemesendwatch,cqyd.ashx"＞＜/script＞
是由
ajax utility通过命名空间、类以及页面程序集自动生成的（当然也可以人工加入），从这一点我们可以想到
ajax.pagehandlerfactory是通过反射来取得有定制属性的函数的细节。很显然，handler寻找带有
ajaxmethod定制属性的函数，取得他们的特征（返回类型、名称、参数）并依据这些信息创建客户端代理。特别的，
ajax创建一个与类型相同的
javascript对象作为代理。
返回unicode字符 ajax.net可以从
服务器端向客户端返回unicode字符，为了做到这一点，在服务端函数返回时返回的值必须是
html编码的：
[ajax.ajaxmethod]
public string test1(string name, string email, string comment){
string html = "";
html += "hello " + name + "
";
html += "thank you for your comment ＜b＞";
html += system.web.httputility.htmlencode(comment);
html += "＜/b＞.";
return html;
} |
sessionstate
在服务端函数，你可能需要接受传送的session信息，为了做到这一点，必须要在想实现这个方式的服务端函数的
ajax.
ajaxmethod属性上传递一个参数。
在查看
ajax可以支持session的时候，我们先看看其他的特征。在下面这个例子中，我们有一个文档管理系统，当一个用户对文档进行编辑的时候会给这个文档加锁，其他用户需要等到这个文档可用时才能修改。不使用
ajax，用户需要不断等待刷新，因为不得不不断的去检查文档的状态是否为可用，这当然不是一个很好的方案。用
ajax的session state支持，这就比较容易了。
我们首先写一个函数，这个函数通过遍历文档id找到用户需要的文档，存储到session里，并返回没有占用的文档：
'vb.net
＜ajax.ajaxmethod(httpsessionstaterequirement.read)＞ _
public function documentreleased() as arraylist
if httpcontext.current.session("documentswaiting") is nothing then
return nothing
end if
dim readydocuments as new arraylist
dim documents() as integer = ctype(httpcontext.current.session("documentswaiting"), integer())
for i as integer = 0 to documents.length - 1
dim document as document = document.getdocumentbyid(documents(i))
if not document is nothing andalso document.status = documentstatus.ready then
readydocuments.add(document)
end if
next
return readydocuments
end function |
//c#
[ajax.ajaxmethod(httpsessionstaterequirement.read)]
public arraylist documentreleased(){
if (httpcontext.current.session["documentswaiting"] == null){
return null;
}
arraylist readydocuments = new arraylist();
int[] documents = (int[])httpcontext.current.session["documentswaiting"];
for (int i = 0; i ＜ documents.length; ++i){
document document = document.getdocumentbyid(documents[i]);
if (document != null && document.status == documentstatus.ready){
readydocuments.add(document);
}
}
return readydocuments;
}
} |
我们在属性参数中指明了httpsessionstaterequirement.read（还可以是write and readwrite）
下面写
javascript函数来使用这个方法带来的结果：
＜script language="javascript"＞
function documentsready_callback(response){
if (response.error != null){
alert(response.error);
return;
}
if (response.value != null && response.value.length ＞ 0){
var div = document.getelementbyid("status");
div.innerhtml = "the following documents are ready!＜br /＞";
for (var i = 0; i ＜ response.value.length; ++i){
div.innerhtml += "＜a href=\"edit.aspx?documentid=" + response.value[i].documentid + "\"＞" + response.value[i].name + "＜/a＞＜br /＞";
}
}
settimeout('page.documentreleased(documentsready_callback)', 10000);
}
＜/script＞
＜body onload="settimeout('document.documentreleased(documentsready_callback)', 10000);"＞ |
页面加载后每10秒钟向
服务器函数请求一次。如果有返回，则call back函数检查response，并把最新的结果显示出来。
结论 ajax技术可以给客户端提供丰富的客户体验，而
ajax.net为您容易的实现这样强大的功能提供了可能。
