O problema que o Ajax tenta resolver está enraizado no protocolo de comunicação HTTP. Isso porque esse protocolo é sem estado (stateless), assim o controle das ações executadas na aplicação cliente é controlado pelo código no servidor web. Ou seja, as alterações (ou entrada de dados) executadas na página web pelo usuário são enviadas para o servidor para que este atualize seu estado, e o servidor responde a alteração reenviado todo o HTML para o browser.
Mas o que é o Ajax?
Ajax é o acrônimo (da língua inglesa) de Asynchronous Javascript and XML, ele não é uma linguagem de programação e sim a combinação de tecnologias existentes (Javascript, XML e XmlHttpRequest) que nos permite realizar solicitações assíncronas ao servidor para busca de informações e/ou atualizar seu estado.
Em outras palavras o Ajax, é um objeto presente nos browser atuais que combinado com JavaScript pode se comunicar com o servidor Web sem recarregar e redesenhar a página inteira.
Utilizando do Ajax
O exemplo abaixo apresenta uma página chamada calcProduto.html, onde o usuário escolhe o tipo de produto e informa a quantidade de produto que gostaria de adquir. Ao clicar no botão calcular, é realizado via ajax uma requisição ao servidor web (arquivo calcProduto.php) que realiza o calculo necessário e sua reposta é renderizada sem recarregar a página html.
Abaixo o código do arquivo calcProduto.html:
<html> <head> <title>Produto</title> <script language="javascript" type="text/javascript"> var request = null; // função que cria objeto de requisição function createRequest () { try { // cria objeto XmlHttpRequest para os browser Firefox, Safari, Opera request = new XMLHttpRequest(); } catch( trymicrosoft ) { try { // cria objeto XmlHttpRequest para o browser IE request = new ActiveXObject( "Msxm12.XMLHTTP" ); } catch( othermicrosoft ) { try{ // cria objeto XmlHttpRequest para o browser IE request = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch( failed ) { request = null; } } } if ( request == null ) { alert( "Erro ao criar objeto Request!" ); } } // função que executa chamada ao servidor para realizar o calculo function getPrice () { createRequest (); var prod = document.getElementById( "produto").value; var qtd = document.getElementById( "quantidade").value; var url = "calcProduto.php?produto=" + prod + "&quantidade=" + qtd; request.open( "GET", url, true ); request.onreadystatechange = updatePage; // define função a ser chamada a obter resposta do servidor web request.send( null ); // null informa que não está sendo enviado nenhum dado na requisição } // função chamada ao obter retorno da requisição e atualiza interface function updatePage () { if( request.readyState == 4 ) { if( request.status == 200 ){ var resultado = document.getElementById( "resultado" ); resultado.innerHTML = request.responseText; } else{ alert( "Erro: não foi possível obter resposta do servidor." ); } } } </script> </head> <body> <h1>Calculo de produto</h1> <p> Escolha um produto e informe a quantidade.</p> <form method="GET" action="calcProduto.php"> <p> Produto: <select name="produto" id="produto"> <option value="0">Caneta</option> <option value="1">Borracha</option> <option value="2">Giz</option> <option value="3">Apagador</option> </select> </p>htm <p> Quantidade <input type="text" name="quantidade" id="quantidade"></p> <p><input type="button" value="Calcular" onClick="getPrice();"></p> </form> <div id="resultado"> </div> </body> </html>
O código utilizado no servidor web:
<?php $produto = $_REQUEST['produto']; $qtd = $_REQUEST['quantidade']; $prodName = ''; $vlr = ''; switch($produto){ case "0": $prodName = 'Caneta'; $vlr = 1; break; case '1': $prodName = 'Borracha'; $vlr = 2; break; case '2': $prodName = 'Giz'; $vlr = 3; break; case '3': $prodName = 'Apagador'; $vlr = 4; break; } $total = $qtd * $vlr; ?> <h3>Calculo:</h3> <table border=1 > <tr> <td>Produto</td> <td>Quantida</td> <td>Valor unidade</td> <td>Total</td> </tr> <tr> <td><?php print $prodName ?></td> <td><?php print $qtd ?></td> <td><?php echo "R$ " .number_format($vlr, 2, ',', '.'); ?></td> <td><?php echo "R$ " .number_format($total, 2, ',', '.'); ?></td> </tr> </table>
Futuramente falarei um pouco mais sobre o componente XmlHttpRequest e seus recursos.
Enjoy 
