下班了,刚到家,老婆在做饭,小家伙在玩玩具,暂时没骚扰我。呵呵!趁这空闲写会博客。前两天答应改造DynAjax为JQuery版本,今天就完成这个任务吧。
上一篇随笔介绍了轻量级的Ajax解决方案DynAjax,可惜原作者只有写支持Prototype.js版本的。
DynAjax用到Prototype.js特殊用法的地方不多,就dynAjax.aspx和dynAjax.aspx.cs。
特殊用法分别是(红色部分标出):
- var DynAjaxManager = Class.create();dynAjax.aspx第14行
- new Ajax.Request(....)dynAjax.aspx第25行至41行
- parameters: .... encodeURIComponent(Object.toJSON(args)),dynAjax.aspx第28行
- dynaResult = request.responseText.evalJSON();dynAjax.aspx第30行
以上是dynAjax.aspx的,下面的是dynAjax.aspx.cs的:
- dynamicJsText += "var " + className + "Class = Class.create();\n";dynAjax.aspx.cs第64行
分别说说红色部分的用法:
- Class.create() 新建一个类,JQuery中我没找到替代功能,用function 类名(){}代替。
- new Ajax.Request() 相当于JQuery的$.ajax();
- Object.toJSON(xxx) 把xxx转换为JSON字符串;JQuery中也没找到替代函数,用http://www.json.org/js.html 的json2.js的 JSON.stringify(xxx)代替;
- responseText 返回数据的文本形式;发现JQuery中这个没必要,去掉无妨。
- evalJSON() 将JSON字符串转换为JSON对象;JQuery没有可替代对象,同样借助json2.js 的JSON.parse(xxx);不过我还是推荐用Javascript内建的eval(‘(‘+xxx+’)’);因为JSON.parse目前版本不完善,会碰到转不了的情况,以后再分析吧
按以上方法改版后,文件变动如下:
- prototype.js 删
- jquery.js增
- json2.js增
改版后dynAjax.aspx代码如下:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
dynAjax.aspx.cs
"
Inherits
=
"
_dynAjax
"
%>
/* *********************************************************************
* DYNAJAX Project - code by Benoit BEGUIN
* first release: october 2007
* last update: february 2008
* Paris, France
*
* DynAjax web site: http://www.dynajax.org/
* Any question: mailto:admin@dynajax.org
* Company support: http://www.odesys.fr
********************************************************************* */
/* ------- GENERIC CONTENT ------- */
function DynAjaxManager(){}
DynAjaxManager.prototype = {
initialize: function () {},
getDynaData: function (classId, methodName, args, callBackMethod) {
var dynaResult = null ;
var asyncCall = false ;
if (callBackMethod && typeof callBackMethod == " function " ) {
asyncCall = true ;
}
$.ajax({
type: " POST " ,
url: " AjaxDataHandlers/DynAjaxHandler.aspx " ,
data: " classId= " + encodeURIComponent(classId) + " &methodName= " + encodeURIComponent(methodName) + " &methodArgs= " + encodeURIComponent(JSON.stringify(args)),
async:asyncCall,
success: function (request){
dynaResult = eval( ' ( ' + request + ' ) ' ); // JSON.parse(request);
if (callBackMethod) {
callBackMethod(dynaResult);
}
},
error: function (e) {
dynaResult = null ;
if (callBackMethod) {
callBackMethod(dynaResult);
}
}
});
return dynaResult;
}
};
var dynAjaxManager = new DynAjaxManager();
/* ------- END OF GENERIC CONTENT ------- */
/* ------- DYNAMIC CONTENT ------- */
<%= dynamicJsText %>
/* ------- END OF DYNAMIC CONTENT ------- */
/* *********************************************************************
* DYNAJAX Project - code by Benoit BEGUIN
* first release: october 2007
* last update: february 2008
* Paris, France
*
* DynAjax web site: http://www.dynajax.org/
* Any question: mailto:admin@dynajax.org
* Company support: http://www.odesys.fr
********************************************************************* */
/* ------- GENERIC CONTENT ------- */
function DynAjaxManager(){}
DynAjaxManager.prototype = {
initialize: function () {},
getDynaData: function (classId, methodName, args, callBackMethod) {
var dynaResult = null ;
var asyncCall = false ;
if (callBackMethod && typeof callBackMethod == " function " ) {
asyncCall = true ;
}
$.ajax({
type: " POST " ,
url: " AjaxDataHandlers/DynAjaxHandler.aspx " ,
data: " classId= " + encodeURIComponent(classId) + " &methodName= " + encodeURIComponent(methodName) + " &methodArgs= " + encodeURIComponent(JSON.stringify(args)),
async:asyncCall,
success: function (request){
dynaResult = eval( ' ( ' + request + ' ) ' ); // JSON.parse(request);
if (callBackMethod) {
callBackMethod(dynaResult);
}
},
error: function (e) {
dynaResult = null ;
if (callBackMethod) {
callBackMethod(dynaResult);
}
}
});
return dynaResult;
}
};
var dynAjaxManager = new DynAjaxManager();
/* ------- END OF GENERIC CONTENT ------- */
/* ------- DYNAMIC CONTENT ------- */
<%= dynamicJsText %>
/* ------- END OF DYNAMIC CONTENT ------- */
dynAjax.aspx.cs 第64行改为如下代码:
dynamicJsText
+=
"
function
"
+
className
+
"
Class(){}\n
"
;
别忘了在你的ajax特效网页更新js引用(jquery.js和json2.js)。
最后,我做了个演示用的压缩包,下载dynAjax_v1.04_jquery_by_kai.ma.rar Enjoy it!
本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2008/03/17/1110368.html,如需转载请自行联系原作者。