Cadastrando
Primeiro temos que ter o XML pronto, como um Banco de Dados com suas “Colunas” já estruturadas. Adicionei três tags a ele e uma principal, as tags são nome, email e telefone, junto com a tag usuario, que fecha o registro e junto com a tag cadastro que chega o “pacote”.
Leia Mais em: Debugando.com
Esse artigo não é para entrar em detalhes sobre AJAX, e sim para descrever sua interação com ASP. Desenvolvi um código usando ASP com base de linguagem o JavaScript (onde poderia usar o VBScript), usei claramente AJAX e o banco de dados MySQL, que não é o objetivo, e nem será, evidenciado abaixo.
Bom, primeiramente vamos começar a fazer nossa página AJAX com todas as funções necessárias para a nossa aplicação. Começamos com um bloco de código necessário para toda aplicação que envolve o AJAX, que é reconhecer se o browser (sendo um Objeto específico para o IE e outro para os demais browsers) suporta AJAX ou não:
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;
}
Finalizando a construção do nosso código para verificar o browser, vamos agora criar um código para CADASTRAMENTO, usando a variável criada “xmlHttp”:
function CadastrarDados() {
var Nome = document.getElementById(“Nome”);
var EMail = document.getElementById(“EMail”);
var URL = “Cadastro.asp?Cadastrar=Ok&Nome=”+Nome.value+”&EMail=”+EMail.value+”";
Enviar.open(“GET”, URL, true);
Enviar.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
document.getElementById(“Resposta”).innerHTML = “Cadastrado com Sucesso!!!”;
Nome.value = “”;
EMail.value = “”;
Enviar.send(null);
Enviar.onload = lerTexto;
}
Pegamos via DOM os objetos de formulário de nome e e-mail que ainda serão criados. Criamos uma variável “URL” para o envio via GET dos arquivos para a página “Cadastro.asp”, seguida da querystring “Cadastrar=Ok” que receberá os campos. Em seguida temos a ação com o objeto “open”, mandando a resposta para a div “Resposta”. Para finalizar, limpamos os campos para nada guardar – evitando assim a duplicagem – e o usuário saberá que foi cadastrado:
Com bloco abaixo vamos apresentar e deletar o registro:
// Início – Carregar Página
function lerTexto() {
var URLler = “Ler.asp”;
Enviar.onreadystatechange = stateChanged;
Enviar.open(“GET”, URLler, true);
Enviar.send(null);
}
function stateChanged() {
if (Enviar.readyState==4) {
document.getElementById(“ler_Dados”).innerHTML = Enviar.responseText;
}
}
window.onload = lerTexto;
// Final – Carregar Página
// Início – Deletar
function apagar(id, rowIndex) {
if (confirm(´Tem certeza que deseja excluir este registro?´)) {
document.getElementById(“tabela”).deleteRow(rowIndex);
Enviar.open(“POST”,´Cadastro.asp?Deletar=Ok&id=´+ id, false);
Enviar.send(null);
}
}
// Final – Deletar
Com a simples linha Enviar.open(“GET”, URLler, true), carregamos a página “Ler.asp”, que estará no arquivo .zip no final do artigo para ler as informações do banco.
O deletar segue a mesma idéia do Cadastrar, mas utilizamos o método POST para isso, e passando a ID do registro.
E por final, a prática, criando “Cadastro.asp” com todas as funcionalidades necessárias, e o AJAX é claro, que acessa as ID´s das tags HTML´s
<%@ Language=”JavaScript” %>
<%
var Conexao;
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=banco; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Cadastrar</title>
<script language=”javascript” src=”ajaxCarregar.js”></script>
</head>
<body>
<div id=”Resposta”></div><br>
<form id=”Form”>
Nome: <input type=”text” id=”Nome” name=”Nome” value=”"><br>
E-Mail: <input type=”text” id=”EMail” name=”EMail” value=”"><br>
<input type=”button” id=”Cadastrar” value=”Cadastrar” name=”Cadastrar” onClick=”CadastrarDados();”>
</form><br>
<br>
<br>
<div id=”ler_Dados”></div>
</body>
</html>
<%
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (´”+Request.QueryString(“Nome”)+”´, ´”+Request.QueryString(“EMail”)+”´)”);
Response.Write(“”);
}
if (Request.QueryString(“Deletar”) == “Ok”) {
Conexao.Execute(“Delete From Teste Where Codigo = ´”+Request.QueryString(“id”)+”´”);
Response.Write(“”);
}
%>
