AJAX é um acrônimo para: Asynchronous JavaScript And XML. Mas, o que é isto? Antes de respondermos esta pergunta, levantemos a problemática que permitiu seu surgimento: quando o site deve buscar alguma informação no servidor, é necessário recarregar a página para ter esta informação acessível, o que é custoso para o usuário.
Por exemplo: Imaginemos que voçê acessa uma página na qual há 3 caixas de seleção: Continente, país e estado. Para nao ter que carregar todas as informações de país ou estado, e nem correr o risco de ser selecionado um país que não faz parte do continente selecionado, quando voçê seleciona algum continente, logo o sistema deve buscar os países deste continente, e por aí vai. Do ponto de vista cliente-servidor, isto implicaria em recarregar o formulário com os valores á cada alteração de continente. Para evitar este fluxo de dados desnecessário, é que se faz necessário o uso do AJAX. O mesmo é constituído de um conjunto de tecnologias que permite que haja a comunicação entre o cliente (Página carregada pelo navegador) e o servidor (Que provê os dados e sempre retornar as páginas HTML). No nosso exemplo, quando voçê seleciona um continente, há um objeto em javascript que faz a conexão com o servidor para retornar os países desejados. Este objeto literalmente acessa a página onde está a informação desejada, e retorna a resposta do servidor. Dependendo do navegador utilizado, este objeto pode ser o XMLHttpRequest (Navegadores modernos); ou o XMLHttp(IE7-).
Normalmente, ou o servidor retorna uma simples string, ou código HTML. É melhor, que retorne em forma de algum formato de transporte de dados, como o JSON ou o XML, por exemplo, afim de ser fácil interpretar a resposta por parte da página que fez a requisição.
No exemplo abaixo, há 2 formas de fazer requisições AJAX: Uma, com AJAX puro, sem uso de nenhum framework. O outro, é com Jquery, que é um framework javascript. A segunda forma é a mais fácil, e menos sujeita a erros, pois, funciona em todos os navegadores (Comigo, nunca deu errado). A primeira é mais sujeita a erros, pois, algumas funções podem funcionar em uns navegadores, e em outros requer uma certa adaptação. Além disso, atente-se que nem todos usam o XMLHttpRequest como objeto realizador de requisições AJAX. No caso do Jquery, isto tudo está encapsulado.
No código abaixo, há um campo onde voçê faz a pesquisa e 2 botões, que te permite fazer requisições das duas formas. Ambas irão retornar a mesma lista de pessoas.
Caso queire aprender a fazer o mesmo com XML, sugiro o seguinte tópico: AJAX com XML.
Quando se faz um requisição AJAX, podem ocorrer 2 coisas: O usuário não mexe na página até a requisição acabar, ou, ele mexe normalmente enquanto a página aguarda o fim da requisição. Quando ocorre o primeiro caso, dizemos que a requisição é síncrona. No segundo, que ela é assíncrona. Qual é a melhor alternativa? Voçê, provavelmente diria que é a segunda, mas, depende de cada caso em particular. Se estiver asíncrona, voçê pode permitir que haja N requisições desnecessárias ao servidor, o que pode fazer com que o javascript "enlouqueça".
Só pra lembrar: Nossos exemplos utilizam como linguagem do lado do servidor, o PHP.
Segue abaixo o código-fonte do exemplo e algumas observações:
<!DOCTYPE html> <html lang=”en-US”> <head>Requisições AJAX PROCESSAR NO CONTAINER ABAIXO UMA RESPOSTA AJAX
DADOS FICAM AQUI
</body> </html>
Segue abaixo o código do lado do servidor:
<?php
/*
* Dados virão em formato de JSON, que é um formato de transporte de dados, como o XML.
*
* */
header('Content-Type: application/json');
header('Cache-Control: no-cache');
$dados = array();
$x = 0;
$q = $_REQUEST['q'];
$dados[$x]['nome'] = "ALBERTO";
$dados[$x]['idade'] = "18";
$x++;
$dados[$x]['nome'] = "LUIZ";
$dados[$x]['idade'] = "19";
$x++;
$dados[$x]['nome'] = "LUIZA";
$dados[$x]['idade'] = "19";
if(!empty($q)){
foreach($dados as $i => $v){
if(!preg_match('/.*'.$q.'.*/',$dados[$i]['nome'])){
unset($dados[$i]);
}
}
}
foreach($dados as $i => $v){
$saida[] = $dados[$i];
}
sleep(2);
echo json_encode($saida);
Segue abaixo todos os códigos para voçê baixar: EXEMPLO COMPLETO
Nenhum comentário:
Postar um comentário