《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.4 技巧：使用AJAX加载外部页面

本节书摘来自异步社区《jquery、jquery ui及jquery mobile技巧与示例》一书中的第9章，第9.4节，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

至此，示例加载的页面都是已经存在于html中的。它们都是把哈希标记和已经存在于dom树中的id关联在一起。

随着网站的扩大，在一个html中加载所有的页面变得不太可能了。使用jquery mobile能很容易地创建指向其他页面的链接，这和普通web应用程序中的做法是一样的。如代码清单9-4所示，链接是一模一样的。

不同之处在于jquery mobile处理链接的方式。当链接地址指向的域和当前页面的域相同，默认是使用ajax请求加载的。可以通过特定的设置关掉这个功能，稍后本章会有演示。另外，如果链接地址指向了不同的域，则将和普通网站的链接一样对待。

使用ajax加载的优点是可以提供平滑的过渡动画，并且页面会存储在 dom 树中。这就可以快速地导航回先前的页面而不用重新请求服务器。缺点是内存消耗较大。在一个资源有限的设备上，这就会成为一个问题。

提示

当在本地开发时，你应该使用web服务器。如果使用jquery mobile时不使用服务器，ajax 请求将会失败，你将会看见错误信息，要么在屏幕上要么在控制台中。尽管某些浏览器允许访问（甚至是通过ajax调用）本地文件，但是只要可能，最好还是尽量模拟生产环境。

代码清单9-4　链接至外部页面

第24行和第25行提供了两种不同的链接至外部文件的方法。事实上，你可能不想在所有的链接上都使用data-prefetch属性，因为这会为每个链接创建一个额外的http请求，将会降低网站渲染和加载的速度。那些你确定会被访问的链接除外。点击第一个链接时将会加载页面。第二个链接会在“背后”尽快地预加载（preload）数据，从而能加快导航的速度。

代码清单9-5提供了要加载的外部页面的示例。

代码清单9-5　提供要加载的外部页面

请注意这个示例的头部中没有包含任何css或者javascript。在这个示例中，这么做主要是为了证明页面是使用ajax加载的，第一张页面中的脚本和css文件仍旧存在。

在生产环境中，还是提供脚本和css为好，因为有人可能直接访问到这个文件的链接。你可以试试，但页面将会失去jquery mobile的外观。

请特别注意url地址栏发生了什么。尽管页面是用ajax加载的，url却依然变化为新的地址。这有助于“书签功能”（bookmarkability）和导航。