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