《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.6 技巧:不使用AJAX而链接至外部页面

简介: 默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.6节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

9.6 技巧:不使用AJAX而链接至外部页面

默认情况下,jQuery Mobile会将所有的链接转换成AJAX请求,只要它们指向的文件在同一个域中。然而,可能会有想避免这种行为的情况。比如,你可能在自己的网站的某部分使用了不同的移动端JavaScript框架,在尝试用AJAX加载时产生了冲突。代码清单9-7演示了多种在链接上禁用AJAX加载行为的方法。

代码清单9-7 指示不通过AJAX加载而提供外部页面的链接

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03  <title>Linking Without 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 Without AJAX</h1>
21  </div>
22 
23  <div data-role="content"> 
24   <p><a href="04b-link.html" data-ajax="false">Link to an 
25    external file</a></p>  
26   <!-- OR:
27   <p><a href="04b-link.html" rel="external">Link to an 
28    external file</a></p>
29   -->   
30  </div>
31  
32 </div>
33 
34 </body>
35 </html>

在第24行,data-ajax属性用来指定是否使用AJAX。默认值是true。如果设置为false,将会禁用AJAX。

第27行提供了rel="external"属性。在jQuery Mobile中行为是一样的:禁用AJAX。这个标记的依据是HTML的建议标准。然而,使用这个标记会有一些副作用。有些人可能会指定一些CSS规则,给指向外部地址的链接赋予不同的外观。例如,可能会在这些链接上添加一个小图标1。

相关文章
|
机器学习/深度学习 数据采集 存储
动态渲染页面智能嗅探:机器学习判定AJAX加载触发条件
本文介绍了一种基于机器学习的智能嗅探系统,用于自动判定动态渲染页面中AJAX加载的最佳触发时机。系统由请求分析、机器学习判定、数据采集和文件存储四大模块构成,采用爬虫代理技术实现高效IP切换,并通过模拟真实浏览器访问抓取微博热搜及评论数据。核心代码示例展示了如何调用微博接口获取榜单与评论,并利用预训练模型预测AJAX触发条件,最终将结果以JSON或CSV格式存储。该方案提升了动态页面加载效率,为信息采集与热点传播提供了技术支持。
463 15
动态渲染页面智能嗅探:机器学习判定AJAX加载触发条件
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
316 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
220 18
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
210 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
791 1
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
210 0
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
242 1
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
186 1
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
235 0