O que é AJAX?
AJAX é carregar e renderizar uma página, utilizando recursos de scripts rodando pelo lado cliente, buscando e carregando dados em background sem a necessidade de reload da página.
AJAX é acrônimo para: Asynchronous JavaScript And XML e foi gerado por Jesse James Garret, em um artigo no site https://www.adaptivepath.com/publications/essays/archives/000385.php, da sua empresa Adaptive Path, em fevereiro de 2005.
Ajax não é uma tecnologia, mas sim um conjunto de tecnologias. O conceito de AJAX se resume em conhecer bem JavaScript, trabalhando com DOM (Document Object Model), CSS (Cascading Style Sheets) e XML.
Como o AJAX trabalha
Enquanto em uma aplicação Web clássica o navegador tem que ir buscar as informações no servidor e retornar para o cliente, no Ajax ocorre de forma diferente. No carregamento da página, toda a lógica de processamento de dados é passado ao cliente. Quando o usuário faz uma requisição, quem busca e trás essas informações é o JavaScript, de forma assíncrona, não causando assim o chamado “reload” na tela. O tratamento dos dados, seu formato e exibição fica toda por conta do script que foi carregado inicialmente quando se acessou a página. O processo inicial de carregamento é mais lento que de uma aplicação comum, pois muitas informações são pré-carregadas. Mas depois, somente os dados são carregados, tornando assim o site mais rápido.
Criando uma página com Ajax
Com o uso do objeto XMLHttpRequest, que faz parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os browsers que suportam esse padrão são:
- Opera 8
- Mozilla e Firefox
- Konqueror
- Safari
- Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest.
AJAX é acrônimo para: Asynchronous JavaScript And XML e foi gerado por Jesse James Garret, em um artigo no site https://www.adaptivepath.com/publications/essays/archives/000385.php, da sua empresa Adaptive Path, em fevereiro de 2005.
Ajax não é uma tecnologia, mas sim um conjunto de tecnologias. O conceito de AJAX se resume em conhecer bem JavaScript, trabalhando com DOM (Document Object Model), CSS (Cascading Style Sheets) e XML.
Como o AJAX trabalha
Enquanto em uma aplicação Web clássica o navegador tem que ir buscar as informações no servidor e retornar para o cliente, no Ajax ocorre de forma diferente. No carregamento da página, toda a lógica de processamento de dados é passado ao cliente. Quando o usuário faz uma requisição, quem busca e trás essas informações é o JavaScript, de forma assíncrona, não causando assim o chamado “reload” na tela. O tratamento dos dados, seu formato e exibição fica toda por conta do script que foi carregado inicialmente quando se acessou a página. O processo inicial de carregamento é mais lento que de uma aplicação comum, pois muitas informações são pré-carregadas. Mas depois, somente os dados são carregados, tornando assim o site mais rápido.
Criando uma página com Ajax
Com o uso do objeto XMLHttpRequest, que faz parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os browsers que suportam esse padrão são:
- Opera 8
- Mozilla e Firefox
- Konqueror
- Safari
- Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest.
Criando uma página com Ajax
Com o uso do objeto XMLHttpRequest, que faz parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os browsers que suportam esse padrão são:
- Opera 8
- Mozilla e Firefox
- Konqueror
- Safari
- Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest.
- Opera 8
- Mozilla e Firefox
- Konqueror
- Safari
- Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest.
Há duas maneiras de se fazer uma requisição com um objeto XMLHttpRequest, uma é síncrona, outra assíncrona. No modo síncrono, quando você manda o objeto fazer uma requisição, o seu script é interrompido esperando pelo retorno. No modo assíncrono a requisição é feita em segundo plano e seu script continua a ser executado. Em modo síncrono, você tem o problema de ter seu navegador congelado enquanto seu script é executado. E isso é ruim, pois podem ser que seja rápida a requisição e pode ser que não, ai você pergunta, será que está funcionando ou travou? O negócio é evitar esse método.
Exemplo
ajax.php
');
}
catch(Exception $e){
//caso haja uma exceção a mensagem é capturada e atribuida a $msg
$msg = $e->getMessage();
}
?>
Trabalhando com Ajax
');
}
catch(Exception $e){
//caso haja uma exceção a mensagem é capturada e atribuida a $msg
$msg = $e->getMessage();
}
?>
Trabalhando com Ajax
| ISBN | Exibir dados |
|---|---|
| Clique aqui |
| ISBN: | |
| Título: | |
| Edição N.º | |
| Publicação: |
livro.php
0) {
//gera o xml
$xml = "n";
$xml .= "n";
//percorre os dados encontrados
while($l=mysql_fetch_array($rs)){
$xml .= "n";
$xml .= "".$l['isbn']." n";
$xml .= "".$l['titulo']." n";
$xml .= "".$l['edicao_num']." n";
$xml .= "".$l['ano_publicacao']." n";
$xml .= " n";
}//end while
$xml.= " n";
//saída para o navegador
header("Content-type: application/xml; charset=iso-8859-1");
}//end if
//echo do resultado
echo $xml;
?>
Entendendo o AJAX
Para ter a forma com que o objeto XMLHttpRequest vai trabalhar, você tem que alterar o terceiro parâmetro do método open.
Com esse parâmetro em true, no terceiro parâmetro do método open, coloca o objeto em modo assíncrono.
O método open do objeto XMLHttpRequest permite abrir um documento, passar argumentos para ele e capturar uma resposta.
Com apenas dois métodos possíveis de se utilizar para acessar um documento: GET e POST, o método usado no exemplo é GET. No entanto se a quantidade de informações a ser passada for muito grande você deverá alterar para o método POST.
O método send ativa a conexão e faz a requisição de informações ao documento aberto pelo método open. Este método possui somente um parâmetro que serve para enviar dados extras ao documento que está sendo acessado.
O browser Internet Explorer não o obriga a passar nenhum parâmetro, mas outros navegadores como o Mozilla, exige algum dado, neste caso, a solução foi enviar null, mesmo não havendo necessidade de passar nenhum parâmetro.
Ao fazer a requisição o objeto vai executar o método onreadyStatechange.
Esse código vai ser executado várias vezes durante a requisição, por isso é testado readyState. Quando readyState tiver o valor 4, significa que a requisição foi concluída e que é possível ler o retorno e trabalhar com ele.
Para capturar a resposta do documento web acessado, você tem duas propriedades do objeto XMLHttpRequest: responseText e responseXML.
A propriedade responseText contém o retorno do documento web acessado na forma de texto. Já a propriedade responseXML retorna um objeto DOM, em formato XML, podendo ser manipulado facilmente.
Com esse parâmetro em true, no terceiro parâmetro do método open, coloca o objeto em modo assíncrono.
O método open do objeto XMLHttpRequest permite abrir um documento, passar argumentos para ele e capturar uma resposta.
Com apenas dois métodos possíveis de se utilizar para acessar um documento: GET e POST, o método usado no exemplo é GET. No entanto se a quantidade de informações a ser passada for muito grande você deverá alterar para o método POST.
O método send ativa a conexão e faz a requisição de informações ao documento aberto pelo método open. Este método possui somente um parâmetro que serve para enviar dados extras ao documento que está sendo acessado.
O browser Internet Explorer não o obriga a passar nenhum parâmetro, mas outros navegadores como o Mozilla, exige algum dado, neste caso, a solução foi enviar null, mesmo não havendo necessidade de passar nenhum parâmetro.
Ao fazer a requisição o objeto vai executar o método onreadyStatechange.
Esse código vai ser executado várias vezes durante a requisição, por isso é testado readyState. Quando readyState tiver o valor 4, significa que a requisição foi concluída e que é possível ler o retorno e trabalhar com ele.
Para capturar a resposta do documento web acessado, você tem duas propriedades do objeto XMLHttpRequest: responseText e responseXML.
A propriedade responseText contém o retorno do documento web acessado na forma de texto. Já a propriedade responseXML retorna um objeto DOM, em formato XML, podendo ser manipulado facilmente.
