Tutorial introdutório simples de Ajax+PHP

Consistindo em HTML, tecnologia JavaScript™, DHTML e DOM, o Ajax é uma maneira brilhante de transformar interfaces Web complicadas em aplicativos Ajax interativos. Para Ajax, o objeto principal é XMLHttpRequest e todas as operações Ajax são inseparáveis ​​da operação deste objeto.

Primeiro vamos entender como criar esse objeto em javascript:

varxmlHttp=newXMLHttpRequest();
Esta linha simples de código cria um objeto XMLHttpRequest no Mozilla, Firefox, Safari, Opera e basicamente em qualquer navegador que não seja da Microsoft que suporte Ajax de qualquer forma ou estilo. Mas para o IE, que tem uma participação de mercado de 70%, esse método não é possível, e diferentes versões do IE têm diferentes métodos de criação, então precisamos usar os dois métodos a seguir para criar objetos no IE:

try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Para navegadores mais recentes
}pegar(errar){
tentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Para navegadores mais antigos
}catch(err2){
xmlHttp=falso;
}
}
Mesmo assim, não podemos prever que alguns navegadores possam não conseguir criar este objeto, portanto, caso a criação não seja bem-sucedida, temos que adicionar uma frase:

if(!xmlHttp){
alert("Não é possível criar o objeto XMLHttpRequest!");
}
A combinação é:

varxmlHttp=false;
tentar{
xmlHttp=newXMLHttpRequest();
}catch(tentemicrosoft){
tentar{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(outromicrosoft){
tentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}pegar(falhou){
xmlHttp=falso;
}
}
}
if(!xmlHttp){
alert("Não é possível criar o objeto XMLHttpRequest!");
}
Então, vamos criar uma função getInfo() para habilitar solicitações assíncronas:

functiongetInfo(){
varnum=document.getElementById("num").value;//Obtém os dados do formulário
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true aqui representa uma solicitação assíncrona
}
Uma vez configurado com open(), você pode enviar solicitações. Embora você possa enviar dados usando send(), você também pode enviar dados através do próprio URL. Na verdade, na maioria das solicitações GET, é muito mais fácil enviar dados usando a URL, então basta usar null como parâmetro de send() aqui. O arquivo php no endereço url é o arquivo php solicitado para processar os dados necessários, assim como quando normalmente usamos PHP. Vários parâmetros podem ser adicionados e separados por &.
xmlHttp.send(nulo);
Após o envio dos dados, precisamos utilizar o método callback para obter o status do servidor, para isso é utilizado o atributo onreadystatechange.
xmlHttp.onreadystatechange=updatePage;
Esta instrução deve ser colocada antes da instrução send() para que seja eficaz. A updatePage subsequente é uma função que processa as informações retornadas. O getInfo() completo é o seguinte:
funçãogetInfo(){
varnum=document.getElementById("num").value;//Obtém os dados do formulário
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true aqui representa uma solicitação assíncrona
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(nulo);
}
Também precisamos acionar esta função em html:
<inputname="num"id="num"onblur="getInfo()"type="text"/>
Em seguida, precisamos escrever a função updatePage():

functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("cidade").value=response;
}
}
O readyState no código acima é um status retornado pelo servidor. Este status 4 indica que a solicitação foi enviada e processada. responseText é obter as informações retornadas pelo servidor e depois atribuí-las ao formulário com ID cidade através de javascript.
Neste ponto, um programa Ajax simples é concluído. O código javascript completo é o seguinte:

varxmlHttp=false;
tentar{
xmlHttp=newXMLHttpRequest();
}catch(tentemicrosoft){
tentar{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(outromicrosoft){
tentar{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}pegar(falhou){
xmlHttp=falso;
}
}
}
if(!xmlHttp){
alert("Não é possível criar o objeto XMLHttpRequest!");
}

funçãogetInfo(){
varnum=document.getElementById("num").value;//Obtém os dados do formulário
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true aqui representa uma solicitação assíncrona
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(nulo);
}

functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("cidade").value=response;
}
}
Ainda falta um arquivo php aqui. Como o método de processamento é diferente e o método de escrita é diferente, e esta não é a parte principal do Ajax, o código não será incluído aqui. Basta lembrar que o PHP gera e retorna os dados necessários.

Faz muito tempo que não é atualizado. Vi este tutorial hoje e é muito adequado para iniciantes.