我应该使用 AJAX 加载整个 html 页面吗? [英] Should I load an entire html page with AJAX?

问题描述

我的设计师认为在不同页面之间创建过渡是个好主意.基本上只有内容部分会重新加载(页眉和页脚保持不变)，并且只有内容 div 应该具有过渡效果(淡入淡出或某种形式).创造这种效果并不是真正的问题，让谷歌(分析)高兴是......

My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...

我不喜欢的解决方案以及原因；

Solutions I didn't like and why;

• 只加载带有ajax的内容div:google不会看到任何内容，这意味着永远找不到该站点，或者只加载ajax检索到的部分，根本不是完整页面
• 显示过渡效果，然后将用户重定向"到指定页面(捕获元素的点击事件):效果与链接到另一个页面几乎相同，例如.用户仍会看到页面正在重新加载

我想到了一种可能的解决方案:当访问者点击链接时，捕获事件，用ajax加载目标，同时显示过渡效果，然后用ajax请求获取的内容重写整个文档.

I thought of one possible solution: When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.

至少这会奏效并且有一些优势；页面重新加载看起来是无缝的，无论你的互联网连接有多慢，谷歌都不会介意，因为 ajax 内容本身就是一个完整的 html 页面，可以按原样抓取，即使是非 JavaScript 浏览器(手机等).) 不会介意，他们只是重新加载页面.

At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.

我对实现这个方法的犹豫是我会使用ajax重新加载整个页面.我想知道这是否是 ajax 的目的，如果它会减慢速度.最重要的是，是否有更好的解决方案，例如.我的第一个坏"解决方案但略有不同，所以谷歌会喜欢它(分析也是)?

My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?

感谢您对此的看法！

推荐答案

简短回答:我不建议以这种方式加载整个页面.

Short answer: I would not recommend loading an entire page in this manner.

长答案:不推荐.虽然可能，但这并不是 XHR/Ajax 的真正意图.本质上，您正在做的是复制浏览器的本机行为.您会遇到的一些问题:

Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:

1. 支持后退/前进按钮.你需要一个 URI # 方案来解决.
2. 浏览器必须解析整个页面通过AJAX.这会减慢速度.例如.如果你将一段 HTML 加载到浏览器，然后将 DOM 替换为它，只有这样任何脚本，CSS或其中包含的图像开始下载.
3. 内存——浏览器不会改变页面.超过时间(取决于浏览器)，我会预计内存使用量会增加.
4. 可访问性.屏幕阅读器需要随时通知页面内容已更新.可能不是关心你而是值得提到.
5. 缓存.浏览器不知道要缓存哪个页面(超出初始负载).
6. 关注点分离 - 您的观点基本上分为服务器端部分来呈现页面的内容以及静态页面框架的 HTML 和最后JS结合服务器与浏览器一块.这将随着时间的推移进行维护问题复杂.
7. 与其他组件的集成 -你已经看到了问题谷歌分析.你可能会遇到与其他组件相关的问题到 DOM 的时间构建.

页面过渡效果是否值得由您决定，但我希望我已经回答了您的问题.

Whether it's worth it for the page transition effect is your call but I hope I've answered your question.

这篇关于我应该使用 AJAX 加载整个 html 页面吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！