Desenvolvimento - PHP

Cadastro em PHP com AJAX + DOM

Aprenda como utilizar a tecnologia AJAX em sua aplicação, dando a ela uma dinâmica com DOM (Document Object Model), sem auxilio de Framework.

por André Andrade Gomes


Aprenda como utilizar a tecnologia AJAX em sua aplicação, dando a ela uma dinâmica com DOM (Document Object Model), sem auxilio de framework.

Primeiro Passo:

Criação do bd_cliente no mysql. 

CREATE DATABASE db_cliente;

Crie a tabela clientes. 

CREATE TABLE clientes(
"id_cliente" int(4) not null auto_increment primary key,
"nome_cliente" varchar(30) not null,
"senha" varchar(10) not null
) ;

Segundo Passo:

Crie um script em javascript que instancie um objeto. 

ajax.js
---------------------------------------------------------------------------------------------
function getXmlHttp() {
var xmlhttp;
try{
 xmlhttp = new XMLHttpRequest();
}catch(ee){
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
    xmlhttp = false;
  }
 }
}
return xmlhttp;
}

Terceiro Passo:

Crie o arquivo html de cadastro 

Cadastro.html
<html>
<head>
 <script language="javascript" src="ajax.js"></script>
<style>
<!--
body{
  background:#f7f7ff;
}

#geral{
  font:bold 12px trebuchet MS:
  color:blue;
  position:absolute;
  top:155px;
  left:220px;
}

p{
  text-align:center;
  font:bold 15px verdana,arial;
  color:red;
  position:absolute;
  top:200px;
  left:200px;
}

legend{
  font:bold 12px trebuchet MS;
  color:#193935;
  text-transform:uppercase;
}
-->
</style>
</head>

<body>

<div id="geral">

 <fieldset style="width:300px">
  <legend> Cadastro com ajax </legend>

   <form id="frm">
    <center>

     Apelido: <input type="text" name="nome" id="nome"><br>
     Senha:    <input type="text" name="senha" id="senha"><br>
     <input type="button" value="cadastrar" onclick="cadastra();">

    </center>
   </form>

 </fieldset>

</div>

<script>

var request = getXmlHttp();

function cadastra(){
  var nm = document.getElementById("nome").value;
  var se = document.getElementById("senha").value;
  var url= "cadastra.php?nome="+nm+"&senha="+se;
  request.open("GET", url, true);
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.onreadystatechange = confirma;
  request.send(null);
}

function confirma(){

  if(request.readyState == 4){
    var response = request.responseText;
    var divmain = document.getElementById("geral");
    var formid = document.getElementById("frm");
    var pelement = document.createElement("p");
    var text = document.createTextNode("Parabéns " + response + ", Cadastro Concluido!");
    pelement.appendChild(text);
    divmain.replaceNode(pelement,frm);

    var ael = document.createElement("a");
    var pula = document.createElement("<br>");
    var textlink = document.createTextNode("voltar");
    
    ael.appendChild(textlink); 
    ael.setAttribute("href","Cadastro.html");
    pelement.appendChild(pula); 
    pelement.appendChild(ael); 
   }
  }

</script>

</body>
</html>

Quinto Passo:

Crie o arquivo necessário para incluir os dados no bd. 

Cadastra.php
<?php
Include "conexao.php";

$nm = addslashes(trim($_POST["nome"]));
$se = addslashes(trim($_POST["senha"]));
$sql = "INSERT INTO clientes(nome_cliente, senha) VALUES("$nm","$se")";
$rs = mysql_query($sql, $conn);
If(!$rs)
Echo "Não foi possivel realizar seu cadastro!";
Else
Echo $nm;

Mysql_close();
?>

Sexto Passo:

Crie o Arquivo de Conexão para finalizar 

Conexao.php
<?php
$conn = mysql_connect("localhost","usuario","senha");
Mysql_select_db("bd_cliente",$conn);
?>

Entendendo a Aplicação:

Quando o usuário insere seus dados e depois clica em cadastrar, a aplicação pede uma requisição assíncrona com o servidor que cadastra os dados no banco e devolve os dados.

Na página de cadastro, a div do formulário é alterada pela div de retorno da requisição com o metodo replaceNode, ou seja alteração de pai (seu pai não será mais o [form] e sim a div [p]).

Simples mas útil.

André Andrade Gomes

André Andrade Gomes