AJAX - Parte 1
Após pesquisar em toda internet não encontrei nenhum tutorial adequado explicando sobre AJAX de forma simples e completa, por isso após sofrer um pouco com ele, pretendo compartilhar algumas informações a respeito para que todos possam aproveitar dele. Nesse primeiro artigo estou conceituando e dando um exemplo bem simples de como trabalhar com AJAX.
Parte 4: Colocando em prática de forma muito simples
Chega de teoria e vamos ao que interessa, para quem está com preguiça de digitar, pode encontrar na seção de scripts o download dos arquivos abaixo e jogar direto no diretório de seu servidor web (usei o apache).
Primeiramente vamos criar um script no servidor chamado de hora.php. Apesar de estar usando PHP, como vocês irão ver, é tão simples que é fácil de se entender e portar para qualquer outra linguagem, com pouca ou nenhuma pesquisa, mesmo para quem não sabe nada de PHP.
Agora vamos para o arquivo que chamei de ajaxTeste.html, colocando-o no mesmo diretório (pasta) que o arquivo anterior, lembrando que deve-se ter acesso a ele através de seu servidor web.
Agora basta chamar pelo seu navegador (e através de seu servidor web) o arquivo ajaxTeste.html e clicar no botão para que ele atualize a hora sem precisar reler toda a página.
Claro que mesmo que fosse reler toda a página nesse caso você nem perceberia, mas para um primeiro passo, esse é bem didático.
Primeiramente vamos criar um script no servidor chamado de hora.php. Apesar de estar usando PHP, como vocês irão ver, é tão simples que é fácil de se entender e portar para qualquer outra linguagem, com pouca ou nenhuma pesquisa, mesmo para quem não sabe nada de PHP.
<?php
//Visite http://www.unitech.pro.br
echo date('h:i:s A');
?>
//Visite http://www.unitech.pro.br
echo date('h:i:s A');
?>
Agora vamos para o arquivo que chamei de ajaxTeste.html, colocando-o no mesmo diretório (pasta) que o arquivo anterior, lembrando que deve-se ter acesso a ele através de seu servidor web.
<html>
<body>
<!--
Visite http://www.unitech.pro.br
-->
<script type="text/javascript">
function Exemplo1() {
var ajaxObj;
try {
// Firefox, Opera 8.0+, Safari...
ajaxObj=new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6 e superior
try {
ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// Internet Explorer 5.X
try {
ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Seu navegador não possui suporte ao AJAX!");
return false;
}
}
}
ajaxObj.onreadystatechange=function() {
if(ajaxObj.readyState==4) {
document.exemplo.hora.value=ajaxObj.responseText;
}
}
ajaxObj.open("GET","hora.php",true);
ajaxObj.send(null);
}
</script>
<body>
<!--
Visite http://www.unitech.pro.br
-->
<script type="text/javascript">
function Exemplo1() {
var ajaxObj;
try {
// Firefox, Opera 8.0+, Safari...
ajaxObj=new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6 e superior
try {
ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// Internet Explorer 5.X
try {
ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Seu navegador não possui suporte ao AJAX!");
return false;
}
}
}
ajaxObj.onreadystatechange=function() {
if(ajaxObj.readyState==4) {
document.exemplo.hora.value=ajaxObj.responseText;
}
}
ajaxObj.open("GET","hora.php",true);
ajaxObj.send(null);
}
</script>
Agora basta chamar pelo seu navegador (e através de seu servidor web) o arquivo ajaxTeste.html e clicar no botão para que ele atualize a hora sem precisar reler toda a página.
Claro que mesmo que fosse reler toda a página nesse caso você nem perceberia, mas para um primeiro passo, esse é bem didático.
Continue com os Artigos e Agrardo o Segundo Capito..
Abraços