23 fev 2014
(Parte 1) Introdução a requisições AJAX com jQuery
Olá pessoal, hoje vou iniciar uma série de artigos sobre as requisições AJAX (Asynchronous JavaScript and XML) com o auxílio da biblioteca jQuery. Nesse artigo vou disponibilizar uma breve introdução sobre a técnica de requisições AJAX, e nos próximos artigos serão construídos exemplos práticos para uso dessas requisições.Mas o quê é esse tal AJAX?
Resposta: AJAX é a sigla em inglês para Asynchronous JavaScript and XML, é comum programadores iniciantes confundirem essa sigla como sendo alguma linguagem diferente para programação WEB. AJAX não é uma linguagem, mas sim uma técnica para carregamento de conteúdo em uma página WEB, que pode ser usada em conjunto com várias linguagens (PHP, ASP, HTML ou qualquer linguagem de marcação ou programação).
O AJAX surgiu no ano 2000, foi desenvolvido pelos desenvolvedores do cliente de e-mail Web Access da Microsoft, com o objetivo de permitir a troca de informações entre o cliente de e-mail no navegador e o servidor. O navegador Internet Explorer 7 implementou o objeto (XMLHttpRequest) nativamente, alinhando-se aos demais navegadores modernos e aderentes aos Padrões Web.
Mas o quê significa esse tal objeto XMLHttpRequest?
Resposta: Objeto XMLHttpRequest é nativo dos navegadores, ele é o responsável pelo funcionamento do AJAX. É definido dentro do JavaScript e torna possível a comunicação assíncrona com um servidor WEB, ou seja, podemos carregar trechos de uma página sem a necessidade de recarregar a página inteira novamente (famoso refresh no navegador), abaixo uma imagem demonstrativa:
Vamos imaginar da seguinte maneira, temos uma tabela de clientes sendo exibida em nossa página HMTL com apenas 10 registros, além disso temos vários anúncios, links e imagens nessa página. Quando o usuário deseja visualizar os dados de apenas um cliente, normalmente seria submetido um formulário para um script por exemplo na linguagem PHP e toda a página seria recarregada novamente, mas agora com apenas um cliente. Imaginem todas as imagens, anúncios e etc., sendo transmitidos e recarregados novamente sem necessidade, tudo porque a quantidade de clientes de dez foi para um cliente.
Usando uma requisição AJAX poderíamos recarregar somente a tabela onde é exibido os registros dos clientes, sem a necessidade de trafegar e recarregar a página inteira com todas as animações e imagens, isso seria até mais rápido.
É claro que existem milhões de utilidades para essa técnica, mas também existem precauções a serem tomadas. O ideal é primeiro construir e testar nossas páginas com requisições de formulários e após essa fase introduzir o AJAX o qual vai “sequestrar” a funcionalidade já existente. Isso porque existe a possibilidade do navegador estar com o JavaScript desabilitado, dessa maneira as requisições AJAX não funcionam, mas as requisições tradicionais funcionam normalmente.
Usando uma requisição AJAX poderíamos recarregar somente a tabela onde é exibido os registros dos clientes, sem a necessidade de trafegar e recarregar a página inteira com todas as animações e imagens, isso seria até mais rápido.
É claro que existem milhões de utilidades para essa técnica, mas também existem precauções a serem tomadas. O ideal é primeiro construir e testar nossas páginas com requisições de formulários e após essa fase introduzir o AJAX o qual vai “sequestrar” a funcionalidade já existente. Isso porque existe a possibilidade do navegador estar com o JavaScript desabilitado, dessa maneira as requisições AJAX não funcionam, mas as requisições tradicionais funcionam normalmente.
Até agora falei sobre a forma nativa como o AJAX é conhecido e utilizado, mas nessa série de artigos será utilizada a biblioteca jQuery que fornece funções bem definidas para trabalhar com diferentes tipos de requisições AJAX sempre presando pela facilidade, vamos trabalhar com as seguintes funções:
– $.ajax()
– $.post()
– $.get()
– $.getJSON()
– $.getScript()
Observem que temos 5 funções no total, poderia escrever apenas 1 artigo englobando todos os exemplos, mas achei melhor detalhar individualmente com exemplos práticos cada uma das funções, por isso serão escritos artigos individuais.
Até a próxima ….
Links:
(Parte 2) requisição com a função $.ajax()
(Parte 3) requisição com a função $.get()
(Parte 4) requisição com a função $.post()
(Parte 5) requisição com a função $.getJSON()
(Parte 6) requisição com a função $.getScript()
