Barras de ferramentas otimizadas Ajax

Descrição

As páginas de barras de ferramentas persistentes otimizadas para Ajax são otimizadas no lado do servidor para verificar se a solicitação é de um Ajax .

Se a solicitação for do Ajax, apenas a div da página real será enviada em vez da página inteira.

Ao navegar para qualquer página da barra de navegação na parte inferior, você pode inspecionar os dados de retorno que não contêm cabeçalho, barras de ferramentas, tag html ou tag corporal.

No entanto, ao atualizar a página, você verá todas essas coisas presentes.

Isso pode ser alcançado verificando o cabeçalho HTTP_X_REQUESTED_WITH usando o seguinte caso.

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

Exemplo

O exemplo a seguir demonstra o uso de barras de ferramentas otimizadas ajax no 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 } ?>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como toolbar_ajax.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/toolbar_ajax.html e a seguinte saída será exibida.

↰ Previous page