Dificuldade com meu inicio no Ajax
Ae galera...
A um tempo atrás comecei a estudar a técnica do Ajax... mas por questões de trabalho tive q abandonar...
mas agora estou de volta tentando dominar o bixinho... rs
Pra começar estou criando algo bem simples... o usuário preenche o formulário e ele envia pra outra página q faz a gravação no banco de dados e quando estiver gravado eu dou uma mensagem pro usuário.
O exemplo é simples... nem precisaria de Ajax... mas é pra eu ir aprendendo aos poucos....
Aqui está o código completo da minha página, e mais abaixo o trecho de código onde o erro acontece:
<?
include 'funcoes.php';
ob_start();
session_start();
?>
<html>
<head>
<title>Micro Pinhal - Cadastro - Fase 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript"><!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_setTextOfLayer(objName,x,newText) { //v4.01
if ((obj=MM_findObj(objName))!=null) with (obj)
if (document.layers) {document.write(unescape(newText)); document.close();}
else innerHTML = unescape(newText);
}//-->
</script>
<script language="JavaScript" type="text/JavaScript"><!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_showHideLayers('LStatus','','hide')">
<div id="LStatus" style="position:absolute; left:515px; top:179px; width:240; height:40; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;">
<p align="center"> </p>
</div>
<style>
.caixa_texto{
font-family: Arial;
font-size: 11px;
color: #000000;
border-color: #333 #333333 #333333 #333;
border-style: solid;
border-width: 1px;
font-weight: lighter;
}
.botao{
font-family: Arial;
font-size: 11px;
color: #000000;
font-weight: normal;
background-color: #00CC66;
border: 2px solid #006600;
}
.LStatus_Centro {
position:absolute;
left:650px;
top:151px;
width:251px;
height:38px;
z-index:1;
background-color: #FF0000;
visibility: hidden;
background-position: center;
vertical-align: middle;
}
.style1 {
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
</style>
<!-- ------------------------- INICIOS - FUNÇÃO JAVA SCRIPT ---------------------------------//-->
<script language="JavaScript">
<!--
function envia(){
//VERIFICA OS CAMPOS OBRIGATÓRIOS
if(document.forms[0].nome.value == "") {
alert("Por favor, preencha o campo nome.");
document.forms[0].nome.focus();
} else if(document.forms[0].endereco.value == "") {
alert("Por favor, preencha o campo Endereço.");
document.forms[0].endereco.focus();
} else if(document.forms[0].bairro.value == "") {
alert("Por favor, preencha o campo Bairro.");
document.forms[0].bairro.focus();
} else if(document.forms[0].cep.value == "") {
alert("Por favor, preencha o campo CEP.");
document.forms[0].cep.focus();
} else if(document.forms[0].cidade.value == "") {
alert("Por favor, preencha o campo Cidade.");
document.forms[0].cidade.focus();
} else if(document.forms[0].estado.value == "") {
alert("Por favor, preencha o campo Estado.");
document.forms[0].estado.focus();
} else if(document.forms[0].telefone.value == "") {
alert("Por favor, preencha o campo Telefone.");
document.forms[0].telefone.focus();
} else if(document.forms[0].celular.value == "") {
alert("Por favor, preencha o campo Celular.");
document.forms[0].celular.focus();
} else if(document.forms[0].email.value == "") {
alert("Por favor, preencha o campo E-Mail.");
document.forms[0].email.focus();
} else if(document.forms[0].datanasc.value == "") {
alert("Por favor, preencha o campo Data de Nascimento.");
document.forms[0].datanasc.focus();
} else if(document.forms[0].nacionalidade.value == "") {
alert("Por favor, preencha o campo Nacionalidade.");
document.forms[0].nacionalidade.focus();
} else if(document.forms[0].naturalidade.value == "") {
alert("Por favor, preencha o campo Naturalidade.");
document.forms[0].naturalidade.focus();
} else if(document.forms[0].estado_civil.value == "") {
alert("Por favor, preencha o campo Estado Civil.");
document.forms[0].estado_civil.focus();
} else if(document.forms[0].disponibilidade.value == "") {
alert("Por favor, preencha o campo Disponibilidade para Funções.");
document.forms[0].disponibilidade.focus();
} else if(document.forms[0].salexigido.value == "") {
alert("Por favor, preencha o campo Salário Exigido.");
document.forms[0].salexigido.focus();
} else {
MM_showHideLayers('LStatus','','show');
var vnome = document.getElementById('nome').value;
var vendereco = document.getElementById('endereco').value;
var vbairro= document.getElementById('bairro').value;
var vcep= document.getElementById('cep').value;
var vcidade= document.getElementById('cidade').value;
var vestado= document.getElementById('estado').value;
var vtelefone= document.getElementById('telefone').value;
var vcelular= document.getElementById('celular').value;
var vemail= document.getElementById('email').value;
var vdatanasc= document.getElementById('datanasc').value;
var vnacionalidade = document.getElementById('nacionalidade').value;
var vnaturalidade = document.getElementById('naturalidade').value;
var vestado_civil = document.getElementById('estado_civil').value;
var vdisponibilidade = document.getElementById('disponibilidade').value;
var vsalexigido = document.getElementById('salexigido').value;
var vvoltar = document.getElementById('co_voltar').value;
var xmlHttp;
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", "be_gravar_cad01.php?nome="+vnome+"&endereco="+vendereco+"&bairro="+vbairro+"&cep="+vcep+"&cidade="+vcidade+"&estado="+vestado+"&telefone="+vtelefone+"&celular="+vcelular+"&email="+vemail+"&datanasc="+vdatanasc+"&nacionalidade="+vnacionalidade+"&naturalidade="+vnaturalidade+"&estado_civil="+vestado_civil+"&disponibilidade="+vdisponibilidade+"&salexigido="+vsalexigido+"&voltar="+vvoltar, true);
xmlHttp.onreadystatechange = callback();
xmlHttp.send(null);
function callback(){
if(xmlHttp.readyState == 1){
LStatus.style.top = document.body.scrollTop;
LStatus.style.left = (window.screen.availWidth-260);
MM_setTextOfLayer('LStatus','','<center><font face="arial" size=2><B>Gravando...<B></font></center>')
}
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert("Gravado com sucesso!");
} else if (xmlHttp.status == 404){
alert("Não encontrado");
}
} // IF readyState == 4
}//FUNCTION CALLBACK
} // FECHA IF DA VERIFICAÇÃO DE CAMPOS
} //FUNÇÃO ENVIA
//-->
</script>
<!-- ------------------------- FIM - FUNÇÃO JAVA SCRIPT ---------------------------------//-->
<p align="center"><img src="../imagens/be_banner.jpg" width="780" height="110" align="absmiddle"></p>
<?
//---------------------------------- INÍCIO DA CONEXÃO COM BANCO DE DADOS-----------------------------------------
//conexao com o banco
$conexao = mysql_connect(xxx,'xxx','xxx');
//seleciona o banco
$banco = mysql_select_db('micropinhal',$conexao);
//---------------------------------- FIM DA CONEXÃO COM BANCO DE DADOS-----------------------------------------
?>
<table width="780" border="0" align="center">
<tr>
<td height="733">
<p align="left"><font color="#0066FF" size="3" face="Arial Black"> CADASTRANDO - FASE 01</font><br>
<font color="#0066FF" size="3" face="Arial Black">Dados Pessoais</font></p>
<p><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Todos
os dados deste formulário são de preenchimento obrigatório.</strong></font>
<label></label>
</p>
<?
$voltar = $_GET['id'];
if(($voltar == "voltar") or ($voltar == "alterar")){
//SE O RESULTADO FOR VOLTAR É PORQUE VEIO DAS TELAS DE CADASTRO.
//SE O RESULTADO FOR ALTERAR É PORQUE VEIO DA TELA DE ALTERAÇÃO.
$preenche = 1;
$sql = mysql_query("SELECT * FROM be_candidatos_online WHERE codigo = '$_SESSION[cod_candidato]'");
$Valor = mysql_fetch_array($sql);
} else {
$preenche = 0;
}
?>
<form action= "be_gravar_cad01.php?id=<? echo($voltar) ?>" method="post">
<table width="600" border="0" align="center">
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Nome:</font></td>
<td>
<?
if ($preenche == 1) {
$valor_preenche = $Valor["nome"];
} else {
$valor_preenche = "";
}
?>
<input name="co_voltar" type="hidden" id="co_voltar" value="<? echo($voltar); ?>">
<input name="nome" type="text" class="caixa_texto" id="nome" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60"></td>
</tr>
<tr>
<td width="100" height="35"> <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Endereço:</font></p></td>
<td width="490">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["endereco"];
} else {
$valor_preenche = "";
}
?>
<input name="endereco" type="text" class="caixa_texto" id="endereco" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60"> </td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Bairro</font></td>
<td>
<?
if ($preenche == 1) {
$valor_preenche = $Valor["bairro"];
} else {
$valor_preenche = "";
}
?>
<input name="bairro" type="text" class="caixa_texto" id="bairro" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="50"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">CEP:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["cep"];
} else {
$valor_preenche = "13990-000";
}
?>
<input name="cep" type="text" id="cep" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="9" class="caixa_texto"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Cidade:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["cidade"];
} else {
$valor_preenche = "E. S. Pinhal";
}
?>
<input name="cidade" type="text" id="cidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="40" class="caixa_texto"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Estado:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["estado"];
} else {
$valor_preenche = "SP";
}
?>
<input name="estado" type="text" id="estado" value="<? echo("$valor_preenche"); ?>" size="4" maxlength="2" class="caixa_texto"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Telefone:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["telefone"];
} else {
$valor_preenche = "";
}
?>
<input name="telefone" type="text" class="caixa_texto" id="telefone" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="14"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Celular:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["celular"];
} else {
$valor_preenche = "";
}
?>
<input name="celular" type="text" class="caixa_texto" id="celular" value="<? echo("$valor_preenche"); ?>" size="18" maxlength="14"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">E-Mail:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["email"];
} else {
$valor_preenche = "";
}
?>
<input name="email" type="text" class="caixa_texto" id="email" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="50"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Data
de Nascimento:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = conv_data_brasil($Valor["datanasc"]);
} else {
$valor_preenche = "";
}
?>
<input name="datanasc" type="text" class="caixa_texto" id="datanasc" value="<? echo("$valor_preenche"); ?>" size="20" maxlength="10">
<font size="1" face="Verdana, Arial, Helvetica, sans-serif">Ex:
27/08/1984</font></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Nacionalidade:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["nacionalidade"];
} else {
$valor_preenche = "Brasileiro(a)";
}
?>
<input name="nacionalidade" type="text" id="nacionalidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="40" class="caixa_texto"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Natural
de:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["naturalidade"];
} else {
$valor_preenche = "E. S. Pinhal";
}
?>
<input name="naturalidade" type="text" id="naturalidade" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="30" class="caixa_texto"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Estado
Civil :</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["estado_civil"];
} else {
$valor_preenche = "";
}
?>
<input name="estado_civil" type="text" class="caixa_texto" id="estado_civil" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="30"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Disponibilidade
para funções:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["disponibilidade"];
} else {
$valor_preenche = "";
}
?>
<input name="disponibilidade" type="text" class="caixa_texto" id="disponibilidade" value="<? echo("$valor_preenche"); ?>" size="100" maxlength="60"></td>
</tr>
<tr>
<td height="35"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Salário
Exigido:</font></td>
<td height="35">
<?
if ($preenche == 1) {
$valor_preenche = $Valor["sal_exigido"];
} else {
$valor_preenche = "";
}
?>
<input name="salexigido" type="text" class="caixa_texto" id="salexigido" value="<? echo("$valor_preenche"); ?>" size="50" maxlength="25"></td>
</tr>
</table>
</form>
<p align="center"><font color="#0066FF" size="3" face="Arial Black">
<input type="submit" name="Submit" value=" Gravar " class="botao" onClick="envia();">
</font></p></td>
</tr>
</table>
<p> </p>
</body>
</html>
<?
ob_end_flush();
?>O meu problema está aqui:
function callback(){
if(xmlHttp.readyState == 1){
LStatus.style.top = document.body.scrollTop;
LStatus.style.left = (window.screen.availWidth-260);
MM_setTextOfLayer('LStatus','','<center><font face="arial" size=2><B>Gravando...<B></font></center>')
}
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert("Gravado com sucesso!");
} else if (xmlHttp.status == 404){
alert("Não encontrado");
}
} // IF readyState == 4
}//FUNCTION CALLBACK
Ele faz legal o if(xmlHttp.readyState == 1)....
mas quando faz o if(xmlHttp.readyState == 4)... ele dá erro com a mensagem de "Tipos Incompativeis"...
Não consigo entender onde errei...
se alguém puder me dar um help por favor?!?!!?
Discussão (1)
Carregando comentários...