Aula 5 Cic Twii

Prof.
Erwin Alexander Uhlmann 2/8/2010
AULA 5
Biblioteca Ajax!
xmlhttprequest.js
var ajax;
var dadosUsuario;
//Cria o objeto e faz a requisição
function requisicaoHTTP(tipo, url, assinc){
if(window.XMLHttpRequest){ //Mozilla, Opera, Safari....
ajax = new XMLHttpRequest();
}
else if(window.ActiveXObject){ //IE
ajax = new ActiveXObject("Msxml2.XMLHTTP");
if(!ajax){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(ajax) //iniciou com sucesso!
iniciaRequisicao(tipo,url,assinc);
else
alert("Essa porcaria velha de navegador não suporta XML,
Ajax ou qualquer coisa interessante. Arrume outro!");
}
//Inicia o objeto criado e envia os dados
function iniciaRequisicao(tipo,url,bool){
ajax.onreadystatechange = trataResposta;
ajax.open(tipo,url,bool);
ajax.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded; charset=UTF-8");//pode ser também iso-8859-1
//ajax.averrideMimeType("text/XML"); /*somente para o Mozilla*/
ajax.send(dadosUsuario);
}
//Inicia requisicao com envio de dados
function enviaDados(url){
criaQueryString();
requisicaoHTTP("POST",url,true);
}
//Cria string a ser enviada
function criaQueryString(){
dadosUsuario="";
var frm = document.forms[0];
var numElementos = frm.elements.lenght;
for(var i = 0; i < numElementos; i++){
if(i < numElementos-1){
dadosUsuario +=frm.elements[i].name+"=" +
encodeURIComponent(frm.elements[i].value)+"&";
}
}
}
//Trata a resposta do servidor
function trataResposta(){
if(ajax.readyState == 4){
if(ajax.status == 200){
trataDados(); //cria a função no seu programa
}else{
alert("Oh, Oh...Problemas de comnunicação com o
objeto XMLHttpRequest...");
}
}
18
Prof. Erwin Alexander Uhlmann 2/8/2010
Explicando.
A função criada requisicaoHTTP(tipo, url, assinc) serve para criar a

instância do XMLHttpRequest e passa os dados fornecidos pelo usuário.
A função iniciaRequisicao recebe os dados recebe os dados da função

requisicaoHTTP para tratar a resposta do servidor.
O comando onreadystatechange define a função que irá manipular os

eventos, ou seja, que será ativada a cada mudança de estado do Ajax.
O comando trataResposta verifica se a requisição foi concluída e inicia o

tratamento dos dados.
A função enviaDados faz uma requisição definindo antes os dados a serem

enviados, que, no caso, são obtidos de um formulário HTML.
O comando criaQueryString coloca os dados do formulário no formato de

uma queryString, para que o servidor possa identificar os pares nome/valor.
Agora vamos criar um sistema de consulta de preços. Para tanto, serão

criados 3 arquivos independentes, consulta.html, consulta.js e consulta.php.
consulta.html
<html>
<head>
<title>Tecnologia Web II - Consulta com Ajax</title>
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="consulta.js"></script>
</head>
<body>
<h1>Consulta com Ajax</h1>
<form action="javascript:void%200"
onsubmit="obtemPreco(this.codigo.value); return false">
<p>Digite o código do produto:
<input name="codigo" type="text" id="codigo" size="5"
maxlength="5">
<span id="precoProduto"></span></p>
<p><input type="submit" name="Consultar" value="Consultar"
/></p>
</form>
</body>
</html>
consulta.js
function obtemPreco(cod){
if(cod){
var url="consulta.php?cod="+cod;
requisicaoHTTP("GET", url, true);
}
}
function trataDados(){
19
Prof. Erwin Alexander Uhlmann 2/8/2010
var preco = ajax.responseText; //Obter a resposta como

string
if(preco == "0.00")
var info = "Precço não encontrado!";
else
var info = "O preço é R$"+preco;
document.getElementById("precoProduto").style.backgroundColor="#
FFFF00";
document.getElementById("precoProduto").innerHTML=info;
}
consulta.php
<?php
$gmtDate = gmdate("D, d M Y H:i:s");
header("Expires: {$gmtDate} GMT");
header("Last-Modified: {$gmtDate} GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
// array de preços
$produtos = array (
"p1" => "29.90",
"p2" => "35.00",
"p3" => "40.50",
"p4" => "50.90",
"p5" => "120.00"
);
$codigo = $_GET["cod"];
if(isset($produtos[$codigo]))
echo $produtos[$codigo];
else
echo "0.00";
?>
20

Aula 5 Cic Twii

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 5 Cic Twii

Enviado por

Direitos autorais:

Formatos disponíveis

Prof.

Erwin Alexander Uhlmann 2/8/2010

A função criada requisicaoHTTP(tipo, url, assinc) serve para criar a

A função iniciaRequisicao recebe os dados recebe os dados da função

O comando onreadystatechange define a função que irá manipular os

O comando trataResposta verifica se a requisição foi concluída e inicia o

A função enviaDados faz uma requisição definindo antes os dados a serem

O comando criaQueryString coloca os dados do formulário no formato de

Agora vamos criar um sistema de consulta de preços. Para tanto, serão

var preco = ajax.responseText; //Obter a resposta como

Você também pode gostar