javascript - 纯 HTML AJAX 网站中的页面加载替代方案

Question

我在一个纯 HTML 网站上工作，所有页面都是 HTML，与任何服务器端代码无关。

基本上每个对服务器的请求都是使用 AJAX 发出的，我从表单发送数据，我在处理程序中处理这些数据，然后我返回一个将在客户端处理的 JSON 字符串。

假设页面加载了 URL 中的参数，例如 question.html?id=1。早些时候，我曾经在 Page Load 方法上读取这个查询字符串，然后从数据库中读取数据等等......

现在，由于它是纯 HTML 页面，我正在尝试想出一种方法来实现同样的目的，我有一个想法，但它 99% 都是个坏主意。

思路是使用JS读取URL参数(页面加载完成后)，然后发出AJAX请求，然后获取数据并显示在页面上。我知道，我们现在有 2 个请求，而不是对服务器(Web 窗体)有 1 个请求，第一个请求获取页面，第二个请求是 AJAX 请求。当然，这会有很多延迟，因为页面将在开始时加载，而其中没有我需要的实际数据。

我的目标是不可能实现的还是有成熟的方法？

Answer 1

Is my goal impossible or there's a mature approach out there?

最近有很多 JavaScript 框架都是围绕这个概念(“单页应用程序”)设计的，即在没有预加载任何数据的情况下加载页面，并通过 AJAX 访问所有数据。此类框架的一些示例包括 AngularJS、Backbone.js、Ember.js 和 Knockout。所以不，这根本不是不可能的。我建议您了解这些框架和其他框架，以找到适合您正在制作的网站的框架。

The idea is to read URL parameters using JS (after the page has loaded), and then make an AJAX request, and then fetch the data and show them on the page.

这听起来是个好主意。
Here 是一个示例，说明如何使用 JavaScript 从当前页面的 URL 中提取查询参数。

I know that instead of having 1 request to the server (Web Forms), we are now having 2 Requests, the first request to get the page, and the second request is the AJAX request. And of course this has lots of delays, since the page will be loaded at the beginning without the actual data that I need inside it.

以下是您不必为此担心的原因:

• 用户的浏览器通常会缓存 HTML 文件和关联的 JavaScript 文件，因此当他们第二次访问您的网站时，浏览器会发送请求以检查文件是否已被修改。如果没有，服务器会发回一条短消息，简单地说文件没有被修改，文件不需要再次传输。
• AJAX 响应将只包含页面需要的数据，不包含任何标记。因此，与将可缓存的 .html 文件和 AJAX 请求相结合的方法相比，检索在服务器上生成的页面将涉及更多的数据传输。
• 因此，即使您发出两个请求而不是一个请求，总加载时间也应该更少。如果您担心用户在加载 AJAX 数据时会看到没有内容的页面，您可以 (a) 在加载数据时让页面完全空白(只要不是太慢，这不应该是一个问题)，或者(b)抛出一个闪屏告诉用户页面正在加载。同样，如果之后页面速度很快，用户通常不会对开始时的少量加载时间有任何问题。