ASP + Ajax = Problemas....

Giancarlo Braga · Dezembro 24, 2007

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.

Giancarlo Braga · Dezembro 24, 2007

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

Página ajax1.asp

<!--#include file="funcoes.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">
<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)

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
%>

<%
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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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:

<!--#include file="funcoes.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">
<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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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">
<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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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 · Dezembro 24, 2007

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.

Arquivado

ASP + Ajax = Problemas....

Recommended Posts

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante