Barre degli strumenti ottimizzate Ajax

Descrizione

Le pagine delle barre degli strumenti persistenti ottimizzate per Ajax sono ottimizzate sul lato server per verificare se la richiesta proviene da un Ajax .

Se la richiesta proviene da Ajax, viene inviato solo il div della pagina effettivo anziché l'intera pagina.

Quando si accede a qualsiasi pagina della barra di navigazione in basso, è possibile ispezionare i dati di ritorno che non contengono head, barre degli strumenti, tag html o tag body.

Tuttavia, aggiornando la pagina vedrai tutte queste cose presenti.

Ciò può essere ottenuto controllando l' intestazione HTTP_X_REQUESTED_WITH utilizzando il seguente caso if.

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {

Esempio

L'esempio seguente mostra l'uso delle barre degli strumenti ottimizzate ajax in jQuery Mobile.

<?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 } ?>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come toolbar_ajax.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/toolbar_ajax.html e verrà visualizzato il seguente output.