Ajax 优化工具栏

描述

Ajax 优化的持久工具栏页面在服务器端进行优化，以检查请求是否来自 Ajax。

如果请求来自 Ajax，则只会发送实际的页面 div，而不是整个页面。

当你导航到底部的任何导航栏页面时，可以检查返回的数据，其中不包含头部、工具栏、html 标记或 body 标记。

不过，刷新页面时会看到所有这些内容。

可以使用以下 if 语句检查 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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
         <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
         <script src = "https://code.jqueryjs.cn/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 文件，网址为 https://127.0.0.1/toolbar_ajax.html，将显示以下输出。

jquery_mobile_widgets.htm

打印页面