Cadastrando, Listando e Deletando com AJAX / ASP

Ted k' · Agosto 19, 2008

Código bem simples e útil para a galera que gosta de usar AJAX e não tem muita referência!

Página para carregar o AJAX, funcionalidades:

ajaxCarregar.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;   
}   
  
var Enviar = GetXMLHttp();   
  
// Início - Cadastro   
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;   
}   
// Final - Cadastro   
  
// 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   
  
// 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

ler.asp

<%@ 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;   
%>  
<table width="407" border="1" cellspacing="0" cellpadding="0" id="tabela">  
  <tr>  
    <td width="164"><strong>NOME</strong></td>  
    <td width="159"><strong>EMAIL</strong></td>  
    <td width="76"><strong>Acionar</strong></td>  
  </tr>  
  <%   
  var rs = Conexao.Execute("Select * From Teste");   
  if (rs == null) {   
    Response.Write("NADA");   
  }   
  else {   
  while (!rs.EOF) {   
  %>  
  <tr>  
    <td><%=rs("Nome")%></td>  
    <td><%=rs("EMail")%></td>  
    <td><a href="#" onClick="apagar('<%=rs("Codigo")%>', this.parentNode.parentNode.rowIndex);">deletar</a></td>  
  </tr>  
  <%   
  rs.MoveNext();   
  }   
  }   
  %>  
</table>

Cadastro.asp

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

<%@ 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("");
}
%>
Deixe seu Comentário

Editado Agosto 19, 2008 por bareta
*/ sem comentários /* BARETA

bareta · Agosto 19, 2008

sua iniciativa é muito boa, mais o que descaracteriza sua ajuda é o link abaixo do meio código

se quiser ler o resto visite meu blog... se for postar pela metade não o faça.

Entrar

Cadastrando, Listando e Deletando com AJAX / ASP

Pergunta

Ted k'

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

bareta

Link para o comentário

Compartilhar em outros sites

Estatísticas dos Fóruns

Navegação

Atividades