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;
<%
'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;
}
}
Pergunta
halakaluf
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
appajax.asp ajax_js.jsEspero ter ajudado...
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.