Publicado em 24 de dez.

ASP + Ajax = Problemas....

Fala pessoal, tudo beleza?

Eu traduzi um sistema de demonstração de Ajax deste site: http://tableless.com.br/artigos/ajaxdemo/?i=3

Ele é PHP mas eu coloquei tudo pra ASP, funções, etc.

Fui testando parte do código por parte e cheguei a conclusão que na hora de retornar 'o conteúdo a ser exibido' o ASP não está cumprindo a tarefa direito.

Olha esse trecho de código Ajax:

xmlhttp.onreadystatechange=function() {

 if (xmlhttp.readyState==4){

 //Lê o texto
 var texto = xmlhttp.responseText

 alert("Texto: " + texto)

 //Exibe o texto no div conteúdo
 var conteudo=document.getElementById("conteudo")
 conteudo.innerHTML=texto

 //Obtém os links do menu
 var menu=document.getElementById("menu")

 }
	}

Esse alert que fiz de teste aparece em BRANCO. Nunca tem nada...isso significa que o 'responseText' que não está conseguindo achar o que o ASP retorna....

A função do ASP que deve retornar o conteúdo para o 'responseText' é:

<%
function leconteudo(n)

temporario = n
Select Case temporario
Case 1
variavel = "teste 1 funfando"
Case 2
variavel = "teste 2 funfando"
Case 3
variavel = "teste 3 funfando"
Case 4
variavel = "teste 4 funfando"
Case 5
variavel = "teste 5 funfando"
Case 6
variavel = "teste 6 funfando"
Case 7
variavel = "teste 7 funfando"
End Select

leconteudo = variavel

End Function
%>
Esse sistema nada mais é do que um menu com um div. Quando você aperta o link no menu ele troca o conteúdo do DIV...

Só que parece que o ASP anda meio problemático com o RETORNO...

Será que alguém pode me ajudar?

Abraços,

Giancarlo Braga.

Discussão (11)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Giancarlo Braga· 24 de dez.

E se alguém achar que ajuda, vou postar o código completo:

Página ajax1.asp

<%
'Lê o parâmetro i (índice do conteúdo)
i = 1
param = Request.QueryString("i")

'se não for vazio...
if (not IsEmpty(param)) Then

'então pegamos parte inteira e tornamos positivo se for negativo...
i=int(abs(param))

End If
%>
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<div id="menu">
	<ol>
 <li><a href="?i=1" title="Parte 1">Introdução</a></li>
 <li><a href="?i=2" title="Parte 2">Objetivos</a></li>
 <li><a href="?i=3" title="Parte 3">Site comum</a></li>
 <li><a href="?i=4" title="Parte 4">Obter o conteúdo</a></li>
 <li><a href="?i=5" title="Parte 5">Construindo a aplicação</a></li>
 <li><a href="?i=6" title="Parte 6">Fazendo acontecer</a></li>
 <li><a href="?i=7" title="Parte 7">Conselhos finais</a></li>
	</ol>

</div>

<div id="conteudo">

<%=leconteudo(i)%>

</div>

</body>
</html>

Página funções.asp

<%
function leconteudo(n)

leconteudo = variavel

End Function
%>

<%
temp = Request.QueryString("n")
leconteudo(temp)
%>
Página ajax.js

//criando função de requisição http
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{

 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
 try{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }catch(E){
 xmlhttp = false;
 }
	}
}

atual=0

function carrega(n){

	//Exibe o texto carregando no div conteúdo
	var conteudo=document.getElementById("conteudo")
	conteudo.innerHTML='<div class="carregando">Carregando...</div>'

	//Guarda a página escolhida na variável atual
	atual=n

	//Abre a url
	xmlhttp.open("GET", "funcoes.asp?n="+n, true);

	//Executada quando o navegador obtiver o código
	xmlhttp.onreadystatechange=function() {

 if (xmlhttp.readyState==4){

 //Lê o texto
 var texto = xmlhttp.responseText

 alert("Texto: " + texto)

 //Exibe o texto no div conteúdo
 var conteudo=document.getElementById("conteudo")
 conteudo.innerHTML=texto

 //Obtém os links do menu
 var menu=document.getElementById("menu")

 }
	}
	xmlhttp.send(null)
}
function menuclick(e){

	//Correção para eventos quebrados da Microsoft
	if(typeof(e)=='undefined')var e=window.event
	source=e.target?e.target:e.srcElement
	//Correção para o bug do Konqueror/Safari
	if(source.nodeType==3)source=source.parentNode

	//Obtém o número quebrando a url
	n=source.getAttribute("href").replace(/.*=/,"")

	//Chama o carrega
	carrega(parseInt(n))

	//Cancela o click (evita a navegação)
	return false
}

