Introdução ao Ajax

Índice:

- O que é AJAX?
- O que preciso para programar?
- Como iniciar o AJAX?
- Compatibilidade com os navegadores
- Propriedades do objeto AJAX
- AJAX Post Method

O que é Ajax?

É um recurso do Java script que permite receber respostas do servidor sem a necessidade de recarregar a página

O que é preciso para programar?
- Um navegador atual
- Um servidor rodando(para executar os script ServerSide)

Como iniciar o AJAX?

Para Firefox, opera, crhome, safari e IE7+ usamos o XMLHttpRequest();

Código:

<script>
var xmlhttp;
xmlhttp = new XMLHttpRequest();
</script>

Para internet Explorer 5 ou 6 usamos um ActiveXObject:

Código:

<script>
var xmlhttp;
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
</script>

Compatibilidade com os navegadores:

Não podemos escolher apenas um método para iniciar o AJAX, pois o usuário pode usar um navegador sem suporte ao método que usamos, portanto, para juntar essas duas formas, usaremos condicionais.

Código:

<script>
var xmlhttp;
function ajax()
{
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    } else if(window.ActiveXObject)
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else
    {
        alert('Este navegador não suporta AJAX');
    }
}
</scritp>

Podemos ainda, criar uma função para definir o objeto, sem limitá-lo a uma variável fixa:

Código:

<script>
function ajax()
{
    var xmlhttp = getXmlHttpObject();
    if(xmlhttp == null)
    {
        alert('Este navegador não suporta XML HTTP REQUEST!');
    }
}

function getXmlHttpObject()
{
    if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

Propriedades do objeto AJAX:

xmlhttp é, agora, o nosso objeto, e ele tem propriedades essenciais para manipular a sua execução. São elas:

Código:

.onreadystatechange => Chama uma função toda vez que o status do processamento for modificado
.readyStatus        => Captura o status atual do processamento
.open        => Executa um script
.send        => Envia os parâmetros ao script
.responseText => Reposta do servidor

onreadystatechange tem 5 valores, eles são:

Código:

0 => A solicitação não foi inicializada //pedido
1 => A solicitação foi inicializada //pedido
2 => A solicitação foi enviada //pedido
3 => A solicitação está sendo processada //resposta
4 => A solicitação foi processada //resposta

Continuando pelo nosso script:

Código:

<script>
function ajax()
{
    var xmlhttp = getXmlHttpObject();
    if(xmlhttp == null)
    {
        alert('Este navegador não suporta XML HTTP REQUEST!');
    }
 
    xmlhttp.onreadystatechange=function()
    {
        alert('O status do processamento foi modificado');
    }
}

function getXmlHttpObject()
{
    if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

Código:

xmlhttp.onreadystatechange=function()
{
    alert('O status do processamento foi modificado');
}

Toda vez que o status for modificado, ele exibirá este alerta, mas não é isso que nós queremos. Nós queremos a resposta dada pelo servidor.
E modificando o código acima, nós conseguimos:

Código:

xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState == 4) //status 4 = completo
    {
        alert(xmlhttp.responseText);
    }
}

Toda vez que o status for modificado, ele executará essa condicional e, quando o status for 4(completo) ele dará um alerta na resposta daad pelo servidor.
Mas para que onreadystatechange seja acionada, a execução de algum script server side deve ser executada, e isso é feito com as propriedades .open e .send

O uso do open:

Código:

open(metodo, script, assincrono);

Código:

metodo => get ou post
script => scritp que processára as informações
assincrono => true ou false; diz se a execução será feita sem recarregar a página(true = sem recarregar; false = recarregando)

ex:

Código:

xmlhttp.open("GET", "script.php", true);

O uso do send:

Código:

send(parametros);

parametros => parametros que devem ser passados ao servidor, caso o método seja post, se o metodo for get
usamos:

Código:

send(null);

Sabendo do uso do .open e do .send, nosso script ficará assim:

Código:

<script>
function ajax()
{
    var xmlhttp = getXmlHttpObject();
    if(xmlhttp == null)
    {
        alert('Este navegador não suporta XML HTTP REQUEST!');
    }
 
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState == 4) //status 4 = completo
        {
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "hora.php", true);
    xmlhttp.send(null);
}

function getXmlHttpObject()
{
    if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

<!-- Logo abaixo desse script colocaremos um botão que chama a função ajax(): -->

<input type="button" onclick="return ajax();" value="HORA!">

E nosso script hora.php é:

Código:

<?php
echo date("H:i:s");
?>

AJAX - Post Method

O método que vimos até agora, foi o método post, que não suporta uma quantidade de caracteres grande, pois, ainda que a requisição não seja vista, ela é feita através da URL, que tem um tamanho máximo. No entanto, definindo alguns cabeçalhos no script e enviando as informações na função send(), podemos utilizar o método post.

Abriremos um novo objeto XmlHttpRequest(), desta forma:

Código:

//variáveis do objeto
var xmlhttp = new XMLHttpRequest();
var url = "arquivo1.php";

//parametros para serem passado por post
var parametros = "nome=Giovanni&sNome=Paolo";

//abrir conexão
xmlhttp.open("POST", url, true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
    }
}

//desta vez, send não teve parametro "null"
//pois o método é POST
xmlhttp.send(parametros);

E o script PHP pode ser assim:

Código:

<?php
echo "Olá, $_POST['nome'] $_POST['sNome']";
?>

Tá, e daí? Não vi diferença, os dois fizeram a mesma coisa com a mesma eficiência.
Não existe diferença aparente porque os parâmetros que eu passei foram curtos, mas se você quer pegar uma informação tal como um "texto" de um "TextArea", dependendo do tamanho desse texto, o texto pode chegar "cortado" no script PHP e você pode ter problemas com isso.

Você pode adaptar esse script para interagir com um formulário. Basta declarar as variáveis - com seus respectivos valores - no evento onclick do botão que enviaria o formulário e depois, usar o getElementById('ELEMENTO') para colocar o responseTexto nele.

E aqui, eu termino este tutorial.

Espero que tenham gostado.

Créditos:
Aulto