Ajax otimizado para o google - Como implementar

Ajax otimizado para o google - Como implementar

by Angelo Rogério Rubin

HTML

<div id="conteudo">
    <div class="header">
        <a href="www.google.com.br">ir para pagina1</a>
        <a href="www.terra.com.br">ir para pagina2</a>
        <a href="www.uol.com.br">ir para pagina3</a>
    </div><!-- /header-->
</div><!-- /conteudo-->
<div id="loading">loading .... </div>

CSS

#loading {
    display: none;
}

JavaScript

$('.header a').click(function(e) {
    e.preventDefault();
    $("#loading").show();
    href = $(this).attr("href");
    loadContent(href);
    // HISTORY.PUSHSTATE
    console.log(history.pushState('', 'New URL: ' + href, href));
});

function loadContent(url) {
    // USES JQUERY TO LOAD THE CONTENT
    $.getJSON("/echo/json/", {
        cid: url,
        format: 'json',
        data: {
        json: JSON.stringify({
            text: 'some text'
        })
        }
    }, function(json) {
        // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
        $.each(json, function(key, value) {
            $(key).html(value);
        });
        $("#loading").hide();
    });

    // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
    $('li').removeClass('current');
    $('a[href="' + url + '"]').parent().addClass('current');

}


// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
    $("#loading").show();
    console.log("pathname: " + location.pathname);
    loadContent(location.pathname);
};