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

本节书摘来自异步社区《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 

17 div data-role="page" 

19 div data-role="header" 

20 h1 Linking AJAX /h1 

21 /div 

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 

29 /div 

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 

07 div data-role="page" 

09 div data-role="header" 

10 h1 Linked File /h1 

11 /div 

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 

21 /div 

23 /body 

24 /html 

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

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

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

【前端】使用jQuery实现一个简单的在线页面或API接口请求功能 对于测试人员来说，借助一些测试工具非常的重要，像postman等工具，很方便就能发起api接口的请求和测试 但是，对于开发人员来说，有时候未必一开始就使用这些工具，有可能电脑原因未安装到这些工具或者太麻烦 基于这样一个情况，本篇文章就来简单实现下在线页面发起http的get或post请求的功能 作者：全栈小5 链接：https://juejin.cn/post/7107132057263800327 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上 今天分享一个动态上传数据的知识点，我们知道，传统的通过 form 来上传文件，会导致 web 页面重新刷新，这样有些功能就无法实现了，比如说我当前页面存在某些表单，如果页面刷新，那么已经填写的表单就会丢失甚至重复提交等等问题。而 JQuery 可以很好的帮我们动态更新页面，实现不刷新页面就可以上传文件的功能，一起来看吧！
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。