设计一个比使用AJAX获得整个HTML文档更好的解决方案

Engineering a better solution than getting a whole HTML document with AJAX

本文关键字:HTML 文档 更好 AJAX 解决方案 一个      更新时间:2023-09-26

我有一个网页,我正在为一个个人项目工作,学习javascript和web开发。该页面由一个菜单栏和一些内容组成。我的想法是,当点击链接时,通过AJAX更改页面的内容,这样我:

  1. 从不同页面获取一些新内容
  2. 用新内容替换旧内容
  3. 用一些漂亮的javascript视觉效果来动画化内容的变化

我认为这比使用标准HTTPGET请求获取整个文档要高效一点,因为浏览器不必获取文档的<head>标记中的样式表和脚本。我还应该补充一点,我只是从我创建的网络应用程序提供的文档中获取内容,我完全了解这些文档的内容。

无论如何,我最近在一个SO问题上找到了这个答案,这让我想知道设计一个符合我为网页给出的要求的解决方案的理想方法。在我看来,有两种解决方案,似乎都不理想:

  1. 配置我从中获取内容的后端(服务器),这样,如果只要求提供内容,它将返回内容,而不是整个页面,然后使用AJAX(我当前的解决方案)加载该内容,或者
  2. 使用AJAX获取整个文档,然后使用脚本提取内容并将其加载到页面中

在我看来,这两种解决方案都不太正确。对于1,我似乎在两个不同的地方划分逻辑:服务器必须配置为在被要求提供内容时提供内容,javascript必须知道如何要求提供内容。对于2,这似乎是对AJAX的不恰当使用(根据前面提到的SO答案),因为我要求一整页,然后解析它,而AJAX的目的是获取小块信息,而不是整个文档。

所以我想问:从工程的角度来看,这两种解决方案中哪一种更好?有没有其他解决方案比这两种方案中的任何一种都好?

用一些漂亮的javascript视觉效果来动画化内容的变化。

请不要。无论如何,您似乎在寻找像Knockout这样的JS MVC框架。

使用这样的框架,您可以让服务器返回用JSON或XML表示的模型,通过使用各种模板和注释的方式,一小段JS将其转换为HTML。

因此,您只需以浏览器(或者更确切地说是JS)理解的方式返回一个业务对象列表(比如地址),并让Knockout将其绑定到网格视图、输入元素等,而不是在HTML翻译服务器端进行模型转换并将一大块HTML发送到浏览器