我应加载与AJAX整个HTML页面? [英] Should I load an entire html page with AJAX?

查看:106
本文介绍了我应加载与AJAX整个HTML页面?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的设计师认为这是一个好主意,以创建不同页面之间的过渡。基本上仅内容部分将重新加载(页眉和页脚停留完好),以及只有内容的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;

  • 仅加载内容的div使用Ajax:谷歌将不会看到任何内容,这意味着该网站将永远不会被发现,或通过AJAX检索,这arent't整页都只有部分
  • 在显示的过渡效果,在那之后重定向的用户到指定的页面(捕捉的元素的单击事件):效果是pretty的一样一样的只是链接到另一个页面,例如。用户仍然会看到一个页面被重新加载

我想到了一种可能的解决方案: 当访问者点击一个链接时,捕获事件,加载与阿贾克斯的目标,表明在此期间的过渡效果,那么就改写与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.

至少这会工作,并具有一定的优势;该页面重载的外观浑然一体,无论多么缓慢的Internet连接,谷歌不会介意,因为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 /阿贾克斯的意图。从本质上讲,你在做什么是复制浏览器的原生行为。有些问题,你会遇到:

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. 关注
  7. 分离 - 你的视图 基本上破碎成 服务器端件来呈现 随着静态页面的内容 HTML的页面框架 最后是JS来合并服务器 片与浏览器的一块。 这会让维护随着时间的推移 有问题的和复杂的。
  8. 在与其他组件的集成 - 你已经看到的问题 谷歌分析。您可能会遇到 与相关的其他组件的问题 到DOM时的定时 建造。
  1. Support for the Back/Forward button. You'll need a URI # scheme to solve.
  2. The Browser must parse the entire page through AJAX. This'll slow things down. E.g. if you load a block of HTML into the browser, then replace the DOM with it, only then will any scripts, CSS or images contained therein begin downloading.
  3. Memory - the browser's not changing pages. Over time (depending on the browser), I'd expect the memory usage to increase.
  4. Accessibility. Screen readers will need to be notified whenever the page content is updated. Might not be a concern for you but worth mentioning.
  5. Caching. Browser would not know which page to cache (beyond the initial load).
  6. Separation of concerns - your View is essentially broken into server-side pieces to render the page's content along with the static HTML for the page framework and lastly the JS to combined the server piece with the browser piece. This'll make maintenance over time problematic and complex.
  7. Integration with other components - you're already seeing problems with Google Analytics. You may encounter issues with other components related to the timing of when the DOM is constructed.

无论是值得的页面过渡效果是您的电话,但我希望我已经回答了你的问题。

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

这篇关于我应加载与AJAX整个HTML页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