function init(){

	//Obtém os links do menu
	var menu=document.getElementById("menu")
	var links=menu.getElementsByTagName("a")

	//Atribui o evento
	for(var i=0;i<links.length;i++)
 links[i].onclick=menuclick
}

if(xmlhttp)window.onload=init
Abraço.

DSerma· 24 de dez.

Cara.. eu testei aki e ta "funfando" de boa....

Assim como você disse.... cada link ele troca o textop da div para "teste 6 funfando", "teste 1 funfando".. e por ai vai...

Teste no FF e no IE.. nada de errado... tudo de boa....

Então......... da uma verificada melhor ai.. e ve oq pega... pq o seu código está CORRETO..

Abraços...

Giancarlo Braga· 24 de dez.

Obrigado aí pela resposta cara.

Kkkkkk..."funfando" foi falta de idéia....

Assim, você só colou, salvou os códigos e rodou no IIS e pronto?

Ele mostra a caixa de mensagens "Texto: teste 1 funfando" normal além de substituir o conteúdo do DIV?

Oh my God...o que será que está acontecendo?

Quando coloco online o meu fica igual; http://www.unidadejardim.com.br/ajax/ajax1.asp

Quando aperto os links e a caixa de alerta abre acontece igual('Texto: ', sem nada)..sempre os textos estão vazios! Não importa qual eu clique...e o DIV também carrega 'vazio'.

DSerma· 24 de dez.

Então.. só copiei seu código.. colei e rodei...

Ele troca o conteudo da div.. mas nao abre o alert.... só troca a div mesmo...

deixa eu olhar aki pra ver s eo alert veio tb..

Mas o texto da div ta trocando de boa mesmo......

Abraços...

Cara.. uma coisa q eu percebi agora...

No página:

<%
'Lê o parâmetro i (índice do conteúdo)
i = 1
param = Request.QueryString("i")

'se não for vazio...
if (not IsEmpty(param)) Then

'então pegamos parte inteira e tornamos positivo se for negativo...
i=int(abs(param))

End If
%>
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<div id="menu">
	<ol>
 <li><a href="?i=1" title="Parte 1">Introdução</a></li>
 <li><a href="?i=2" title="Parte 2">Objetivos</a></li>
 <li><a href="?i=3" title="Parte 3">Site comum</a></li>
 <li><a href="?i=4" title="Parte 4">Obter o conteúdo</a></li>
 <li><a href="?i=5" title="Parte 5">Construindo a aplicação</a></li>
 <li><a href="?i=6" title="Parte 6">Fazendo acontecer</a></li>
 <li><a href="?i=7" title="Parte 7">Conselhos finais</a></li>
	</ol>

</div>

<div id="conteudo">

<%=leconteudo(i)%>

</div>

</body>
</html>

Onde você chama a função AJAX ???? http://forum.imasters.com.br/public/style_emoticons/default/natal_ohmy.gif

Pelo q eu vi aki.. em nenhum momento você chama a função JS.. só ta em asp mesmo...

Por isso o alert nao ta rolando aki....

Giancarlo Braga· 24 de dez.

Opa..

Eu chamo o Ajax nessa linha:

E esse arquivo contém uma parte que é assim:

if (xmlhttp.readyState==4){

 //Lê o texto
 var texto = xmlhttp.responseText

 alert("Texto: " + texto)

 //Exibe o texto no div conteúdo
 var conteudo=document.getElementById("conteudo")
 conteudo.innerHTML=texto

 //Obtém os links do menu
 var menu=document.getElementById("menu")

 }

Nesse meio está o alert que fiz para testar o que a variável texto retorna quando a requisição http terminou e está retornando algo.

Mas não sei o que acontece....o que a função asp retorna não dá certo.

DSerma· 24 de dez.

Não mano... hehehe

Nessa linha você apenas adiciona a função que está dentro do arquivo .JS...

Mas você precisa fazer a chamada da função... por exemplo:

<input type = "button" value = "Vai" onClick = "funcaoAjax();">
Neste exemplo.. ao clicar no botão, eu chamo a função "funcaoAjax();" que está dentro do meu arquivo .JS...

Se você quiser.. eu te passo um exemplo de como trabalhar com Ajax e ASP....

Mas se não quiser... apenas de uma olhada no seu código.. e veja oq eu falei...

Outra coisa q percebi.. é q na sua função "carrega()", que está no seu JS, você usa a variavel "?n=", e na sua página ASP, você pega a QueryString "i", e não "n".. logo.. a página não tem parametros para retornar o resultado...

Entendeu oq quis dizer ??

Abraços...

Giancarlo Braga· 24 de dez.

O evento onclick é chamado por Java Script.

Primeiro a função 'init' é chamada no carregamento da página por essa linha no final do arquivo ajax.js: if(xmlhttp)window.onload=init

E assim, quando esta chama a função 'menuclick', o JS atribui o evento onclick para cada um dos itens no div 'menu'...

