Minha pequenina contribuição...
[ mais um texticulo escrito por Luis Otávio ]
Bem, primeiro.. a função js .. vc vai achar inumeras.. cada um gosta de trabalhar de uma forma.. cada um ja fez sua função, sabe como ela trabalha..
eu vou deixar minha contribuição, mesmo sendo mais JS que propriamente ASP, acho que podemos discutir aqui.. com o que podemos juntar com o ASP, ja vi inumeros exemplos na net... mas 99% são de uso com PHP, tb acho que o povo do ASP sofre um pouco com os exemplos, para quem ta começando...
bem, chega de xe xe xe... vamos aos códigos...
bem, tudo começa com este trumbiquetes...
sempre que vc for fazer algo com AJAX, vai precisar disso..
eu costumo criar um arquivo .js separado...
<script>
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
</script>
depois... para uso próprio, eu costumo usar isso
<script>
function pega(b){
return document.getElementById(b);
}
</script>
que que isso faz? a, depois vc vai ver a utilidade.. parece inutil, mas evita alguns erros de digitação.. :_D
Agora....
Quando queremos passar uma informação para outra pagina.. q q fazemos...?
<form action="lugar.asp" method="post">
isso vai disparar todos nossos campos para a pagina lugar.asp e la, nós vamos resgatar os valores...
pois é.. com Ajax, nós submetemos nossos dados, sem o famoso 'refresh' na página mas nós não precisamos só submeter dados, nós tb podemos resgatar dados... dai vai da imaginação... hehe
vamos criar nosso primeiro formulario de envio?
<input type="text" id="meu_campo" />
<input type="button" value="vai" />
Duas coisas que observamos...
com ajax, eu não preciso 'criar' o forumlario... só preciso dos campos.. segundo, eu não tenho um botão 'submit' pq o 'submit' submiteia [ q coisa horrivel ] os dados, e nós não queremos isso, nós queremos um botão que chame nossa função.. que vamos criar agora...
vamos começar enviando nosso formulario, pelo metodo GET que no ASP resgatariamos 'request.QueryString("")
[ precisamos saber JS ]
<script>
function ajax_GET(){
/*
vamos setar nossa variavel, lembra da função que criei no inicio do código, a 'pega'
pois é, para não ficarmos escrevendo toda hora
document.getElementById("campo").value
podemos so chamar a função, assim, evitando de escrever errado.. e facilitando a vida...
notem que peguei o 'valor' do campo 'meu_campo'
como estamos passando por GET, isto é, pela URL, vamos setar o valor ali como se tivesse
abrindo uma URL mesmo
*/
var minha_variavel = pega('meu_campo').value;
//Abrimos
xmlhttp.open("GET", "lugar.asp?minha_variavel="+minha_variavel,true);
// aqui definimos os headers de nossa requisição para a pagina 'lugar.asp'
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
xmlhttp.onreadystatechange=function() {
/*aqui vamos verificar o status de nossa requisição
se for 404 -> pagina não encontrada... nós usamos o :
xmlhttp.abort()
return false
que irá abortar nossa requisição, e retornar 'false' para a função...
ou o erro 500 que é o erro interno do servidor, assim não mostraremos erro de código para o usuario.
poderiamos colocar ai tb uma mensagem de 'servidor em manutenção' para o usuario naum ficar sem saber o que fazer.
*/
if (xmlhttp.status == 404 || xmlhttp.status == 500){
/*
ABORTANDO NOS ERROS.
*/
xmlhttp.abort()
return false
}else{
/*
aqui tem uma sequencia de 'estados' da requisição, não vou detalhar todos...
isso vcs veem depois.. hehe.. o ultimo, que é o 4, é quando o restultado é retornado para nós..
*/
if(xmlhttp.readyState == 4){
/*
xmlhttp.responseText -> é o texto, ou resposta gerada pela pagina 'lugar.asp'
se em nossa pagina 'lugar.asp' colocarmos um
response.Write request.QueryString("minha_variavel")
no xmlhttp.responseText
terá o texto q tinha no campo 'meu_campo'
*/
var texto_retorno = xmlhttp.responseText
pega('meu_div').innerHTML = texto_retorno;
}
}
}
xmlhttp.send(null)
}
</script>
aaaa, mas não apareceu nada na minha tela...
claro, faltou um pedaço.. hehehe
viu no JS assim
pega('meu_div').innerHTML
innerHTML -> insere tudo que ta depois do igual no div que vc mandar [ isso resumido.. hauahua ]
exemplo
<div id="meu_div"></div>
pega('meu_div').innerHTML = 'otavio lindão'
mesmo não tendo nada escrito no div, o innerHTMl vai inserir -> Otávio lindão no div...
Então.. este nosso código inicial, ficaria assim:
<script>
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
function pega(b){
return document.getElementById(b);
}
function ajax_GET(){
var minha_variavel = pega('meu_campo').value;
xmlhttp.open("GET", "lugar.asp?minha_variavel="+minha_variavel,true);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.status == 404 || xmlhttp.status == 500){
xmlhttp.abort()
return false
}else{
if(xmlhttp.readyState == 4){
var texto_retorno = xmlhttp.responseText
pega('meu_div').innerHTML = texto_retorno;
}
}
}
xmlhttp.send(null)
}
</script>
<div id="meu_div"></div>
<input type="text" id="meu_campo" />
<input type="button" value="vai" onclick="ajax_GET();" />
esta pode ser nossa pagina [teste.html] e depois criamos uma pagina
[lugar.asp]
com o conteudo
<%
response.Write request.QueryString("minha_variavel")
%>
e vejam a magica.. hehe
aaaaa,... seguindo... todos sabemos que passando valores por GET, alem de não ser seguro... não podemos passar um texto muito grande.. pq.. simplesmente não podemos passar textos muito grande. hauahua
então.. temos o AJAX pelo metodo POST.. é quase a mesma coisa...só que diferente :_D
vamos criar uma função ajax_POST
<script>
function ajax_POST(){
var minha_variavel = pega('meu_campo').value;
/*
Aqui eu usei o 'abort' logo no inicio, para evitar dos estressadinhos
que apertam o 'enviar' 20 vezes, cada vez q ele apertar, cancela o que tava aberto
e começa a enviar novamente.
*/
xmlhttp.abort()
//POST para onde vai os dados, em nosso caso a 'lugar.asp'
xmlhttp.open('POST',"lugar.asp",true);
//Definimos os Headers de nossa solicitação.
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; iso-8859-1");
xmlhttp.setRequestHeader("CharSet", "iso-8859-1")
xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
xmlhttp.setRequestHeader("Pragma", "no-cache");
//aqui definimos quem vai ser enviado, e com que nome tera o nosso 'POST'
//para baixo, a mesma coisa, que no metodo GET
xmlhttp.send("minha_variavel="+minha_variavel);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.status == 404 || xmlhttp.status == 500){
/*
ABORTANDO NOS ERROS.
*/
xmlhttp.abort()
return false
}else{
if(xmlhttp.readyState == 4){
var texto_retorno = xmlhttp.responseText
pega('meu_div').innerHTML = texto_retorno;
}
}
}
}
</script>
o resto do script fica a mesma coisa.. so mudamos o JS mesmo...
Bem, mas então pelo que entendi.. o AJAX, só envia dados...
não, nós podemos solicitar algo, sem enviar nada.. suponhamos que temos a função AJAX, que mostra o IP do cara.. ficaria mais ou menos assim
nós temos a pagina de login.
[login.asp]
nela tem [os js q sempre terão no topo, mais isso ]
<script>
function ajax_PEGA_IP(){
xmlhttp.open("GET", "lugar.asp",true);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.status == 404 || xmlhttp.status == 500){
xmlhttp.abort()
return false
}else{
if(xmlhttp.readyState == 4){
var texto_retorno = xmlhttp.responseText
pega('ip_usuario').innerHTML = texto_retorno;
}
}
}
xmlhttp.send(null)
}
</script>
para chamar esta função, logo que a pagina carregar, podemos fazer de duas formar... ou colocar no body, da pagina,
ou podemos chamar ela só...
<script>
//lembre-se, vc tem que chamar a função, depois do DIV na pagina
ajax_PEGA_IP()
</script>
e vamos colocar um 'div' assim
<div id="ip_usuario"></div>
na pagina [lugar.asp]
vamos colocar
<%
response.write request.ServerVariables("REMOTE_ADDR")
%>
veja... aparece o IP do cara, no DIV que colocamos ali na tela...
com isso podemos fazer outras solicitações de AJAX.. podemos ir montando menus aos poucos, de acordo como a pagina é carregada,
podemos chamar determinado menu, somente quando o usuario clicar em algum lugar..
aaa, podemos começar então, a fazer coisas bonitinhas.. como um 'carregando'
como? assim.. ó..
<script>
function ajax_PEGA_IP(){
pega('ip_usuario').innerHTML = 'carregandooooooooooooooooooooooooooooo';
xmlhttp.open("GET", "lugar.asp",true);
xmlhttp.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.status == 404 || xmlhttp.status == 500){
/*
Lembra das mensagens de erro, que poderiamos por?
pois é, aqui é o lugar...
*/
pega('ip_usuario').innerHTML = 'Ops, deu caca, ou não achamos a pagina.. foi tu que mexeu aqui?';
xmlhttp.abort()
return false
}else{
if(xmlhttp.readyState == 4){
var texto_retorno = xmlhttp.responseText
pega('ip_usuario').innerHTML = texto_retorno;
}
}
}
xmlhttp.send(null)
}
</script>
a, fala serio, muito facil.. pois é.. no inicio o div tem o texto 'carregandooooooooooooooooooooooooooooo' depois que nosso AJAX, receber os dados,
ele perde o texto 'carregandooooooooooooooooooooooooooooo' e ganha o texto que venho da pagina 'lugar.asp'
assim, podemos criar um '.gif' de carregando e colocar ali :_D
agora, vamos a última coisa...
os malditos acentos... como assim? aaa, vai passar no ajax um 'é tão ó'
não entendeu ainda?
roda isso, sem ler o resto.. hauahauha
ta, vamos la.. para acertar os acentos...
se vc tiver usando ajax_GET
um
<%
Response.Charset = "ISO-8859-1"
%>
no inicio da pagina [lugar.asp] ja resolve.. agora, pq isso?
Por que o ajax ele envia a requisição em UTF-8, e esta forma, não le acentos... então, temos que dizer para nossa pagina, ler em nosso padrão que é o 'ISO-8859-1'
com acentos e tudo mais...
dai vc vai pensar.. que tanto escandalo você fez... é,.. mas só isso não funciona quando vc usa com o metodo POST do ajax.. [ isso no ASP, no PHP é mais facil, que eu não precisei desta mão toda para rodar com o PHP ]
Bem, primeiro nas variaveis do JS vamos ter que dar um 'escape' que que é este cara 'escape' no JS ele transforma tudo para o padrão de URL...
lembra q o metodo GET funciona.. então.. por exemplo, o valor 'oi otavio' ficaria 'oi%20otavio' lembra que '%20' é espaço la na URL...
como que usa?
lembra que na função ajax_POST
tinha esta linha: xmlhttp.send("minha_variavel="+minha_variavel);
pois é, vamos dar um 'escape' nela assim
xmlhttp.send("minha_variavel="+escape(minha_variavel));
então.. mas no ASP vai ficar tudo errado ... certo? então.. na nossa pagina [lugar.asp]
vamos ter esta função:
<%
Function decodifica_url(querido)
Dim var_temporaria, i
var_temporaria = querido
var_temporaria = Replace( var_temporaria, "%20", " " )
var_temporaria = Replace( var_temporaria, "%22","""" )
var_temporaria = Replace( var_temporaria, """, chr(34) )
var_temporaria = Replace( var_temporaria, "<" , chr(60) )
var_temporaria = Replace( var_temporaria, ">" , chr(62) )
var_temporaria = Replace( var_temporaria, "&" , chr(38) )
var_temporaria = Replace( var_temporaria, " ", chr(32) )
For i = 1 to 255
var_temporaria = Replace( var_temporaria, "&#" & i & ";", chr( i ) )
Next
decodifica_url = var_temporaria
End Function
%>
que que isso faz? troca tudo que for por exemplo '%20' por ' ' isso mesmo, assim os acentos voltam a funcionar.. e tudo mais \o/
<%
variavel = decodifica_url(request.form("minha_variavel"))
response.write variavel
%>
Pronto.. acentuação, aparti de agora.. sempre funcionando em nossos AJAX..
Bem, sobre AJAX, eu poderia escrever um livro.. [ não que eu seja um grande conhecedo, mas é que tem bastante coisa sobre ] hehe, tem muita coisa para falar dele, tem muita coisa para falar sobre ele, muita coisa que o queridão faz, mas o que nos interessa do ASP, é isso, como enviamos, como resgatamos, como resolvemos problemas de acentuação...
Mais duvidas sobre criar funçãoes estas coisas, você acha melhor na seçaõ de JS mesmo.. que ajax nada mais é que JS
quem esta acostumado a programar ASP VBscript, no inicio tem uma certa dificuldade, pq a sintaxe do JS é totalmente diferente da do ASP, para quem programa em PHP sente mais facilidade para se adaptar com o AJAX, pq a sintaxe do PHP é praticamente a mesma que a do JS...
tb, particularmente não sei pq 99% das pessoas programam ASP e VBscript, Jscript pode ter menos exemplos, mas vc programando nele.. se acha melhor quando precisa mesclar coisas diferente do ASP, mas isso é outro assunto.. hehe
Espero que tenham gostado, e que tenham entendido, se não tudo, algo :_D
