轻量级的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!


本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2008/03/17/1110368.html,如需转载请自行联系原作者。

目录
相关文章
N..
|
5月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
56 1
|
5月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
56 0
|
4月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
39 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
12天前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
20 1
|
13天前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
28天前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
16 1
|
2月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
75 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
2月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
28 0
|
2月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
4月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作