完成了AJAX树附原理分析
程序员文章站
2022-03-14 10:49:21
首先要纠正一个上篇博文《rails中的ajax初体验》中的一个错误：上篇博文中，我说“要在rails中使用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>。
整个的实现过程还是有点曲折：
之前使用的生成树结构的页面，是利用从服务器获取的所有数据，通过一系列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>。
上一篇： 十大最佳Ajax教程收集（图文）