Pizzaria - envio de texto simples e recebimento de resposta

<< Click to Display Table of Contents >>

Navigation:  Ajax >

Pizzaria - envio de texto simples e recebimento de resposta

Previous pageReturn to chapter overviewNext page

Digita-se um telefone, (1-3), ao sair do campo, enquanto se digita o "pedido" da pizza, o servidor responde de forma assíncrona no campo endereço.

 

Tela

 

ajax6

 

Html

 

<html>

<head>

    <title>teste</title>

    <script type="text/javascript">

        request = null;

 

        function createRequest() {

            try {

                request = new XMLHttpRequest();

            } catch (trymicrosoft) {

                try {

                    request = new ActiveXObject("Msxml2.XMLHTTP");

                } catch (othermicrosoft) {

                    try {

                        request = new ActiveXObject("Microsoft.XMLHTTP");

                    } catch (failed) {

                        request = null;

                    }

                }

            }

            if (request == null)

                alert("Error creating request object!");

        }

 

        function getInfoCliente() {

            createRequest();

            var parametros = document.getElementById('edFone').value;

            // caminho para a pagina na web que retorna a data e hora local (não coloque www.caminho.com/a.aspx a menos que esteja rodando o test.html também na web)

            var url = "consulta.aspx?fone=" + parametros;

 

            request.open("GET", url, true);

            request.onreadystatechange = updatePage;

            request.send(null);

        }

 

        function updatePage() {

            if (request.readyState == 4) {

                if (request.status == 200) {

                    var ed = document.getElementById("edEndereco");

                    ed.value = request.responseText;

                }

                else {

                    alert("erro do servidor: " + request.status);

                }

            }

        }

    </script>

</head>

 

<body>

    <form onload="document.forms[0].reset();">  <!-- pra que ? -->

        <p>

            Telefone:

            <input type="text" size="14" name="edFone" id="edFone" onchange="getInfoCliente();" />

        </p>

        <p>Pedido:</p>

        <p>

            <textarea name="edPedido" rows="6" cols="50"></textarea>

        </p>

        <p>Endereço:</p>

        <p>

            <textarea name="edEndereco" id="edEndereco" rows="4" cols="50"></textarea>

        </p>

        <p>

            <input type="submit" value="Pedir" />

        </p>

    </form>

</body>

</html>

 

consulta.aspx.cs

 

using System;

 

namespace WebApplication2

{

    public partial class consulta : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            Response.Expires = -1; // Requerido para manter a pagina no cache do navegador

            Response.ContentType = "text/plain";

 

            int i = int.Parse(Request.QueryString["fone"].ToString());

            string ret = "?";

 

            switch (i)

            {

                case 1: ret = "Campos Sales, 433\nApto 202\nMichel";

                    break;

                case 2: ret = "Gilio Burigo, 1446\nAna Maria";

                    break;

                case 3: ret = "Henrique Lages, 205\nApto 2\nCentro";

                    break;

            }

 

            Response.Write(ret);

            Response.End();

        }

    }

}