完成了AJAX树附原理分析

首先要纠正一个上篇博文《Rails中的Ajax初体验》中的一个错误:上篇博文中,我说“要在Rails中使用Ajax,局部模板是必须的”,经实践检验,是错误的,特此更正。实践是检验真理的唯一标准,此言不虚。经过项目中真正通过RJS实现AJAX树,可知,通过使用insert_html、replace_html等辅助方法,可直接操作页面上的元素,无须使用局部模板。
整个的实现过程还是有点曲折:

之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascript脚本函数,一次性地生成整个树结构目录。这种方式对付系统的功能菜单还游刃有余,但是要生成包含上千条数据的树结构时,客户端的浏览器需要十几秒钟才能把整个树结构建立起来、显示在页面上,这对于用户来说是不可忍受的——其实对于我们开发者来说,也是不可忍受的。那么一个可行的办法就是,利用AJAX技术,先显示树结构的第一级节点,当点击某个节点时,再从服务器获取该节点的子节点,显示出来。这样,每次与服务器交互的数据量不大,加快了页面响应。

一开始我打算利用RAILS中的AJAX机制,配合使用之前那个版本中的javascript函数。但是那个版本的思路,是基于从服务器获取的树结构数据,通过循环、递归,在服务器端生成好要在客户端页面执行的一系列javascript函数调用,以生成树结构。至此,还算是比较符合AJAX的思路,但是下一步就大相径庭了:旧版本的是将生成的那一大串javascript函数调用的字符串,一次性地完全返回给客户端页面,客户端页面在加载前,已经获得了这一大串字符串,只需简单地把它加载,就一次性的执行它、生成树结构了。这种方式,等于没有给AJAX留下插足的任何机会。

此路不通,于是我转而寻找网上别人做的AJAX树,试图将其移植过来,为我所用。之前就找到过一个.NET版的,用C#写的,还没仔细看过。于是打开VS2005,建好了ASPX工程,研究了一下这个.NET版的AJAX树。这个版本自带了一个ACCESS数据库,里面有一些演示数据。把IIS架起来后,运行得还真挺顺畅。这个AJAX树的功能做得还挺强,可以实现在页面上对树节点的添加、删除、编辑、拖拽移动操作。代码也比较清晰:一个htm页面和一个aspx页面,其中aspx页面中定义了一些服务器端函数,组织出相应的要返回给htm页面的html代码段。然而,要把这个移植过来也不容易,首先是对其生成html代码段的思路不熟悉,不好控制,另外一点,它是通过response.write返回所生成的html代码段,与RJS中直接指定页面元素进行控制的思路又不一样。

也是由于通过对以上两种方式的探索,使得我对做AJAX树的思路更加清晰的原因吧,我最终决定还是自己动手,完全自己做一个RAILS下的出来吧。尽管最终从核心内容到细节控制,总算是把这棵树给捣腾出来了,但中间遇到几个问题,有的不知道是否RAILS本身就不支持,还有的明明书上、别人都行得通,但我这就是不行。不知个中缘由,列在这里,若有人能够解答,还望不吝赐教!谢过先!

问题一:用RJS的insert_html辅助方法,无法在一个table最后添加一行(即<tr>),即使写一个简单的测试程序也不行。最后,我是用div和span做容器,向其中添加table来解决的,即树的每个节点都用一个只有一行的table来装载。

问题二:在使用RJS时,在“render :update”代码段,只能是单纯的一句调用辅助方法的语句,其它的,无论是加点if判断,还是再使用另外一个辅助方法,代码全都失效。本想先用insert_html添加元素,再用call调用javascript函数之类,完全行不通,最终是预先在要插入元素的地方放置一个空的容器,然后换用replace_html,将容器中的空内容“换”成返回的html代码段,也达到了添加页面元素的效果。

问题三:这个是最为奇怪的问题了。当我组合待返回的html元素的代码时,由于该元素还要继续带有AJAX链接,故本想用“#{}”将Ruby代码嵌入——这种方法理论上讲是可行的,可我在实际操作中,记得好像只成功了一两次,基本上都实现不了AJAX效果(实际上是没效果)。无奈之下,我根据页面初始显示的第一级树节点,查看了页面代码,看到了生成的AJAX代码,再依照它的样子,替换掉我本来想用Ruby代码的部分——也就是说,我最终不是用嵌入的Ruby代码,而是直接写出将要生成的AJAX代码——这样的代码是多么的丑陋啊!