Essencialmente é o mesmo esquema que o cara do exemplo em PHP fez.

Eu só dei uma simplificada boa e traduzi pro ASP.

Mas eu não entendo porque ai funcionou e aqui não...se você não mudou nada no código...

Sobre o QueryString i, na realidade ele passa por parâmetro i como valor da variável N enviada via get...é meio enrolado o código do cara que fez..

Mas é uma parte que dá pra excluir...

Dá pra ficar assim:

i = 1

Inicialment o é 1 para exibir inicialmente o texto correspondente ao link 1 no menu...

Agora se você observar, olha o link como fica localhost?i=1.

O que acontece é que ele vai ler nessa mesma página o i pelo JavaScript e encaminhar esse número como funcoes.asp?n=i...aí sim ele manda parâmetros. E aguarda parâmetros...

Ele devia retornar algo no xmlhttp.responseText.

Entende o drama? rs

Se você puder manda sim esse exemplo de Ajax com ASP, por favor.....eu agradeço...

Ando meio perdido com Ajax aqui. E apesar de já ter entendido o esquema não consigo fazer funcionar....só queria uma motivação pra continuar..rs..mas tá difícil.

DSerma· 24 de dez.

Tenta esse script aki:

ajax.js:

var url;
var xmlHttp=null;
function showPag(str)

{

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Desculpe. Seu navegador não suporta AJAX!");
 return;
 }
url=str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
if (xmlHttp.readyState == 1) {
document.getElementById("conteudo").innerHTML="<img src='loader.gif'>";
}
return url;
}

function stateChanged()

{ if (xmlHttp.readyState==4) {

document.getElementById("conteudo").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()

{

 if (window.XMLHttpRequest) {
 a=new XMLHttpRequest(); } //Objeto nativo (FF/Safari/Opera7.6+)
 else {
 try {
 a=new ActiveXObject("Msxml2.XMLHTTP"); //activeX (IE5.5+/MSXML2+)
 }
 catch(e) {
 try {
 a=new ActiveXObject("Microsoft.XMLHTTP"); //activeX (IE5+/MSXML1)
 }
 catch(e) { /* O navegador não tem suporte */
 a=false;
 }
 }
 }
 return a;
 }

Página principal:

<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<div id="menu">
	<ol>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=1');" title="Parte 1">Introdução</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=2');" title="Parte 2">Objetivos</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=3');" title="Parte 3">Site comum</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=4');" title="Parte 4">Obter o conteúdo</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=5');" title="Parte 5">Construindo a aplicação</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=6');" title="Parte 6">Fazendo acontecer</a></li>
 <li><a href="#" onclick= "showPag('Funcoes.asp?i=7');" title="Parte 7">Conselhos finais</a></li>
	</ol>

</div>

<div id="conteudo">
</div>

</body>
</html>

Funcoes.asp:

<%
Response.Expires = -1
Var = Request.QueryString("i")
If Var = "1" then
Variavel = "Parametro 1 passado com sucesso!"
End if
If Var = "2" then
Variavel = "Parametro 2 passado com sucesso!"
End if
If Var = "3" then
Variavel = "Parametro 3 passado com sucesso!"
End if
If Var = "4" then
Variavel = "Parametro 4 passado com sucesso!"
End if
If Var = "5" then
Variavel = "Parametro 5 passado com sucesso!"
End if
If Var = "6" then
Variavel = "Parametro 6 passado com sucesso!"
End if
If Var = "7" then
Variavel = "Parametro 7 passado com sucesso!"
End if

Response.Write(variavel)

%>
Testado e aprovado no IE e no FF...

Espero ter ajudado..

Abraços....

Giancarlo Braga· 24 de dez.

Obaaaaaa

Agora funcionou!

Valeu mesmo cara.....muito obrigado.

Você sabe dizer qual era o problema daquele anterior? Eu sei que estava um bolo lascado aquele script, rs...

Acho que era aquilo mesmo que você dizia!

Deve ter tido algum problema de lógica(meu) na hora de traduzir do ASP pro PHP....

Obrigado mais uma vez.

Abraços

DSerma· 24 de dez.

Cara.. oq era em si.. só estudando o código mesmo pra saber... e agora nao to com muuuuuuuuuita vontade disso nao.. hehehe

Mas esse exemplo que te passei é o padrão que sempre sigo... e sempre funciona...

Qlqr coisa dá um berro ai..

Abraços... http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

Giancarlo Braga· 24 de dez.

Kkkkk...tranqüilo!

Muito bom esse seu exemplo.

Simplificou muito minha vida.

Agora preciso estudar mais JavaScript e umas coisinhas aí pra melhorar...mas eu acho que essencialmente Ajax é isso.

Tenha um ótimo natal rapá!

Abraços,

Giancarlo Braga.