Publicado em 12 de dez.

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>

<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>

<?
//---------------------------------- 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)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...