不过,整个过程下来,还是略有一些可以总结的东西:

总结一:由于树节点中要显示的文本中,有的会有加号“+”,而恰巧该文本还是要向服务器发送的参数,这种情况下,在组合要返回的html代码段时,加号会被当作连接字符串的操作,那么在必要的地方,则把加号替换成其它不会被误解的符号,如下划线“_”,而在传给数据库做查询用时,再替换回来。Ruby中将字符串中的模式替换成指定内容的函数是gsub,如:str.gsub("+","_"),就是把str中的加号替换成下划线。该函数的第一个参数也可以是正则表达式。

总结二:对于页面上要显示的每一个树节点,都用一个只有一行的table来控制,这样做有一个好处,就是每个节点都可以独立地控制显示位置,而不用考虑colspan属性,只需在前面添加指定个数的td即可,具体做法见“总结三”。

总结三(控制树节点的显示级别位置的方法):点击树节点,向服务器发送该节点的ID,从而获取该节点的子节点。与此同时,还要返回一个本节点的级别(页面初始显示的第一级节点的级别为0)。在生成子节点的html代码段时,得到父节点的级别,加上1,即为子节点的级别。根据级别数做循环,向包含子节点内容的table中添加相应个数的td。在所添加的td中,填入若干空格( )(数量自定,一般2~3个为宜),但是空格只有与td配合使用效果才好,否则容易错位。或者事先用windows的画图工具做一个白色小方块的bmp文件(方块大小根据已有的在树的节点前面表示展开、收拢节点的图片设定),然后在td中嵌入这个小方块图片也行。如某个二级节点,其html代码段为:<table><tr><td>  </td><td>二级节点</td></tr></table>。

(0)

