Introdução ao Ajax

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 19-10-2009

0

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.

Ajax
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 ;-)

Continue lendo...