解读轻量级的Ajax解决方案——DynAjax的JQuery版_AJAX教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:解析ajax实现无刷新验证用户名是否存在
实现用的是jdbc+jsp+servlet,数据库用的是mysql 表就2个字段 实现原理获得text的值后,通过调用servlet查询数据库里是否存在,在通过xml传到前台 OperationName.java response.setContentType(text/xml;charset=UTF-8)这句很重要,没有他前台获得不到xml,之前

下班了,刚到家,老婆在做饭,小家伙在玩玩具,暂时没骚扰我。呵呵!趁这空闲写会博客。前两天答应改造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";

分享:揭秘Ajax 及其入门基础
一、白话Ajax的原理 这个可以从 C/S 和 B/S 的原理说起。Windows操作系统的诞生,为单机通信提供了很大的支持,程序设计也从早期DOS的单任务单用户向网络的分布式应用过度。C/S提供的客户/服务器编程模式为网络应用提供了一个有效的通信手段。浏览器与Web服

来源:模板无忧//所属分类:AJAX教程/更新时间:2010-01-06
相关AJAX教程