Uma dica rápida mas muito útil para enviar formulários HTML através de AJAX.
São três arquivos:
* script.js: contém o javascript necessário para enviar o formulário;
* form.php: contém o código HTML do formulário;
* processar.php: processa o conteúdo recebido;
Note que no arquivo processar.php, o método de recebimento é GET, porém o AJAX envia através de POST, por isso, ao enviar, não aparecem os campos enviados na barra de endereços do navegador.
script.js
var navegador = navigator.userAgent.toLowerCase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador
//Cria uma variável global chamada 'xmlhttp'
var xmlhttp;
//Função que inicia o objeto XMLHttpRequest
function objetoXML() {
if (navegador.indexOf('msie') != -1) { //Internet Explorer
var controle = (navegador.indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'
try {
xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE
} catch (e) { }
} else { //Firefox, Safari, Mozilla
xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla
}
}
//Função que envia o formulário
function enviarForm(url, campos, destino) {
//Atribui à variável 'elemento' o elemento que irá receber a página postada
var elemento = document.getElementById(destino);
//Executa a função objetoXML()
objetoXML();
//Se o objeto de 'xmlhttp' não estiver true
if (!xmlhttp) {
//Insere no 'elemento' o texto atribuído
elemento.innerHTML = 'Impossível iniciar o objeto XMLHttpRequest.';
return;
} else {
//Insere no 'elemento' o texto atribuído
elemento.innerHTML = 'Carregando...';
}
xmlhttp.onreadystatechange = function () {
//Se a requisição estiver completada
if (xmlhttp.readyState == 4 || xmlhttp.readyState == 0) {
//Se o status da requisição estiver OK
if (xmlhttp.status == 200) {
//Insere no 'elemento' a página postada
elemento.innerHTML = xmlhttp.responseText;
} else {
//Insere no 'elemento' o texto atribuído
elemento.innerHMTL = 'Página não encontrada!';
}
}
}
//Abre a página que receberá os campos do formulário
xmlhttp.open('POST', url+'?'+campos, true);
//Envia o formulário com dados da variável 'campos' (passado por parâmetro)
xmlhttp.send(campos);
}
form.php
<html>
<head>
<title>Enviando formulário com AJAX</title>
<!-- Carrega o arquivo 'script.js' ao iniciar a página! //-->
<script language="javascript" src="script.js" type="text/javascript"></script>
</head>
<body>
<table cellpadding="2" cellspacing="0" width="50%">
<form action="processar.php" method="post" onsubmit="setarCampos(); enviarForm('processar.php', campos, 'mensagem'); return false;">
<tr><td>Nome</td><td><input name="nome" id="nome" type="text"></td></tr>
<tr><td>Email</td><td><input name="email" id="email" type="text"></td></tr>
<tr><td></td><td><input type="submit" value="Enviar"> <input type="reset" value="Limpar"></td></tr>
</form>
</table>
<div id="mensagem"/>
<script>
//Cria a função com os campos para envio via parâmetro
function setarCampos() {
campos = "nome="+encodeURI(document.getElementById('nome').value).
toUpperCase()+"&email="+encodeURI(document.getElementById('email').value);
}
</script>
</body>
</htm>
processar.php
<?php
//Determina o tipo da codificação da página
header("content-type: text/html; charset=iso-8859-1");
//Extrai os dados do formulário
extract($_GET);
//Verifica se algum nome foi digitado
$nome = ($nome != "") ? $nome : "desconhecido";
//Verifica se algum email foi digitado
$email = ($email != "") ? $email : "desconhecido";
//Retorna com a resposta
echo "Olá <b>".$nome."</b>, seu email é: <a href='mailto:".$email."'><b>".$email."</b></a>";
?>
FONTE: http://codigofonte.uol.com.br/codigo/js-dhtml/formulario/enviar-formulario-com-ajax-usando-php
