下班了,剛到家,老婆在做飯,小家伙在玩玩具,暫時沒騷擾我。呵呵!趁這空閑寫會博客。前兩天答應改造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代碼如下:
dynAjax.aspx.cs 第64行改為如下代碼:
別忘了在你的ajax特效網頁更新js引用(jquery.js和json2.js)。
<%@ 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: mailtadmin@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 ------- */
dynamicJsText += "function " + className + "Class(){}/n";