本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.4节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
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 name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" 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）和导航。
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif?x-oss-process=image/resize,h_160,m_lfit)