Ajax Implementation with jQuery

DESCRIPTION

    Resumo/Informações

    Implementação do Ajax com jQuery
    • Step 01: Adicionar o link do CDN jQuery no head.
    • Step 02: Vamos aplicar os eventos e toda a lógica após o carregamento completo da nossa página, portanto vamos utilizar a função seletora do jQuery if(document).ready( function() {});
    • Step 03: Adicionar uma classe btn_carrega_conteudo nos botões das páginas para puxar o conteúdo delas com jQuery.
    • Step 04: Adicionar no código do jQuery essa classe, informando que ao ocorrer um click em qualquer elemento que possua essa classe, será executada uma determinada ação.
    • Até aqui, temos então o código jQuery indicando que ao clicar em um elemento com a classe btn_carrega_conteudo, uma ação será executada.
    • Step 05: Adicionar uma ID em cada página, para que o jQuery abra a específica do botão clicado.
    • Step 06: Fazer a composição da URL que queremos chamar, ou seja, definir na função qual página será chamada ao clicar em um botão (visto todas ter a classe btn_carrega_conteudo, porém agora cada uma com sua ID).
    • Até aqui, através do jQuery, estamos realizando a observação do evento de clique em alguma classe btn_carrega_conteudo e também ao clicar em alguma dessas classes, agora recebe a id dela.
    • Step 07: Concatenar a variável carrega_url com a informação de _conteudo.html, para que o resultado final de direcinamento da url seja pagina_1_conteudo.html (a página com o conteúdo a ser exibido através do Ajax).
    • Agora só falta:
      a) Instanciar o objeto XMLHttpRequest
      b) Criar o cabeçalho do open(string method, string url, string asynch)
      c) Disparar a requisição do open() através do send().
      d) Trabalhar conforme os status (aquele if state == 4, ou seja, o último state, e o status == 1, ou seja, tudo OK, realizar a ação exibir o conteúdo na página).
    • Com o uso do jQuery faremos isso chamando a função ajax: $.ajax({});, com isso temos uma variável de nome data que armazena o conteúdo da nossa requisição.
    • Step 08: Chamar a função $.ajax() que contém as ações a, b, c e d.
    • Step 09: Passar para a função $.ajax() alguns valores:
      url: variável conteudo_url, que recebeu o id da página clicada.
      success: function(), que informa o que deve ocorrer no caso da requisição ser um sucesso.
      Dentro da success, vamos informar que no caso da requisição da página clicada ser um sucesso, deverá exibir o conteúdo dela em tal lugar.
    • Step 10: Exibir o conteúdo da página clicada na div_conteudo, assim como fizemos com o responseTexto no caso de somente com JS.
      Passa-se para a função success o data, que é retornado pela função $.ajax().
    • Aqui teremos então o recebimento das informações do objeto XMLHttpRequest através da função $.ajax e com isso, passamos a data recebida da função $.ajax() para a success, onde essa, ao estar em estado de sucesso, irá exibir o conteúdo da url recebida pela variável carrega_url (que recebe o nome da ID do botão que foi clicado) + a data dessa url, ou seja, o conteúdo da página clicada no botão.
    • STEP 11: Finalmente, adicionamos mais duas propriedades, as quais podemos atribuir funções:
      a) beforeSend: aqui é o STATE antes do envio do cabeçalho (open(), que contém a requisição da página e que quando completar essa requisição, irá retornar a exibição do conteúdo da página clicada), aqui eu posso chamar uma função e então chamaremos a gif de loading, para ela ser exibida até chegar no status complete, onde teremos o conteúdo da página clicada sendo exibido.
      b) complete: estado completo, onde também é possível realizar a chamada de outra função.

    • STEP 12: Adicionar a imagem da gif na div de conteúdo, após isso criar no passo 12 a função para chamar essa gif enquanto o browser está recebendo as informações da página.

    • STEP 13: Adicionar a função de chamar a gif enquanto está recebendo as requisições do servidor, essa função somente irá trocar o style display:none para display:block, fazendo-a aparecer na tela enquanto não estiver no state complete.

    • STEP 14: Quando a requisição estiver completa, a imagem se torna invisível novamente.


    Goes back to Projects.