• 0
Sign in to follow this  
halakaluf

Operações Básicas Com Ajax

Question

Salve programadores,

Ai como eu sempre vejo o pessoal falando o que é o AJAX, e para que ele serve, mas nunca vi ninguém mostrando como funciona para quem quer aprender.

Então ta ai: fiz uma pagina com AJAX com as operações básicas INSER, UPDATE, SELECT, DELETE. Tentei deixar ela o mais simples possível, mas como o AJAX por si só e uma mistura de três tecnologias, não tem como ficar muito simples.

Os requisitos básicos para se compreender esse código são;

JAVASCRIPT(AVANÇADO)

ASP(BASICO)

XML(CONCEITO)

Veja como ficou

O programa consiste em 3 paginas:

principal.asp ==> é a pagina principal

appajax.asp ==> é a pagina onde se encontra todo codigo asp de manipulação do banco

ajax_js.js ==> essa é a pagina que esta todo o codigo javascript

Vamos pro codigo que aqui vocês se entendem...

principal.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX</title>
<script language="javascript" src="ajax_js.js"></script>
<link href="./estilo.css" rel="stylesheet" type="text/css" />	
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>

<body>

<table border="0" cellSpacing=0 cellPadding=0 width="500px" align="center">
  <tr>
    <td><img src="imagen/esq_cima.jpg" width="70" height="70" /></td>
    <td background="imagen/cima.jpg" height="70px">&nbsp;</td>
    <td><img src="imagen/dir_cima.jpg" width="70" height="70" /></td>
  </tr>
  <tr>
    <td width="0" align="middle"  background="imagen/m_esq.jpg">&nbsp;</td>
    <td>  


<div id="menu">
<ul ord="1">
  <li><a href="javascript: inserir();">Incluir</a></li>
</ul>

<ul>
	<li><a href="javascript: sel_filtro();">Alterar</a></li>
</ul>

<ul>
  <li><a href="javascript: selecao();">Listar</a></li>
</ul>      	
<ul>
  <li><a href="javascript: deletar();">Deletar</a></li>
</ul>      	

</div>
<p>&nbsp;</p>
<table width="400" border="0" cellpadding="3" cellspacing="2">
  <tr>
    <td colspan="2" >&nbsp;</td>
  </tr>
    <tr>
    <td colspan="2" ><div id="corpo" ></div></td>
  </tr>
</table>


	</td>
    <td width="0" background="imagen/m_dir.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td><img src="imagen/esq_bai.jpg" width="70" height="70" /></td>
    <td background="imagen/baixo.jpg">&nbsp;</td>
    <td><img src="imagen/dir_bai.jpg" width="70" height="70" /></td>
  </tr>
</table>

</body>
</html>
appajax.asp
<%

'função para tratar string de entrada
function trata_val(pstring)
 pstring = Replace (pstring, "'", "")
 pstring = Replace (pstring, "--", "")
 pstring = Replace (pstring, "drop", "")
 pstring = Replace (pstring, "delete", "")
 pstring = Replace (pstring, "<script>", "")
 pstring = Replace (pstring, "</script>", "")
 pstring = Replace (pstring, "Select", "")
 pstring = Replace (pstring, "insert", "")
 pstring = trim(pstring)
 trata_val = pstring
end function



'Declarando variaveis
Dim Con
Dim str_con
Dim caes
Dim sql
Dim texto
Dim id
Dim Rs


'Criando conexão
str_con = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.MapPath("ajax.mdb")&";Mode=ReadWrite;Persist Security Info=False"
Set Con = Server.CreateObject("adodb.connection")
Con.open str_con


'recebendo variaveis
caes = trata_val(request("caes"))
texto = trata_val(request("texto"))
id = trata_val(request("id"))

select case (caes)

	case "a":
  call atualiza
	case "c":
  call insere
	case "e":
  call excluir
	case "sf":
  call selecao_filtro
	case "s":
  call selecao  
	case "sd":
  call selecao_del	
  
end select


function insere

sql = "insert into tb_texto (texto) values ('"& texto &"')"
con.execute(sql)
response.write "Cadastrado"
con.close
Set con = nothing

end function

function atualiza

sql = "update tb_texto set texto = '"& texto &"' where id = " & id
con.execute(sql)
response.write "Atualizado"
con.close
Set con = nothing

end function


function selecao_filtro

sql = "select * from tb_texto where texto like  '"& texto &"%' order by texto"

Set Rs = server.CreateObject("ADODB.Recordset")
Rs.open sql, con

