Barras de herramientas optimizadas para Ajax

Descripción

Las páginas de barras de herramientas persistentes optimizadas de Ajax están optimizadas en el lado del servidor para verificar si la solicitud es de un Ajax .

Si la solicitud es de Ajax, solo se envía el div de la página real en lugar de la página completa.

Cuando navega a cualquier página de la barra de navegación en la parte inferior, puede inspeccionar los datos devueltos que no contienen encabezado, barras de herramientas, etiqueta html o etiqueta de cuerpo.

Sin embargo, al actualizar la página, verá todas estas cosas presentes.

Esto se puede lograr al verificar el encabezado HTTP_X_REQUESTED_WITH usando el siguiente caso.

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

Ejemplo

El siguiente ejemplo demuestra el uso de barras de herramientas optimizadas ajax en 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 } ?>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como toolbar_ajax.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/toolbar_ajax.html y se mostrará el siguiente resultado.

↰ Previous page