javascript - 算法,Automagic Ajax

标签 javascript html ajax algorithm

我做了一个框架,它在服务器上生成一个 HTML“DOM”树,作为一个 python 对象树,然后将它作为一个字符串吐出,发送给客户端。它的方法是通过树的递归深度优先遍历:例如,一个 div 会吐出开头的“div”,吐出所有它的 child 的 html,然后吐出结束的“/div”。

这棵树被分解成概念组件,如下所示:

graph http://lhy.mit.edu/media/Flow_Chart.png

这只显示了前两层层次结构;实际站点还有更多:例如评论栏中的每个评论都是一个独立的组件,菜单栏上的每个按钮都是一个独立的组件。如您所见,各种组件不需要位于树中的同一深度。什么是“组件”由我决定。

我想要的是每个组件的完整 html 字符串(从该组件的根节点向下的所有内容),以及每个组件的部分 HTML 字符串(该组件的 HTML,减去其子组件的 HTML)。例如,主要部分部分 HTML 将是 html、head 和两个 div 标记。另一方面,主要部分完整 html 将是页面上的每个节点。

我该怎么做?我可以找到每个组件和子组件的完整 HTML 字符串,用一些字符串标记每个子组件的边界并执行 Regex-Removals 以找到部分 每个组件的 HTML 字符串,但这感觉笨拙且效率低下。

我可以进行迭代深化 DFS,在组件及其子组件之间的边界处停止,直到探索该组件中的每个节点。然后我将为每个组件提供部分 HTML,但随后我需要做一个类似的 hacky Regex-Inserts,以便稍后为每个组件构建完整 HTML。

我可以两者都做,但这需要两次传递并且会很昂贵,尽管可能不如上面的 Regex 体操那么昂贵。

我可以做一个优先级队列 Dijkstra,让每个组件的优先级都严格高于其子组件。它会以正确的顺序遍历树,在移动到它的子元素之前完成每个组件,但我不知道如何从中得到最终的格式良好的 HTML 字符串。

所有这一切的目的是让服务器能够智能且完全自主地确定客户端页面上需要在两个任意页面之间的页面转换时更改的最小组件集。

如果我在我的网站上创建一个新页面,我应该只需要行额外的代码就可以让它顺利地与任何现有页面进行ajax。

但首先我需要让我的图形遍历 html-spewing 算法按顺序排列。有什么想法吗?

最佳答案

我假设您的客户端是 Javscript 代码,因为您没有指定任何内容。

不要做太复杂的事情。尤其是为了上帝的爱don't try using regexes to work with HTML .

您的服务器是否向您发送了功能齐全的 HTML 字符串?在这种情况下,您可以将其转换为您可以使用的实际 DOM(有很多方法可以这样做),然后使用元素的 .innerHTML 来获取“完整的 html”和使用 .tagName 获取标签的名称。

我仍然不明白为什么您需要所有这些复杂功能。如果您已经经历了下载整个“新页面”的麻烦,那么没有太多理由尝试更改尽可能少的部分 - 只需替换所有内容并忘记它(对服务器的调用应该是无论如何都是最昂贵的东西)。

如果你真的想少用蛮力,你应该找到一种方法来请求/只通知有趣的更改,而不必查看所有内容。然后,给定要更改的部分和文本,您只需要执行以下操作

document.getElementById('mainCommentArea').innerHTML = newHTML;

关于javascript - 算法,Automagic Ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6902333/

相关文章:

Javascript 和 HTML 按钮不起作用?

javascript - 临时上传文件以使用它 - javascript

javascript - 是否有可能同时从 PHP 服务器接收多个 AJAX 响应?

javascript - AngularJS,在声明 ng-model 之前激活复选框

Javascript .removeChild() 只删除偶数节点?

javascript - HTML5 视频字幕样式

php - $.ajax Post 请求不发送 POST 数据

php - 快速加载网页

javascript - 获取不同图层 Konva JS 中形状的属性

javascript - 仅当包含在正则表达式匹配中时才替换正则表达式?