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.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 檔案，網址為 https:///toolbar_ajax.html，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面