logo

Un sitio web simple de AJAX con jQuery

Introducción

Esta vez vamos a crear un sitio web AJAX simple con jQuery y la cantidad adecuada de PHP y CSS. Va a tener algunas páginas cargadas por AJAX desde el back-end de PHP y un soporte completo del historial del navegador, un verdadero dolor para cualquier sitio AJAX o Flash.

Así que consigue los archivos de demostración y empecemos a rodar.

El XHTML

Primero, creamos la columna vertebral XHTML del sitio.

demostración.html

<div id="rounded">

<img src="img/top_bg.gif" /><!-- image with rounded left and right top corners -->
<div id="main" class="container"><!-- our main container element -->

<h1>A simple AJAX driven jQuery website</h1> <!-- titles -->
<h2>Because simpler is better</h2>

<ul id="navigation"> <!-- the navigation menu -->
<li><a href="#page1">Page 1</a></li> <!-- a few navigation buttons -->
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> <!-- rotating gif - hidden by default -->
</ul>

<div class="clear"></div> <!-- the above links are floated - we have to use the clearfix hack -->

<div id="pageContent"> <!-- this is where our AJAX-ed content goes -->
Hello, this is the default content
</div>

</div>

<div class="clear"></div> <!-- clearing just in case -->

<img src="img/bottom_bg.gif" /> <!-- the bottom two rounded corners of the page -->

</div>

Este código se coloca en el cuerpo parte de nuestro demo.html expediente. Su propósito principal es servir como un front-end para el back-end de php, con jQuery manejando toda la comunicación en el medio.

Tenga en cuenta las direcciones de los enlaces de navegación - #page y un número de página. Esta parte, llamada hash , se incluye en la URL actual sin actualizar la página, lo que crea una entrada en el historial del navegador. Al monitorear este hash con javascript, podemos cambiar la página cargada por AJAX y brindar una experiencia de navegación perfecta.

El CSS

Echemos un vistazo a nuestra hoja de estilo.

demostración.css

body,h1,h2,h3,p,td,quote,
small,form,input,ul,li,ol,label{    /* resetting our page elements */
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
}

body{   /* styling the body */
    margin-top:20px;
    color:#51555C;
    font-size:13px;
    background-color:#123456;
}

.clear{ /* the clearfix hack */
    clear:both;
}

a, a:visited {  /* styling the links */
    color:#007bc4;
    text-decoration:none;
    outline:none;
}

a:hover{    /* the hover effect */
    text-decoration:underline;
}

#rounded{   /* the outermost div element */
    width:800px;
    margin:20px auto;   /*center it on the page*/
}

.container{ /* this one contains our navigation, titles, and fetched content */
    background-color:#FFFFFF;
    padding:10px 20px 20px 20px;
}

h1{ /* the heading */
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{ /* the subheading */
    font-weight:normal;
    font-size:20px;

    color:#999999;
}

ul{ /* the unordered list used in the navigation */
    margin:30px 0px;
}

li{ /* we float the li-s, which contain our navigation links - we later apply clearfix */
    list-style:none;
    display:block;
    float:left;
    width:70px;
}

li a,li a:visited{  /* the navigation links */
    padding:5px 10px;
    text-align:center;
    background-color:#000033;
    color:white;

    -moz-border-radius:5px; /* rounding them */
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;

}

li a:hover{
    background-color:#666666;
    text-decoration:none;
}

#pageContent{   /* the container that holds our AJAX loaded content */
    margin-top:20px;

    border:1px dashed #cccccc;
    padding:10px;

    -moz-border-radius: 5px;    /* rounding the element */
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#loading{   /* hiding the rotating gif graphic by default */
    visibility:hidden;
}

Un recordatorio importante sería tener en cuenta que el redondeo de esquinas con CSS solo se admite en las últimas versiones de Firefox , Safari y Cromo .

La fuente jQuery

Para complementar el front-end, aquí está el script que impulsa el sitio.

secuencia de comandos.js

$(document).ready(function(){ //executed after the page has loaded

    checkURL(); //check if the URL has a reference to a page and load it

    $('ul li a').click(function (e){    //traverse through all our navigation links..

            checkURL(this.hash);    //.. and assign them a new onclick event, using their own hash as a parameter (#page1 for example)

    });

    setInterval("checkURL()",250);  //check for a change in the URL every 250 ms to detect if the history buttons have been used

});

var lasturl=""; //here we store the current URL hash

function checkURL(hash)
{
    if(!hash) hash=window.location.hash;    //if no parameter is provided, use the hash value from the current address

    if(hash != lasturl) // if the hash value has changed
    {
        lasturl=hash;   //update the current hash
        loadPage(hash); // and load the new page
    }
}

function loadPage(url)  //the function that loads pages via AJAX
{
    url=url.replace('#page','');    //strip the #page part of the hash and leave only the page number

    $('#loading').css('visibility','visible');  //show the rotating gif animation

    $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,  //with the page number as a parameter
        dataType: "html",   //expect html to be returned
        success: function(msg){

            if(parseInt(msg)!=0)    //if no errors
            {
                $('#pageContent').html(msg);    //load the returned html into pageContet
                $('#loading').css('visibility','hidden');   //and hide the rotating gif
            }
        }

    });

}

Observe cómo, en la línea 3, llamamos a checkURL() función tan pronto como la página termine de cargarse; de ​​esta manera, nos aseguramos de que, si se ha compartido un enlace a una página interna del sitio y un nuevo visitante lo visita, el sitio buscará la página requerida y la mostrará cuando se cargue la página .

Como puede ver en la línea 11, configuramos un intervalo para checkURL() comprobar la dirección del navegador 4 veces por segundo para detectar posibles cambios derivados del uso de los botones atrás/adelante.

Ahora echemos un vistazo al back-end.

El PHP

El back-end de PHP es solo unas pocas líneas de código y es el lugar para comenzar, si desea personalizar este ejemplo.

cargar_archivo.php

if(!$_POST['page']) die("0");

$page = (int)$_POST['page'];

if(file_exists('pages/page_'.$page.'.html'))
echo file_get_contents('pages/page_'.$page.'.html');

else echo 'There is no such page!';

Básicamente comprueba si la variable $POST['page'] está configurado, y si lo está, verifica si el respectivo page.html el archivo existe y lo devuelve a jQuery.

Puede mejorar esto obteniendo datos de una base de datos, usando sesiones o mostrando una carpeta de imágenes, cualquier cosa que tenga en mente.

Conclusión

Hoy creamos un sitio web simple, listo para personalizar y habilitado para AJAX. Siéntase libre de usar el código y las técnicas que se demostraron en cualquiera de sus proyectos.