简体繁体 English

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

[英]Engineering a better solution than getting a whole HTML document with AJAX

原文 2013-07-10 15:27:43 8 1 javascript/ ajax/ http

I have a webpage that I am working on for a personal project to learn about javascript and web development. 我有一个正在处理个人项目的网页，以了解有关javascript和Web开发的信息。 The page consists of a menu bar and some content. 该页面包含一个菜单栏和一些内容。 My idea is, when a link is clicked, to change the content of the page via AJAX, such that I: 我的想法是，当单击链接时，通过AJAX更改页面的内容，这样我：

fetch some new content from a different page, 从其他页面获取一些新内容，
swap out the old content with the new, 将旧内容换成新内容，
animate the content change with some pretty javascript visual effects. 用一些漂亮的javascript视觉效果为内容更改设置动画。

I figure that this is a little more efficient than getting a whole document with a standard HTTP GET request, since the browser won't have to fetch the style sheets and scripts sourced in the <head> tag of the document. 我认为，这比通过标准HTTP GET请求获取整个文档要有效得多，因为浏览器无需获取源于文档<head>标记的样式表和脚本。 I should also add that I am fetching content solely from documents that are served by my web app that I have created and whose content I am fully aware of. 我还应该补充一点，我仅从我创建的Web应用程序提供的文档中提取内容，并且我完全了解这些内容。

Anyway, I came across this answer on an SO question recently, and it got me wondering about the ideal way to engineer a solution that fits the requirements I have given for the web page. 无论如何，我最近在一个SO问题上遇到了这个答案，这让我想知道设计符合我对网页要求的解决方案的理想方法。 The way I see it, there are two solutions, neither of which seem ideal: 从我的角度来看，有两种解决方案，两种解决方案都不是理想的：

Configure the back-end (server) from which I am fetching such that it will return content and not the entire page if asked for only content, and then load that content in with AJAX (my current solution), or 配置从中获取内容的后端（服务器），使其仅返回内容（而不是整个页面），然后返回内容，然后使用AJAX（我当前的解决方案）加载该内容，或者
Get the entire document with AJAX and then use a script to extract the content and load it into the page. 使用AJAX获取整个文档，然后使用脚本提取内容并将其加载到页面中。

It seems to me that neither solution is not quite right. 在我看来，这两种解决方案都不是正确的。 For 1, it seems that I am splitting logic across two different places: The server has to be configured to serve content if asked for content and the the javascript has to know how to ask for content. 对于1，似乎我将逻辑划分到两个不同的地方：服务器必须配置为在请求内容时提供内容，而javascript必须知道如何请求内容。 For 2, it seems that this is an inappropriate use of AJAX (according to the previously mentioned SO answer), given that I am asking for a whole page and then parsing it, when AJAX is meant to fetch small bits and pieces of information rather than whole documents. 对于2，看来这是AJAX的不当用法（根据前面提到的SO答案），考虑到我要查询整个页面然后对其进行解析，而AJAX则是要获取少量的信息比整个文件。

So I am asking: which of these two solutions is better from an engineering perspective? 所以我想问：从工程角度来看，这两种解决方案中哪一种更好？ Is there another solution which would be better than either of these two options? 是否有另一个解决方案比这两个选项中的任何一个都更好？

1 个解决方案

animate the content change with some pretty javascript visual effects. 用一些漂亮的javascript视觉效果为内容更改设置动画。

Please don't. 请不要 Anyway, you seem to be looking for a JS MVC framework like Knockout . 无论如何，您似乎正在寻找像Knockout这样的JS MVC框架。

Using such a framework, you can let the server return models , represented in JSON or XML, which a little piece of JS transforms into HTML, using various ways of templating and annotations. 使用这样的框架，您可以让服务器返回以JSON或XML表示的模型，使用各种模板和注释方式，将一小段JS转换为HTML。

So instead of doing the model-to-HTML translation serverside and send a chunk of HTML to the browser, you just return a list of business objects (say, Addresses) in a way the browser (or rather JS) understands and let Knockout bind that to a grid view, input elements and so on. 因此，您无需在服务器端进行模型到HTML的转换并将大量HTML发送给浏览器，而只是以浏览器（或更确切地说是JS）理解并让Knockout绑定的方式返回业务对象列表（例如，地址）到网格视图，输入元素等。