相关推荐

  • 基于jstree使用AJAX请求获取数据形成树

    概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • ajax+asp无限级分类树型结构的代码

    复制代码 代码如下: <% '数据库字段为类属性,添加.删除.修改.操作检查等函数为类的方法 Class Cls_Leibie     Private nClassID,sClassName,nParentID,sParentPath,nDepth,nRootID,nChild,nOrderID,sFilePath '定义私有变量(类的属性,即数据库字段对应的变量)     Private rs,sql,ErrorStr Private Sub Class_Initialize()       

  • 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

    看了"使用hibernate实现树形结构无限级分类"这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享.其实在我的博客里是老早贴出来的,由于时间关系没好好整理.        功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的.         下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览DE

  • ajax+asp无限级分类树型结构(带数据库)

    IE测试通过,FF有点小BUG Cls_Leibie.asp 复制代码 代码如下: <% '数据库字段为类属性,添加.删除.修改.操作检查等函数为类的方法 Class Cls_Leibie Private nClassID,sClassName,nParentID,sParentPath,nDepth,nRootID,nChild,nOrderID,sFilePath '定义私有变量(类的属性,即数据库字段对应的变量) Private rs,sql,ErrorStr Private Sub Cl

  • 一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)

    复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.Linq; using System.Xml; using System.Xml.Linq; namespace WebApplication3 { public

  • 完成了AJAX树附原理分析

    首先要纠正一个上篇博文<Rails中的Ajax初体验>中的一个错误:上篇博文中,我说"要在Rails中使用Ajax,局部模板是必须的",经实践检验,是错误的,特此更正.实践是检验真理的唯一标准,此言不虚.经过项目中真正通过RJS实现AJAX树,可知,通过使用insert_html.replace_html等辅助方法,可直接操作页面上的元素,无须使用局部模板. 整个的实现过程还是有点曲折: 之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascrip

  • ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信. 4.使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目

  • Java8 HashMap的实现原理分析

    前言:Java8之后新增挺多新东西,在网上找了些相关资料,关于HashMap在自己被血虐之后痛定思痛决定整理一下相关知识方便自己看.图和有些内容参考的这个文章:http://www.jb51.net/article/80446.htm HashMap的存储结构如图:一个桶(bucket)上的节点多于8个则存储结构是红黑树,小于8个是单向链表. 1:HashMap的一些属性 public class HashMap<k,v> extends AbstractMap<k,v> impl

  • JavaScript实现按键精灵的原理分析

    最近有个需求,需要在页面上面自动点击.输入.提交. 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作. 也可以创建事件,再派发事件,执行操作.关于事件的更多细节,可以参考<JavaScript中事件处理> 1.模拟MouseEvent中的click事件,x与y位置随机点击 2.模拟TouchEvent中的touchstart和touchmove,用scroll来做滑动效果 3.模拟FocusEvent,聚焦到屏幕中的输入框内 一.鼠标事件MouseEvent Mous

  • Java中注解与原理分析详解

    目录 一.注解基础 二.注解原理 三.常用注解 1.JDK注解 2.Lombok注解 四.自定义注解 1.同步控制 2.类型引擎 一.注解基础 注解即标注与解析,在Java的代码工程中,注解的使用几乎是无处不在,甚至多到被忽视: 无论是在JDK源码或者框架组件,都在使用注解能力完成各种识别和解析动作:在对系统功能封装时,也会依赖注解能力简化各种逻辑的重复实现: 基础接口 在Annotation的源码注释中有说明:所有的注解类型都需要继承该公共接口,本质上看注解是接口,但是代码并没有显式声明继承关

  • 对一个vbs脚本病毒的病毒原理分析

    一.前言 病毒课老师丢给我们一份加密过的vbs脚本病毒的代码去尝试分析,这里把分析过程发出来,供大家参考,如果发现文中有什么错误或者是有啥建议,可以直接留言给我,谢谢! 二.目录 整个分析过程可以分为以下几个部分: 0x00 准备工作 0x01 解密部分 0x02 功能分析 三.分析过程 0x00 准备工作 windows xp的虚拟机(在自己的windows下也可以做) vbs的一些基本语法 0x01 解密部分 右击病毒文件然后编辑打开或者是直接把其后缀修改成txt直接打开都行,可以看到一大段

  • 基于JS对象创建常用方式及原理分析

    前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 var person = new Object(); person.name = "jack"; person.sayName = function () { alert(this.name) } 使用Object构造函数 var person = { na

  • VBS脚本病毒原理分析与防范

    网络的流行,让我们的世界变得更加美好,但它也有让人不愉快的时候.当您收到一封主题为"I Love You"的邮件,用兴奋得几乎快发抖的鼠标去点击附件的时候:当您浏览一个信任的网站之后,发现打开每个文件夹的速度非常慢的时候,您是否察觉病毒已经闯进了您的世界呢?2000年5月4日欧美爆发的"爱虫"网络蠕虫病毒.由于通过电子邮件系统传播,爱虫病毒在短短几天内狂袭全球数百万计的电脑.微软.Intel等在内的众多大型企业网络系统瘫痪,全球经济损失达几十亿美元.而去年爆发的新欢

  • Android Handler 原理分析及实例代码

    Android Handler 原理分析 Handler一个让无数android开发者头疼的东西,希望我今天这边文章能为您彻底根治这个问题 今天就为大家详细剖析下Handler的原理 Handler使用的原因 1.多线程更新Ui会导致UI界面错乱 2.如果加锁会导致性能下降 3.只在主线程去更新UI,轮询处理 Handler使用简介 其实关键方法就2个一个sendMessage,用来接收消息 另一个是handleMessage,用来处理接收到的消息 下面是我参考疯狂android讲义,写的一个子

  • Java 动态代理原理分析

    Java 动态代理原理分析 概要 AOP的拦截功能是由java中的动态代理来实现的.说白了,就是在目标类的基础上增加切面逻辑,生成增强的目标类(该切面逻辑或者在目标类函数执行之前,或者目标类函数执行之后,或者在目标类函数抛出异常时候执行.Spring中的动态代理是使用Cglib进行实现的.我们这里分析的是JDK中的动态代理实现机制. 下面我们通过例子快速了解JDK中的动态代理实现方式. 示例 需要代理的接口 public interface IHello { public void sayHel

随机推荐