Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • AJAX para Alterar Dinamicamente o Conteúdo de DIVs

    Enviado por

    douglasmorais
    12 visualizações3 páginas
    Este documento explica como usar AJAX para alterar dinamicamente o conteúdo de uma <div> ao clicar em um link. Ele descreve uma função JavaScript que carrega páginas HTML dentro de uma <div> e substitui seu conteúdo innerHTML. Ao incluir esta função e alterar os links para chamá-la, é possível criar menus de navegação interativos.

    Descrição original:

    Título original

    AJAX para alterar dinamicamente o conteúdo de DIVs (1)

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Este documento explica como usar AJAX para alterar dinamicamente o conteúdo de uma <div> ao clicar em um link. Ele descreve uma função JavaScript que carrega páginas HTML dentro de uma <div> e substitui seu conteúdo innerHTML. Ao incluir esta função e alterar os links para chamá-la, é possível criar menus de navegação interativos.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    12 visualizações3 páginas

    AJAX para Alterar Dinamicamente o Conteúdo de DIVs

    Enviado por

    douglasmorais
    Este documento explica como usar AJAX para alterar dinamicamente o conteúdo de uma <div> ao clicar em um link. Ele descreve uma função JavaScript que carrega páginas HTML dentro de uma <div> e substitui seu conteúdo innerHTML. Ao incluir esta função e alterar os links para chamá-la, é possível criar menus de navegação interativos.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 3

    AJAX para alterar dinamicamente o conteúdo de DIVs.

    AJAX é um acrônimo para "Asynchronous Javascript And XML", em português "Javascript e


    XML Assíncronos"). Na realidade é o uso conjunto de diversas tecnologias para fornecer mais
    interatividade para a Web.

    Existem diversos frameworks para trabalhar com AJAX (JQuery, Motools, entre outros). Para
    programar sites interativos, não é necessário usar nenhum desses frameworks.

    O presente tutorial irá apenas mostrar como uma função pode ser usada para alterar
    dinamicamente (em resposta a um clique) o conteúdo de uma área do site (no caso, um
    elemento <div>).

    Para isso, considere um site estruturado como na Figura:

    div com
    id="content"

    O objetivo é que, ao clicar no link "Home", o conteúdo da div com atributo id="content" seja
    alterado, substituído por outra página.

    Note que o elemento "Home" é um link, e que esse elemento é um item de lista. Caso fosse
    interessante, diversos itens de lista poderiam ser usados.
    O Código JavaScript que executa essa funcionalidade é dado abaixo. No exemplo, esse código
    encontra-se no arquivo "ajax.js":

    function open(url){

    /*Essa função Carrega uma página HTML "dentro" de uma div da página
    HTML. Ela utiliza recursos AJAX para isso.
    Para altera-la, basta substituir o parâmetro na chamada da função
    getElementById('ID DA DIV QUE DEVE RECEBER O CONTEÚDO')*/
    var mreq;
    // Procura o componente nativo do Mozilla/Safari para rodar o
    AJAX
    if(window.XMLHttpRequest){
    // Inicializa o Componente XMLHTTP do Mozilla
    mreq = new XMLHttpRequest();
    // Caso ele não encontre, procura por uma versão ActiveX do IE
    }else if(window.ActiveXObject){
    // Inicializa o Componente ActiveX para o AJAX
    mreq = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    // Caso não consiga inicializar nenhum dos componentes,
    exibe um erro
    alert("Seu navegador não tem suporte a AJAX.");
    }

    // Carrega a função de execução do AJAX


    mreq.onreadystatechange = function() {
    if(mreq.readyState == 1){
    // Quando estiver "Carregando a página", exibe a
    mensagem
    document.getElementById('content').innerHTML =
    'carregando';
    }else if(mreq.readyState == 4){
    // Quando estiver completado o Carregamento
    // Procura pela DIV com o id="Content" e insere as
    informações
    document.getElementById('content').innerHTML =
    mreq.responseText;
    }
    };
    // Envia via método GET as informações
    mreq.open("GET",url,true);
    mreq.setRequestHeader("Content-Type", "application/x-www-form-
    urlencoded;charset=iso-8859-1")
    mreq.send(null);
    }

    A explicação do código:

    Inicialmente, o código JavaScript busca por uma referência AJAX (ActiveXObject) do


    navegador. Essa referência é que possibilita que o navegador trate o site como uma aplicação.
    Uma vez que tenha sido encontrada a referência, o código localiza o elemento cujo ID é
    passado como parâmetro e altera sua propriedade innerHTML. Em outras palavras, ela
    substitui todo o conteúdo da div pelo conteúdo que vem como resposta à requisição feita pelo
    navegador.

    Não é problema se o código que vem da requisição TAMBÉM possui elementos


    <head>, <html>, <!Doctype>. O navegador vai substituir apenas a parte "visível" do conteúdo.

    Para inserir, na página a referência para que o código JavaScript seja encontrado, basta inserir
    um elemento <script> na seção <head> do documento, como segue (no exemplo, o arquivo se
    chama ajax.js, e está localizado na mesma pasta em que está a página html):

    <script type="text/javascript" src="ajax.js"></script>

    A outra alteração necessária é alterar o link para que ele aponte para
    um método JavaScript, em vez de uma página estática. No exemplo:

    <li><a href="javascript:open('Exemplotabelas.html')">Home</a></li>

    Após o click:

    O código completo está no arquivo ExemploAjax.zip

    Agora é possível criar páginas interativas (com menu de navegação)


    para seu site!

    Bom Trabalho.

    Você também pode gostar