Ir para conteúdo
Fórum Script Brasil
  • 0

Operações Básicas Com Ajax


halakaluf

Pergunta

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

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...