if not Rs.eof then

  while not Rs.eof 
  response.write "<a href=""Javascript: alterar("& Rs("id") &",'"& Rs("texto") &"');"">"& Rs("texto")&"</a><br />"
  Rs.movenext
  wend

end if


con.close
Set con = nothing
Set Rs = nothing

end function


function selecao

sql = "select * from tb_texto order by texto"

Set Rs = server.CreateObject("ADODB.Recordset")
Rs.open sql, con

if not Rs.eof then

  while not Rs.eof 
  response.write "<a href=""#"" >"& Rs("texto")&"</a><br />"
  Rs.movenext
  wend

end if

end function


function excluir

sql = "delete from tb_texto where id ="& id

Set Rs = server.CreateObject("ADODB.Recordset")
Rs.open sql, con

	response.write "Texto Deletado"
con.close
Set con = nothing
Set Rs = nothing
end function

function selecao_del

sql = "select * from tb_texto order by texto"

Set Rs = server.CreateObject("ADODB.Recordset")
Rs.open sql, con

if not Rs.eof then

  while not Rs.eof 
  response.write "<a href=""Javascript: carregadoc('?caes=e&id="& Rs("id") &"','e')"">"& Rs("texto")&"</a><br />"
  Rs.movenext
  wend

end if


con.close
Set con = nothing
Set Rs = nothing

end function

%>
ajax_js.js
// JavaScript Document
var req; 

function carregadoc(url,acao) 
{ 
	var end;
	var ulrfinal;
	end = 'appajax.asp';
	ulrfinal = end + url;
    req = null; 
    // Procura por um objeto nativo (Mozilla/Safari) 
    if (window.XMLHttpRequest) { 
        req = new XMLHttpRequest(); 
  if (acao === "c"){
     req.onreadystatechange = appcad;  
  }

  if (acao === "a"){
     req.onreadystatechange = appalt;  	
  }

  if (acao === "e"){
     req.onreadystatechange = appexc;  	
  }

  if (acao === "sf"){
     req.onreadystatechange = appsel_filtro;  
  }
  
  if (acao === "s"){
     req.onreadystatechange = appsel;  
  }

  if (acao === "sd"){
     req.onreadystatechange = appsel_delet;  
  }  

  req.open("GET", ulrfinal, true); 
        req.send(null); 
    // Procura por uma versão ActiveX (IE) 
    } else if (window.ActiveXObject) { 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
        if (req) { 

  if (acao === "c"){
     req.onreadystatechange = appcad;  
  }

  if (acao === "a"){
     req.onreadystatechange = appalt;  	
  }

  if (acao === "e"){
     req.onreadystatechange = appexc;  	
  }

  if (acao === "sf"){
     req.onreadystatechange = appsel_filtro;  
  }

  if (acao === "s"){
     req.onreadystatechange = appsel;  
  }	

  if (acao === "sd"){
     req.onreadystatechange = appsel_delet;  
  }  

  	req.open("GET", ulrfinal, true); 
            req.send(); 
        } 
    } 
} 

function fn_boo_SohDigito(valor){

chars= "0123456789";
e = String.fromCharCode(window.event.keyCode);

	if(chars.indexOf(e)==-1){
   window.event.keyCode=0;
	}
}

function inserir(){
var tab;

tab = "<form action=\"\" name=\"frm\"> <table width=\"400\" border=\"0\" cellpadding=\"3\" cellspacing=\"2\"> <tr> <td colspan=\"2\" class=\"td_titulo\" >Cadastrar Texto</td>  </tr>  <tr>	<td class=\"cel_text\" >Texto:</td>    <td class=\"cel_input\"><input type=\"text\" name=\"texto\" /><div id=\"cad\"></div><div id=\"alt\"></div></td>  </tr>    <tr>    <td colspan=\"2\" class=\"cel_Botao\" ><input name=\"btn_cad\" type=\"button\" value=\"Cadastrar\" onclick=\"valida_cad(window.document.frm.texto.value);\" /></td>  </tr></table></form>";
document.getElementById('corpo').innerHTML = tab; 

}

