« Modelos Matemáticos | Webservices com PHP5 e SOAP » |
PHP com Ajax
Agora que já criamos a página principal do nosso site, criaremos o arquivo com as instruções javascript responsáveis por enviar as requisições de conteúdo ao servidor. Na Listagem 2, encontra-se, o código fonte do arquivo ajax.js, devidamente comentado.
Listagem 2 – fonte arquivo ajax.js
Code
/* este método será o responsável por | |
criar o objeto XMLHttpRequest */ | |
function criaObjeto() | |
{ | |
/* variável que conterá o objeto */ | |
var obj; | |
| |
/* a criação do objeto depende do tipo de browser, | |
assim, vamos testar se é nativo ou ActiveX */ | |
if ( window.XMLHttpRequest ) | |
{ | |
obj = new XMLHttpRequest(); | |
} | |
else if (window.ActiveXObject) | |
{ | |
obj = new ActiveXObject("Microsoft.XMLHTTP"); | |
} | |
| |
return obj; | |
} | |
| |
/* criar o objeto */ | |
var http = criaObjeto(); | |
| |
/* esta é a função que será chamada em nossa página, | |
e é a responsável pelo envio da requisição ao servidor */ | |
function enviaRequisicao(acao) | |
{ | |
/* vamos mostrar uma mensagem */ | |
document.getElementById('status').innerHTML = 'Carregando...'; | |
| |
/* O método open atribui as informações como método a ser | |
utilizado (get/post), URL, entre outros parâmetros opcionais */ | |
http.open('get', acao); | |
| |
/* em caso de mudança no estado da requisição, indicamos | |
que deverá ser chamado o método processaResposta */ | |
http.onreadystatechange = processaResposta; | |
| |
/* envia a requisição, opcionalmente podemos passar | |
uma string ou objeto DOM como parâmetro */ | |
http.send(null); | |
} | |
| |
/* método responsável em processar a resposta */ | |
function processaResposta() | |
{ | |
/* 4 indica que foi completado */ | |
if ( http.readyState == 4 ) | |
{ | |
/* 200 indica sucesso, 404 não encontrado */ | |
if ( http.status == 200 ) | |
{ | |
/* a variável resposta receberá o retorno da requisição */ | |
var resposta = http.responseText; | |
| |
/* agora, inserimos o retorno na página */ | |
document.getElementById('conteudo').innerHTML = resposta; | |
/* se você quiser ver um alerta com o resultado, descomente a linha abaixo */ | |
/* alert(resposta); */ | |
document.getElementById('status').innerHTML = ''; | |
} | |
else | |
{ | |
/* em caso de erro, vamos alertar. */ | |
document.getElementById('status').innerHTML = 'Erro. Conteúdo não encontrado!'; | |
} | |
} | |
} | |
| |
/* este método será chamado pelo formulário no livro de visitas */ | |
function gravaLivro() | |
{ | |
/* Vamos ler os valores do formulário */ | |
var nome = document.getElementById('nome').value; | |
var msg = document.getElementById('msg').value; | |
| |
/* Agora vamos compor a ação a ser executada */ | |
var acao = 'livro.php?acao=gravar&nome='+nome+'&msg='+msg; | |
| |
document.getElementById('status').innerHTML = 'Gravando...'; | |
| |
/*Observe que, agora, definiremos a ação como sendo POST */ | |
http.open('post', acao); | |
| |
http.onreadystatechange = processaResposta; | |
| |
http.send(null); | |
} |
This entry was posted on 28 Sep 2007 at 11:20 by vilson and is filed under Programação, PHP, Ajax, Javascript.
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)