javascript - 如何建立 Facebook 风格的 Ajax 站点

标签 javascript asp.net asp.net-mvc ajax

我知道标题有点含糊且包罗万象,所以请让我尝试缩小范围。

我想要的是有关如何开发主要是 Ajax 网站的建议,其中部分 UI 是异步加载的。关键是:我想让浏览器的后退/前进按钮直观地工作——Facebook 已经做得很好。

有谁知道 Facebook 使用哪些库和设计模式?考虑到他们已经完成了出色的工作,将它们用作模型非常有意义,而不是试图重新发明轮子。

我注意到 url 哈希中发​​生了很多事情:
http://www.facebook.com/home.php?#!/home.php?sk=bd

我确信他们这样做一定有充分的理由,如果我可以利用它,我也不会感到惊讶。有人可以指出他们在这里完成的工作,以及 ?#!/home.php?sk=bd 的每个部分的用途吗?当加载的原始页面是 home.php 时,我特别惊讶地看到 home.php?sk=bd - 这可能是他们允许链接的方式到特定的“页面”,尽管所有内容都由 home.php 提供服务?

解决每个问题并不是那么重要 - 我真的只是想传达我难以理解的东西 - “大局”,如果你愿意的话。如果有人能给我一个更全面的答案,那就太棒了(特别是如果你能告诉我如何使用 ASP.NET MVC 完成这件事)。

提前致谢!

最佳答案

我们已经构建了一个您描述的应用程序,这是我们最终所做的:

  1. 服务器仅通过 JSON 数据与浏览器进行讨论。
    XML 消息传递也可以,但在所有浏览器中都难以处理。
  2. 前端仅基于静态文件构建:HTML、CSS、JS。服务器仅处理数据库的安全性和事务。
    所有 HTML 都在客户端呈现 pure.js一个 Javascript 模板引擎,它将 HTML View 和 JS 逻辑完全分开。
  3. 对于导航,我们使用散列键 (#) 作为应用程序的状态。例如:用户正在看什么人。在测试了许多解决方案之后,我们最终构建了一个非常简单的解决方案,使用 120 毫秒的 setInterval 轮询,检查哈希键的值是否有任何更改。

该应用 react 灵敏,导航非常直观。

编辑:
由于我们放弃了对 IE6 和 IE7 的支持,我们不再轮询哈希更改,而是使用 window.onhashchange

关于javascript - 如何建立 Facebook 风格的 Ajax 站点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3747833/

相关文章:

javascript - 如何在 Haml 中使用 JavaScript 变量?

javascript - vscode : [ts] Experimental support for decorators is a feature that is subject to change

asp.net - 创建一个新的 Orchard 站点

c# - 如何使用 jQuery 禁用按钮,但在单击按钮后运行服务器代码?

asp.net - 如何在 ASP.NET GridView 中找到控件的客户端 ID?

jquery - 级联下拉菜单 - 无效值

javascript - 在 JavaScript 中解析 JSON 字符串

jquery - MVC Razor动态构建onclick事件以显示模态

c# - 强制页脚停留在渲染页面的底部

javascript - 将(对象的)数组插入 mysql 数据库