轻量级的Ajax解决方案——DynAjax的JQuery版

下班了,刚到家,老婆在做饭,小家伙在玩玩具,暂时没骚扰我。呵呵!趁这空闲写会博客。前两天答应改造DynAjax为JQuery版本,今天就完成这个任务吧。
上一篇随笔介绍了轻量级的Ajax解决方案DynAjax,可惜原作者只有写支持Prototype.js版本的。
DynAjax
用到Prototype.js特殊用法的地方不多,就dynAjax.aspxdynAjax.aspx.cs
特殊用法分别是(红色部分标出):

  • var DynAjaxManager = Class.create();dynAjax.aspx14
  • new Ajax.Request(....)dynAjax.aspx25行至41
  • parameters: .... encodeURIComponent(Object.toJSON(args)),dynAjax.aspx28 
  • dynaResult = request.responseText.evalJSON();dynAjax.aspx30

以上是dynAjax.aspx的,下面的是dynAjax.aspx.cs的:

  • dynamicJsText += "var " + className + "Class = Class.create();\n";dynAjax.aspx.cs64

分别说说红色部分的用法:

  • 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.aspx.cs 第64行改为如下代码:

             dynamicJsText += "function " + className + "Class(){}\n";

别忘了在你的ajax特效网页更新js引用(jquery.js和json2.js)。

最后,我做了个演示用的压缩包,下载dynAjax_v1.04_jquery_by_kai.ma.rar  Enjoy it!

posted @ 2008-03-17 22:23  Kai.Ma  阅读(4354)  评论(17编辑  收藏  举报