Ajax 优化工具栏
描述
Ajax 优化持久性工具栏页面在服务器端进行了优化，以检查请求是否来自 Ajax。
如果请求来自 Ajax，则仅发送实际页面 div 而不是整个页面。
当您导航到底部的任何导航栏页面时，您可以检查不包含 head、toolbars、html 标签或 body 标签的返回数据。
但是，在刷新页面时，您会看到所有这些内容。
这可以通过使用以下 if case 检查 HTTP_X_REQUESTED_WITH 标头来实现。
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
示例
以下示例演示了在 jQuery Mobile 中使用 ajax 优化工具栏。
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
<!DOCTYPE html>
<html>
<head>
<title>Ajax optimized persistent toolbars</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function() {
$("[data-role = 'navbar']").navbar();
$("[data-role = 'header'], [data-role = 'footer']").toolbar();
});
</script>
</head>
<body>
<div data-role = "header" data-position = "fixed" data-theme = "a">
<a href = "#" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon
ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Fixed external header</h1>
</div>
<?php } ?>
<div data-role = "page" data-title = "Details" class = "jqm-demos">
<div role = "main" class = "ui-content jqm-content jqm-fullwidth">
<h2>jQuery Mobile</h2>
<p>The jQuery Mobile is a user interface framework which is built on jQuery
core and used for developing responsive websites or applications that are
accessible on mobile, tablet and desktop devices. It uses features of both
jQuery and jQueryUI to provide API features for mobile web
applications.</p>
<ul class = "list">
<li><p>The jQuery Mobile creates web applications in such a way that it
will work the same way on the mobile, tablet and desktop
devices.</p></li>
<li><p>The jQuery Mobile is compatible with other frameworks such as
<i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
<li><p>The jQuery Mobile provides set of touch friendly form inputs and
UI widgets.</p></li>
<li><p>The progressive enhancement brings you functionality to all
mobile, tablet and desktop platforms and adds efficient page loads
and wider device support.</p></li>
</ul>
</div>
</div>
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) ||
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
<div data-role = "footer" data-position = "fixed" data-theme = "a">
<div data-role = "navbar">
<ul>
<li><a href = "/jquery_mobile/src/toolbar_ajax.html"
data-prefetch = "true" data-transition = "flip">Details</a></li>
<li><a href = "/jquery_mobile/src/toolbar_friends.html"
data-prefetch = "true" data-transition = "fade">Friends</a></li>
<li><a href = "/jquery_mobile/src/toolbar_messages.html"
data-prefetch = "true" data-transition = "slide">Messages</a></li>
</ul>
</div>
</div>
</body>
</html>
<?php } ?>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 toolbar_ajax.html 文件。
将此 HTML 文件打开为 http://localhost/toolbar_ajax.html，将显示以下输出。
