9.4 技巧：使用AJAX加载外部页面_H5之家 - 中国HTML5教程资源分享第一站

9.4　技巧：使用AJAX加载外部页面

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

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

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

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

提示

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

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

00 <!DOCTYPE html> 01 <html> 02 <head> 03　　<title>Linking AJAX</title> 04　　<meta 05　　　 content="width=device-width, initial-scale=1"> 06　　<link href= 07　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08　　<script type="text/javascript" 09　　　 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10　　</script> 11　　<script type="text/javascript" src= 12　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13　　</script> 14 </head> 15 <body> 16 17 <div data-role="page"> 18 19　 <div data-role="header"> 20　　 <h1>Linking AJAX</h1> 21　 </div> 22 23　 <div data-role="content">　 24　　 <p><a href="04b-link.html">Link to an external file</a></p>　 25　　 <p><a href="04b-link.html" data-prefetch>Prefetch the 26　　　　 external file</a></p>　　 27　 </div> 28　 29 </div> 30 31 </body> 32 </html>

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

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

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

00 <!DOCTYPE html> 01 <html> 02 <head> 03　 <title>Linked Page</title> 04 </head> 05 <body> 06 07 <div data-role="page"> 08 09　 <div data-role="header"> 10　　 <h1>Linked File</h1> 11　 </div> 12 13　 <div data-role="content">　 14　　 <p> 15　　　 <a href="04-linking-ajax.html"> 16　　　　 Link to an original file 17　　　 </a> 18　　 </p>　　 19　 </div> 20　 21 </div> 22 23 </body> 24 </html>

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

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

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