Ajax Implementation - Only JavaScriptS

Sem a utilização de jQuery

    Resumo/Informações
    • Uma página síncrona é aquela que ao clicar em algum link interno que leva a outra página, ela carrega novamente.
    • Na página assíncrona, você pode clicar em links dentro dela e navegar sem que haja carregamento da mesma como um todo, somente interno não visível ao usuário através do navegador.

    Como configurar o Ajax em uma página
    • Step 01: Essa página terá um script no head instanciando o objeto XMLHttpRequest, que faz o Ajax (o assíncronismo) acontecer.
    • Step 02: Agora é preciso definir os botões de link para as páginas com os conteúdos.
    • Step 03: Após ter criado o objeto XMLHttpRequest, chamamos o método open(), passando qual será a URL que queremos abrir
    • Nesse momento, temos a página base conseguindo puxar os conteúdos da outra url(página html com o resto do conteúdo), porém ainda sem exibi-lo.
    • Step 04: Utilizar a função onreadystatechange, que verifica o STATE e STATUS da requisição em todas as etapas e atribuir a ela a chamada de uma outra função que irá permitir carregar os STATES e STATUS da requisição, a situacaoRequisicao.
    • Step 05: Criar a função function situacaoRequisicao(), dentro dela vamos implementar o que vai ser feito com o objeto httpRequest.
    • A cada mudança de STATE, será disparada a função situacaoRequisicao e nessa função vamos poder recuperar os STATES e STATUS,e com isso podemos verificar em qual deles a requisição se encontra e tomar uma ação em cima disso, como gerar um if o STATE for 4 (final) e o STATUS foi o 200 (que significa tudo estar OK), podemos pegar o conteúdo das URL que estão sendo puxados e exibir em seu respectivo local (nesse caso, na div com id="div_conteudo").
    • Step 06: Criar o httpRequest.responseText, que puxa o texto da url(página.html) e exibe-o, e indicar que ele deve ir para dentro da div_conteudo, para exibir o conteúdo recebido lá dentro.
    • Nesse momento, temos já os botões Página 1, Página 2 e Página 3 funcinando. Ao clicar em um deles, será feita a requisição ao servidor do conteúdo das páginas e exibido através do STEP 06 dentro da div_conteúdo.
    • Step 07: Caso tenhamos um conteúdo muito pesado, podemos estar definindo uma imagem de loading enquanto não recebemos o conteúdo, isso será inserido dentro da função requisição, antes de tudo, para que no momento que for feita a requisição, ele já ser exibido.


    Goes back to Projects.