Cadastrando, Listando e Deletando com AJAX / ASP

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("");
}
%>

Grande abraço e até a próxima!

Arquivo ConteudoAJAX_ASP.zip

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by:

Cadastrando, Listando e Deletando com AJAX / ASP

Ted k

Ted k