function sel_filtro(){
var tab;

tab = "<form action=\"\" name=\"frm\"> <table width=\"400\" border=\"0\" cellpadding=\"3\" cellspacing=\"2\"> <tr> <td colspan=\"2\" class=\"td_titulo\" >Selecionar texto a ser Alterado</td>  </tr>  <tr>	<td class=\"cel_text\" >Texto:</td>    <td class=\"cel_input\"><input type=\"text\" name=\"texto\" onkeyup=\"valida_alt(window.document.frm.texto.value);\" /><input type=\"hidden\" name=\"hd_id_texto\" /></td>  </tr> <tr>  <td> <div id=\"sel_filtro\"></div> </td> </tr> <tr id=\"linha\" style=\"visibility:hidden\">    <td colspan=\"2\" class=\"cel_Botao\" ><input name=\"btn_cad\" type=\"button\" value=\"Alterar\" onclick=\"valida_cad_alt(window.document.frm.texto.value);\" /></td>  </tr> </table></form>";
document.getElementById('corpo').innerHTML = tab; 
}

function alterar(pid, pnm){
var tab;

tab = "<form action=\"\" name=\"frm\"> <table width=\"400\" border=\"0\" cellpadding=\"3\" cellspacing=\"2\"> <tr> <td colspan=\"2\" class=\"td_titulo\" >Alterar Texto</td>  </tr>  <tr>	<td class=\"cel_text\" >Texto:</td>    <td class=\"cel_input\"><input type=\"text\" name=\"texto\" value=\""+pnm+"\" /><input type=\"hidden\" name=\"hd_id_texto\" value=\""+pid+"\" /></td>  </tr> <tr>  <td> <div id=\"alt\"></div> </td> </tr> <tr> <td colspan=\"2\" class=\"cel_Botao\" ><input name=\"btn_cad\" type=\"button\" value=\"Alterar\" onclick=\"valida_cad_alt(window.document.frm.texto.value);\" /></td>  </tr> </table></form>";
document.getElementById('corpo').innerHTML = tab; 
}

function selecao(){
var tab;

tab = "<form action=\"\" name=\"frm\"> <table width=\"400\" border=\"0\" cellpadding=\"3\" cellspacing=\"2\"> <tr> <td colspan=\"2\" class=\"td_titulo\" >Listagem</td>  </tr>   <tr>  <td> <div id=\"sel\"></div> </td> </tr> </table></form>";
document.getElementById('corpo').innerHTML = tab; 
carregadoc('?caes=s','s');  
}

function deletar(){
var tab;

tab = "<form action=\"\" name=\"frm\"> <table width=\"400\" border=\"0\" cellpadding=\"3\" cellspacing=\"2\"> <tr> <td colspan=\"2\" class=\"td_titulo\" >Click no texto para excluir!</td>  </tr>   <tr>  <td> <div id=\"del\"></div> </td> </tr> </table></form>";
document.getElementById('corpo').innerHTML = tab; 
carregadoc('?caes=sd','sd');  
}

function appcad(){

    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
    	document.getElementById('cad').innerHTML =	req.responseText; 
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function appalt(){
    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
  	document.getElementById('alt').innerHTML = req.responseText; 
  	//alert(  req.responseText);
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function appexc(){
    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
            document.getElementById('del').innerHTML = req.responseText; 
  	//alert(  req.responseText);
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function appsel_filtro(){
    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
           document.getElementById('sel_filtro').innerHTML = req.responseText; 
  	//alert(  req.responseText);
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function appsel_delet(){
    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
           document.getElementById('del').innerHTML = req.responseText; 
  	//alert(  req.responseText);
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function appsel(){
    // apenas quando o estado for "completado" 
    if (req.readyState == 4) { 
        // apenas se o servidor retornar "OK" 
        if (req.status == 200) { 
            // procura pela div id="news" e insere o conteudo 
            // retornado nela, como texto HTML 
           document.getElementById('sel').innerHTML = req.responseText; 
  	//alert(  req.responseText);
        } else { 
            alert("Houve um problema ao obter os dados:\n" + req.statusText); 
        } 
    }  
}

function valida_cad(pstr){
	if(pstr != '') {
  carregadoc('?texto='+pstr+'&caes=c','c');  
	}else{
  alert('Texto Obrigatorio');
  return false;
	}

}

function valida_alt(pstr){
	if(pstr != '') {
  carregadoc('?texto='+pstr+'&caes=sf','sf');  
	}else{
  alert('Texto Obrigatorio');
  return false;
	}

}


function valida_cad_alt(pstr){
	if(pstr != '') {
  carregadoc('?texto='+pstr+'&caes=a&id='+window.document.frm.hd_id_texto.value,'a');  
	}else{
  alert('Texto Obrigatorio');
  return false;
	}

}

Espero ter ajudado... biggrin.gif

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this