什么是整页重新加载以及为什么我们需要在没有 ajax 的情况下进行整页重新加载?
What are full page reloads and Why did we need to do full page reloads without ajax?
我正在阅读 ajax 以及它如何使我们能够在幕后与服务器交换数据,从而避免重新加载整个页面。我的困惑就在这里,我不太明白整页重新加载是什么意思。我认为这可能是因为我猜从一开始我就一直在使用 ajax/react,并且当我从数据库或 api.[=11 访问内容时还没有真正看到我的任何网页完全重新加载=]
如果有人能解释它们是什么以及为什么我们在 ajax 之前需要它们,那就太好了?
完整页面加载是指从服务器下载整个页面。页面通常由几个部分组成:页眉、页脚、导航和内容。在没有 AJAX 的经典 Web 应用程序中,用户单击 link 到另一个页面,并且必须下载整个页面,即使只有主要内容发生变化。页眉、页脚和导航都会重新下载,即使它们没有更改。
使用 AJAX 可以只更改页面中将要更改的部分。当用户单击 link 时,JavaScript 仅加载 link 的内容并将其插入当前页面。页眉、页脚和导航不需要重新加载。
这里引入其他需要注意的问题。
当AJAX向页面插入新内容时,URL不会改变。这使得用户很难为特定内容添加书签或 link。编写良好的 AJAX 应用程序在通过 AJAX.
加载内容时使用 history.pushState()
来更新 URL
然后有两条路径可以到达每一个内容。用户可以直接加载包含该内容的 URL,也可以通过 link 将内容加载到其他页面。 Web 开发人员需要测试并确保两者都能正常工作。
搜索引擎在抓取 AJAX 支持的网站时遇到问题。为了获得最佳兼容性,您需要使用服务器端呈现 (SSR) 或 pre-rendering 在不需要 JavaScript.
的页面加载时提供初始内容
即使是 Googlebot(它执行 JavaScript)也必须注意使 AJAX 支持的站点可抓取。 Googlebot 不会模拟用户操作,例如点击、滚动、悬停或移动鼠标。
- 内容需要在没有任何用户交互的情况下出现在页面加载中
- 您必须使用
<a href=...>
link 进行导航,这样 Googlebot 才能通过扫描文档对象模型 (DOM) 找到其他页面。对于用户,JavaScript 可以拦截对这些 link 的点击,并通过使用 onclick
处理程序中的 return false
或点击处理程序中的 event.preventDefault()
来防止整个页面加载.
我正在阅读 ajax 以及它如何使我们能够在幕后与服务器交换数据,从而避免重新加载整个页面。我的困惑就在这里,我不太明白整页重新加载是什么意思。我认为这可能是因为我猜从一开始我就一直在使用 ajax/react,并且当我从数据库或 api.[=11 访问内容时还没有真正看到我的任何网页完全重新加载=]
如果有人能解释它们是什么以及为什么我们在 ajax 之前需要它们,那就太好了?
完整页面加载是指从服务器下载整个页面。页面通常由几个部分组成:页眉、页脚、导航和内容。在没有 AJAX 的经典 Web 应用程序中,用户单击 link 到另一个页面,并且必须下载整个页面,即使只有主要内容发生变化。页眉、页脚和导航都会重新下载,即使它们没有更改。
使用 AJAX 可以只更改页面中将要更改的部分。当用户单击 link 时,JavaScript 仅加载 link 的内容并将其插入当前页面。页眉、页脚和导航不需要重新加载。
这里引入其他需要注意的问题。
当AJAX向页面插入新内容时,URL不会改变。这使得用户很难为特定内容添加书签或 link。编写良好的 AJAX 应用程序在通过 AJAX.
加载内容时使用history.pushState()
来更新 URL然后有两条路径可以到达每一个内容。用户可以直接加载包含该内容的 URL,也可以通过 link 将内容加载到其他页面。 Web 开发人员需要测试并确保两者都能正常工作。
搜索引擎在抓取 AJAX 支持的网站时遇到问题。为了获得最佳兼容性,您需要使用服务器端呈现 (SSR) 或 pre-rendering 在不需要 JavaScript.
的页面加载时提供初始内容即使是 Googlebot(它执行 JavaScript)也必须注意使 AJAX 支持的站点可抓取。 Googlebot 不会模拟用户操作,例如点击、滚动、悬停或移动鼠标。
- 内容需要在没有任何用户交互的情况下出现在页面加载中
- 您必须使用
<a href=...>
link 进行导航,这样 Googlebot 才能通过扫描文档对象模型 (DOM) 找到其他页面。对于用户,JavaScript 可以拦截对这些 link 的点击,并通过使用onclick
处理程序中的return false
或点击处理程序中的event.preventDefault()
来防止整个页面加载.