如何构建Facebook风格的Ajax网站

我们已经建立了一个像你描述的应用程序,下面是我们最后做的:

1. 服务器只通过JSON数据与浏览器进行讨论。
   XML消息传递也可以,但在所有浏览器中都很难处理。
   
2. 
   所有的HTML都是在客户端呈现的 pure.js
   
3. setInterval 120毫秒的轮询,检查哈希键的值是否有任何更改。

这款应用程序反应迅速,导航也非常直观。

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

我用的技术和麦克的相似。我的工具箱的基本部分:

• javascript构建系统。 我使用ant将我所有的小js源文件滚动到一个大的最终文件中。这样,我可以保持我的文件,因为我想小,不必担心必须导入100个单独的脚本到浏览器。

• 模板引擎。 我在用 Trimpath

• 模板文件的预处理器

• 处理异步调用的技术。

• 我所有的服务器调用都是通过一个“服务”对象访问的。我有一个缓存对象,它包装服务对象,复制对象的每个方法,并添加一个名为{methodName}Cached的附加方法。因此,如果原始服务对象有一个名为“getSubscriberDetails”的方法,则缓存对象将为其自身动态创建一个“getSubscriberDetails”方法,该方法链接回原始服务对象,还将创建一个“getSubscriberDetailsCached”方法,该方法将返回缓存的数据(如果存在),但将调用原始函数(并缓存它返回的数据)。在内部,缓存使用由方法名和方法参数生成的键来存储数据,因此如果我调用cache.getsubscriberDetailsCache(“subscriber1”),这与cache.getsubscriberDetailsCache(“subscriber2”)不同。

• 我正在开发的软件是一个联系人管理系统。如果我有一个小部件列出了用户的所有联系人,另一个小部件允许用户添加和删除联系人,那么需要通知联系人列表小部件发生了什么变化。我使用jquery的事件系统将“contactsChanged”事件发送到类为“contactsChangedListener”的ever dom对象,而不是让“addcontact”小部件保持对依赖于联系人列表的每一个其他功能的感知。因此,我的“联系人列表”小部件在其最外层的div中有一个类“contactssChangedListener”,我通过jQuery.bind在“联系人列表”控制器中附加了一个侦听器。当一个“contactsChanged”事件被发送出去时,我的“联系人列表”小部件知道它需要刷新它的联系人列表。

• jquery hashchange 插件来帮助我侦听哈希更改。每个屏幕都与一个单独的url相关联,从一个屏幕移动到另一个屏幕的方式是通过更改url。但我不使用直接链接。每个导航操作都通过一个navigator对象,该对象可以配置为执行一些操作,例如弹出一条警告消息,告诉用户他们将丢失未保存的更改。