Duvida js e ajax

28 respostas
diegonogueira
// JavaScript Document 
//ajax.js

	// request = false;
	var REQ_FIM = 4;
	var REQ_OK = 200;
	
	function stateChangeListener() { //Função ativada a cada mudança de status na comunicação com o servidor de transferencia
		if (request.readyState != REQ_FIM) {
			return;
		}
		
		if (request.status == REQ_OK) {
			recebe(request.responseText);
			request=false;
		} 
		return;
	}
	
	function ajax(url,params) {// Função que envia a url e seus parametros para o servidor de transferencia (AJAX)
		tmpUrl = url;
		tmpParams = params;
		
		if(window.XMLHttpRequest) {
			request = new window.XMLHttpRequest();
		} else if (window.ActiveXObject) {
			request = new window.ActiveXObject("Microsoft.XMLHTTP");
		}
		if(request) {
			request.onreadystatechange = stateChangeListener;
			request.open("POST", url, true);
			request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			if (typeof params == "undefined") {
				request.send();
			} else {
				request.send(params);
			}
		}
	}
	
	function recebe(msg) {// Função que recebe a mensagem do servidor de transferencia e insere seu conteudo na área "painel"
	    P = document.getElementById("painel");
		P.innerHTML = msg;
		URL_ATUAL = tmpUrl;
		PARAMS_ATUAL = tmpParams;
		
		alert(P.getObjetct());
		
		
	}
===============
<!--textoJS.php-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="sotexto.css" /> 
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<?php file_put_contents("textoJS.txt","Funcionoooooooooooou"); ?>
<div>
<h1>Texto mais JavaScript</h1>

<script type='text/JavaScript'>

	document.write("Texto escrito por java scriptTT");
</script>

<h1> H1</h1>

<!--<IFRAME name=palco src="testeframe.html" frameBorder=10 width=400 height=150 scrolling=auto></IFRAME>-->
</div>
</body>
</html>
======================
<-- ajax.html -->
<!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>Documento sem título</title>
<style type='text/css'>
    
		
	#tudo {width:1004px;
			margin-left:auto;
			margin-right:auto;
	}
	
	#princ {float:left;
			width:inherit;
		    background-color:#CCC}

	#cab {width:inherit;
		  height:100px}
	
	#nav {width:inherit;
		  height:30px}
	
	#menu {width: 200px;float:left}
		   
    #painel {width:800px;
			float:left;
			background-color:#FAFAFA}
			  
	#rodape {float:left;
	         width:1000px;
			 height:40px;
			 }
			 
	.menuItem {min-height:30px;
	           background-color:#FFC;
			   vertical-align:middle;
			   display:block;
			   width:inherit;
			   text-align:left;
			   border:none;
			   cursor:pointer;
			   margin-bottom:2px}
			   
	.novoLink {cursor:pointer; color:#00C}
	
</style>

<script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<div id="tudo">
    <div id='princ'>
      <div id='cab'>
          <p>Cabecalho</p>
      </div>
      <div id='nav'>
          <p>Nevagação principal</p>
      </div>
      <div id='menu'>
          <h3>Menu esquerdo</h3>
		  
          <button class='menuItem' onClick='ajax("soTexto.php")'>Só texto</button>
          <button class='menuItem' onClick='ajax("textoJS.php")'>texto com java script</button>
		  
		  
      </div>
       <div id='painel'>
          <p>Area de aplicação</p>
		
      </div>
      
      <div id='rodape'>
          <p>Rodape</p>
      </div>
    </div>
</div>
</body>
</html>
No ajax.html to tentando carregar o javascript via ajax, alguem pode dar um help, sou novato na area

28 Respostas

M

Cara… primeira dica é… esqueça JS diretamente… use jquery… vc produz muito mais e boa parte da complexidade que se tem utilizando JS é abstraida…

mas quanto a dúvida, não entendi o que você quer… tente ser mais claro…

Abs… e boa sorte

diegonogueira

Eu quero chamar os javascript que ta no arquivo textoJS.php, só que tem que ser chamado via ajax.
Tem que ser javascript, pq os arquivos q vou precisar chamar qndo for realmente fazer isso são js,
e fizeram um negocio usando framework de tal maneira que ingessaram a parada toda e só pode ser
chamado via ajax, se alguem puder dar um help, obrigado

drsmachado

Antes de qualquer coisa, edite teu tópico e coloque o código entre as tags [code]
Senão, não tem nem como ler essa coisa.

diegonogueira
drsmachado:
Antes de qualquer coisa, edite teu tópico e coloque o código entre as tags [code] Senão, não tem nem como ler essa coisa.

sou novo no site, mais os arquivos estão separados por =======
então axo que n tem problema, estar bem visivel....
mais obrigado pela dica

drsmachado
diegonogueira:
sou novo no site, mais os arquivos estão separados por ======= então axo que n tem problema, estar bem visivel.... mais obrigado pela dica
Justamente por ser novo que deveria ter lido as regras do fórum. Depois, veja a diferença
public class ComTagCode{
 public static void main(String args[]){
   System.out.println("Com tag [code]");
 }
}
E sem

public class SemTagCode{
public static void main(String args[]){
System.out.println("Sem tag [code]");
}
}

diegonogueira
drsmachado:
diegonogueira:
sou novo no site, mais os arquivos estão separados por ======= então axo que n tem problema, estar bem visivel.... mais obrigado pela dica
Justamente por ser novo que deveria ter lido as regras do fórum. Depois, veja a diferença
public class ComTagCode{
 public static void main(String args[]){
   System.out.println("Com tag [code]");
 }
}
E sem

public class SemTagCode{
public static void main(String args[]){
System.out.println("Sem tag [code]");
}
}

Pronto amigo, poderia me dar um help no codigo?
obrigado

drsmachado

Veja bem, você tem a função ajax que espera 2 (Dois) argumentos, url que, ao meu entender, representa a URL a a ser requisitada e params que pode ser nulo ou qualquer outro conjunto aceito de parâmetros.

function ajax(url,params) {// Função que envia a url e seus parametros para o servidor de transferencia (AJAX)  
 (...)
 <button class='menuItem' onClick='ajax("soTexto.php")'> texto</button>  
 <button class='menuItem' onClick='ajax("textoJS.php")'>texto com java script</button>

Porém, como pode ver, só passa 1 parâmetro na chamada.

Se não vai mandar parâmetros, faça

<button class='menuItem' onClick='ajax("soTexto.php", "")'> texto</button>

Se for passar parâmetros, coloque

<button class='menuItem' onClick='ajax("soTexto.php", "parametroAqui")'> texto</button>
diegonogueira
drsmachado:
Veja bem, você tem a função ajax que espera 2 (Dois) argumentos, url que, ao meu entender, representa a URL a a ser requisitada e params que pode ser nulo ou qualquer outro conjunto aceito de parâmetros.
function ajax(url,params) {// Função que envia a url e seus parametros para o servidor de transferencia (AJAX)  
 (...)
 <button class='menuItem' onClick='ajax("soTexto.php")'> texto</button>  
 <button class='menuItem' onClick='ajax("textoJS.php")'>texto com java script</button>
Porém, como pode ver, só passa 1 parâmetro na chamada. Se não vai mandar parâmetros, faça
<button class='menuItem' onClick='ajax("soTexto.php", "")'> texto</button>
Se for passar parâmetros, coloque
<button class='menuItem' onClick='ajax("soTexto.php", "parametroAqui")'> texto</button>

tentei só q sem mandar parametro como vc colocou e tmb n executou o js

drsmachado

É meio óbvio.
O ajax vai tentar processar este trecho, ocasionando erro, logo, não irá finalizar a execução

} else {  
                request.send(params);  
            }
diegonogueira

drsmachado:
É meio óbvio.
O ajax vai tentar processar este trecho, ocasionando erro, logo, não irá finalizar a execução

} else { request.send(params); }

então fala oq faço pra resolver

drsmachado

Primeiramente, não respondo dúvidas por MP, nem MSN. Quando acho necessário uma abordagem mais específica, eu mesmo solicito.
Segundo, a lógica do javascript é a mesma do java. Se você tem a possibilidade de que determinado método que recebe mais de um parâmetro trabalhar apenas com um, então precisa validar se os demais são nulos.

Ou seja

SE params == nulo OU params == ''
  ENTAO envia url
SENAO
 envia params
FIM SE

Terceiro, um dos camaradas que respondeu antes foi enfático ao dizer para ignorar javascript. Discordo dele. Trabalhar com jQuery (assim como qualquer framework) fica mais produtivo quando você sabe o que ele faz “por trás dos panos”.

diegonogueira

drsmachado:
Primeiramente, não respondo dúvidas por MP, nem MSN. Quando acho necessário uma abordagem mais específica, eu mesmo solicito.
Segundo, a lógica do javascript é a mesma do java. Se você tem a possibilidade de que determinado método que recebe mais de um parâmetro trabalhar apenas com um, então precisa validar se os demais são nulos.

Ou seja

SE params == nulo OU params == ''
  ENTAO envia url
SENAO
 envia params
FIM SE

Terceiro, um dos camaradas que respondeu antes foi enfático ao dizer para ignorar javascript. Discordo dele. Trabalhar com jQuery (assim como qualquer framework) fica mais produtivo quando você sabe o que ele faz “por trás dos panos”.

valeu pela “ajuda”, mais pode deixar, vou ver se alguem pode me explicar, como eu disse sou INICIANTE, e vc na minha humilde opinião é mal educado…
mais não leva pro lado pessoal não… vou esperar alguém com um pouco de paciência para comentar.
obrigado

drsmachado

Ajuda = Esclarecer, fornecer informações ou ferramentas que tornem possíveis a execução de algo.

Falar o que tem que fazer = fazer = Tomar a iniciativa de, tomar frente e desenvolver as ações que irão gerar um resultado.

Logo

Ajudar != Fazer.

E sim, sou mal educado com quem quer as coisas prontas. Quem não estuda, quem tem preguiça e má vontade, quem quer tudo na mão e nem se preocupa em procurar informações, fica esperando que os outros façam por eles.
Se você acha que tudo cairá do céu, te digo, mais fácil largar o desenvolvimento e ir brincar de qualquer outra coisa.

1 - Você entrou num fórum e não leu as regras;

2 - Você está querendo que alguém faça o teu serviço e não irá pagar por isso;

3 - Você me mandou uma MP pedindo meu MSN para conversarmos;

4 - Você nem sequer pesquisou o funcionamento do ajax para entender o que está dando errado;
diegonogueira

drsmachado:
Ajuda = Esclarecer, fornecer informações ou ferramentas que tornem possíveis a execução de algo.

Falar o que tem que fazer = fazer = Tomar a iniciativa de, tomar frente e desenvolver as ações que irão gerar um resultado.

Logo

Ajudar != Fazer.

E sim, sou mal educado com quem quer as coisas prontas. Quem não estuda, quem tem preguiça e má vontade, quem quer tudo na mão e nem se preocupa em procurar informações, fica esperando que os outros façam por eles.
Se você acha que tudo cairá do céu, te digo, mais fácil largar o desenvolvimento e ir brincar de qualquer outra coisa.

1 - Você entrou num fórum e não leu as regras;

2 - Você está querendo que alguém faça o teu serviço e não irá pagar por isso;

3 - Você me mandou uma MP pedindo meu MSN para conversarmos;

4 - Você nem sequer pesquisou o funcionamento do ajax para entender o que está dando errado;</blockquote>

Tem gente nesse mundo infelizmente que se acha demais. Perguntei no forum se alguem sabia o que fazer, vc falou várias coisas, q testei e n deu certo…
Vc não é lá essas coisas tmb n…
Não quero q ninguem faça meu trabalho, n sei nem pq to discutindo com vc, acho que vc nem vale a pena, deve ser um mané q n tem amigos e quem dirá mulheres rsrsrrs
Vc vem dizer q n pesquisei funcionamente do ajax, disse mais de uma vez q sou iniciante, sabe ler n?
ver se para de deixar msg, sua ajuda eu dispenso, vc n consegue tmb rsrsrsr
e um pouco de humildade n faz mal a ninguem

drsmachado

Provavelmente eu seja um mané, com mais de 3500 respostas no guj.
O que tem a ver ser iniciante e não ter pesquisado? Se é iniciante, primeiro pesquise, diga onde e o que não entendeu, aliás, esta é uma das regras do fórum.
Eu sei o que fazer, você não. E, mesmo que não soubesse, humildemente iria perguntar de que maneira eu poderia alterar a função ajax para que ela pudesse ser executada sem o fornecimento de parâmetros e não seria boçal pedindo para me dizerem o que fazer.

Aliás, você deve ser destes babaquinhas metidos a webdesigners, que só usam o “miguxês” para escrever e não conseguem criar uma frase com mais de 10 palavras sem usar uma abreviação como “q”, “vc” e afins.

Eu respondo aqui, não para pessoas que precisam justificar a capacidade mental com argumentos do tipo “não tem amigos, quem dirá mulheres”.

Se você não entende o que digo, me desculpe, eu costumo escrever em português, para pessoas que sabem ler.

Além do mais, não preciso provar nada para alguém que sequer se preocupa em pesquisar as coisas.

Como esta comunidade é visitada por milhares de pessoas e provavelmente, alguém que realmente necessite disto.

if (typeof params == "undefined") {  
                request.send();  
            } else {  
                request.send(params);  
            }

Veja que se params são diferentes de undefined, ele processa o request utilizando params.
Neste caso, há duas opções, remover o else, o que, não ajuda, pois pode ocorrer situações em que ele seja necessário. Ou então, validar, verificar se params é igual a ‘’ e, em caso positivo, processar apenas a url.

if (typeof params == "undefined") {  
                request.send();  
            } else {  
                if(params != ''){//verifica se é diferente de vazio
                   request.send(params);  
               }else{
                     request.send();
              }
            }

Claro, a validação deve considerar o tipo de dado passado como variável params, que pode ser diferente deste que está no exemplo citado. Talvez seja até mais vantajoso validar se é vazio e executar o request.send() do que validar se não é, enfim, isso é parte das regras de negócio e isso eu não posso dizer.

Enfim, aos realmente interessados, é isto.
Caso surjam dificuldades, por gentileza, informem.

diegonogueira

Primeiro chega de discussão, tô afim de aprender algo e n discutir via interntet, e sim abrevio palavras, escrevo como bem entendo!
já tentei usar várias coisas e ainda n consegui fazer funcionar o js…
tentei usar o eval, mais n tive sucesso…
tentei adaptar o codigo do drsmachado, e tmb n tive sucesso…
alguma sugestão?
vi que é meio “errado” chamar js via ajax, mais infelizmente tenho que fazer isso aqui…
sugestões serão bem vinda

drsmachado

O que acontece? Como ficou depois das alterações?

diegonogueira

continuou do mesmo jeito…
eu axo q o params tá vindo em branco…
ele n deveria ter algo ?

drsmachado
diegonogueira:
continuou do mesmo jeito... eu axo q o params tá vindo em branco... ele n deveria ter algo ?
Posta o código do ajax e um dos locais onde você o chama (não esqueça da tag[code])
diegonogueira

é o mesmo codigo q vc usou pro exemplo…
axo q o params ta vindo em branco

thiagof

Olá diegonogueira!

Quando vc clica no notão para aparecer o texto sem o javascript, ele funciona?

fiz uns testes rapidos aqui e funcionou de boa o código que vc postou da primeira vez :smiley:

Com relação ao arquivo com JS:
o que acontece é que o navegador não executa o seu quando vc usa um p.innerHTML, isso porque o engine de JS do seu navegador já analisou a página no momento do document.load e o que é adicionado de tag no documento depois disso, é descartado :frowning:

o que vc ta tentando fazer não vai rolar, pelo menos, nunca rolou comigo quando eu quis fazer :frowning:

Para executar tags scripts vindas por ajax, vc vai ter que analizar o texto que vc recebeou do servidor (a sua pagina textoJS.php) e retirar/obter a tag e seu conteudo,
dai com o conteudo da tag script em mãos (ou seja, o codigo js em forma de texto puro), vc vai ter que executar a função eval(“seu texto/script aqui”)

só assim vai funcionar :smiley:

mas isso que vc ta tentando fazer (executar um script vindo do ajax) ninguem faz, é muito tosco e porco, principalmente um document.write(), use o proprio print do PHP para isso…

outra alternativa ao eval() é requisitar um documento JS e adicioná-lo ao da sua página… mas isso requer um pouco de esperiencia em javascript…

se estiver precisando muito disso para o seu trampo, a gente pode criar um aqui se quiser :smiley:

danilomatias19
Cara você está estudando ajax, não sei se te ajuda, mas coloquei os códigos comentados de uma aplicação simples para auxiliar quem está estudando:

A aplicação muito zuada:

<a href="http://presenteperfeito.99k.org/blog/ajax/form2.php" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/form2.php</a>

O formulário, com chamadas a funções ajax em outro arquivo javascript local (na mesma máquina do usuário, nada de php gerando)

<a href="http://presenteperfeito.99k.org/blog/ajax/form2_php1.html" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/form2_php1.html</a>

O javascript que possui a função enviarForm();

Essa função enviarForm(); é o envio de dados do formulário em ajax

<a href="http://presenteperfeito.99k.org/blog/ajax/sc_1html.html" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/sc_1html.html</a>

O processar3.php envia em formato texto:

<a href="http://presenteperfeito.99k.org/blog/ajax/processar3_html1.html" class="onebox" target="_blank">http://presenteperfeito.99k.org/blog/ajax/processar3_html1.html</a>

Fiz de uma maneira que ele envia respostas mesmo sem ter o formulário:

<a href="http://presenteperfeito.99k.org/blog/ajax/processar3.php" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/processar3.php</a>

Claro que é muito zuado, por que quando estava aprendendo, não tinha ideia do que colocar

O processar2:

<a href="http://presenteperfeito.99k.org/blog/ajax/processar2_html1.html" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/processar2_html1.html</a>

<a href="http://presenteperfeito.99k.org/blog/ajax/processar2.php" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/processar2.php</a>

Processar

<a href="http://presenteperfeito.99k.org/blog/ajax/processar_html1.html" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/processar_html1.html</a>

<a href="http://presenteperfeito.99k.org/blog/ajax/processar.php" data-bbcode="true">http://presenteperfeito.99k.org/blog/ajax/processar.php</a>

Quando o cara está estudando é normal ficar meio perdido mesmo …!
Não sei se isso ai acima lhe ajuda…
tomara que sim …!

diegonogueira

thiagof:
Olá diegonogueira!

Quando vc clica no notão para aparecer o texto sem o javascript, ele funciona?

fiz uns testes rapidos aqui e funcionou de boa o código que vc postou da primeira vez :smiley:

Com relação ao arquivo com JS:
o que acontece é que o navegador não executa o seu quando vc usa um p.innerHTML, isso porque o engine de JS do seu navegador já analisou a página no momento do document.load e o que é adicionado de tag no documento depois disso, é descartado :frowning:

o que vc ta tentando fazer não vai rolar, pelo menos, nunca rolou comigo quando eu quis fazer :frowning:

Para executar tags scripts vindas por ajax, vc vai ter que analizar o texto que vc recebeou do servidor (a sua pagina textoJS.php) e retirar/obter a tag e seu conteudo,
dai com o conteudo da tag script em mãos (ou seja, o codigo js em forma de texto puro), vc vai ter que executar a função eval(“seu texto/script aqui”)

só assim vai funcionar :smiley:

mas isso que vc ta tentando fazer (executar um script vindo do ajax) ninguem faz, é muito tosco e porco, principalmente um document.write(), use o proprio print do PHP para isso…

outra alternativa ao eval() é requisitar um documento JS e adicioná-lo ao da sua página… mas isso requer um pouco de esperiencia em javascript…

se estiver precisando muito disso para o seu trampo, a gente pode criar um aqui se quiser :D

É ai tranquilo?
O codigo funciona, a parte html e php, o problema é o js. Já me falaram algumas vezes que isso não é uma boa prática,
mais é que pra funcionar o que preciso, tem q ser dessa forma, forma suja rsrsrs…
Preciso rodar o js via ajax, e esses js nem vão tá no mesmo servidor, mais to tentando, aprendendo, ralando, tudo ao mesmo tempo pra tentar fazer funcionar.
Quando chamo o inner.html ele não roda mais js? Qual sua sugestão para poder funcionar o js que ta no arquivo textoJS.php dentro daquela div painel…
Agradeço desde já, obrigado

diegonogueira

function recebe(msg) {// Função que recebe a mensagem do servidor de transferencia e insere seu conteudo na área "painel" P = document.getElementById("painel"); P.innerHTML = msg; URL_ATUAL = tmpUrl; PARAMS_ATUAL = tmpParams; alert(eval(msg)); }

A variavel msg vem com todo o codigo da textoJS.php, se der um alert exibe tudo como texto.
Tem alguma forma de pegar a parte de js que ta como texto nessa variavel e fazer ela funcionar?

M

Tem mta gente nesse fórum que tem muito conhecimento mas infelizmente eh mto arrogante e prepotente… infelizmente esses não ajudam efetivamente na resolução de um problema… hoje é esse usuário que está com problemas e não conhece bem o ambiente legado em que as empresas nos colocam… sistemas que mais parecem colcha de retalhos… e esse é o cenário de grande parte das empresas… gerentes ou superiores que simplesmente querem que façamos de uma determinada forma e não da forma correta…

já que esses superiores querem gambiarras, ajudamos nosso colega a fazer essas gambiarras, por mais porcas que possam ser, mas não precisamos estressar por besteira… adicionei esse colega no msn e estou tentando entender melhor o problema pra poder ajudar… quem sabe mais gente daki possa fazer o msm…

Abs…

E

cara pega o firefox e usa o debug dele, 'firebug’
vai linha por linha e veja os erros, tem console, tem adicionar observador
assim fica mais fácil vc achar os erros

thiagof
diegonogueira

A variavel msg vem com todo o codigo da textoJS.php, se der um alert exibe tudo como texto.
Tem alguma forma de pegar a parte de js que ta como texto nessa variavel e fazer ela funcionar?

tenta o seguinte:

function recebe(msg) {
        /* essa expressao regular vai pegar o codigo JS dentro da msg */
        var er = new RegExp(/<script>.+?<\/script>/);
        var scriptCode = er.exec(msg);
        if(scriptCode != null) {
            scriptCode = scriptCode.replace(/</\/?script>/gim, ""); /* remove as tags <script> */
            alert(scriptCode) /* so para verificar se ta pegando o js corretamente */
            eval(scriptCode); /* executa o JS */
        }

        P = document.getElementById("painel");  
        P.innerHTML = msg;  
        URL_ATUAL = tmpUrl;  
        PARAMS_ATUAL = tmpParams;
}

coloquei uma expressão regular ali em cima para pegar o seu codigo JS dentro da msg e um alert() para ver se tá pegando o código corretamente...

só não sei como vc vai fazer para executar um document.write() no ponto exato que quer, mas faz o teste, tenta por uns alerts() na pagina textoJS.php para ver se o script é executado blz?

Não testei o código ainda, mas tenta ai para ver se dá blz :D

danilomatias19
Não sei se é exatamente isso que você quer ... [url]http://presenteperfeito.99k.org/blog/ajax/ajax.html[/url] O Colega Thiago, de outra solução que é tirar o que está antes
<script>no meio</script>
e depois de script e executar somente o que está no meio de
<script>no meio</script>
com o
eval();
Eu pensei em colocar em um array array[0] o código html e array[1] o código js Não se acostume, não respondo mais com o código completo ajax.html:
<!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>Documento simples para testar  o recebimento de código js, bem como apenas texto</title>
                <script type="text/javascript" src="ajax.js"></script>
                <style type='text/css'>                        
                        #tudo {
                                width:1004px;
                                margin-left:auto;
                                margin-right:auto;
                        }                      
                        #princ {
                                float:left;
                                width:inherit;
                                background-color:#CCC
                                }
                        #cab {
                                width:inherit;
                                height:100px
                                }                     
                        #nav {
                                width:inherit;
                                height:30px
                                }                      
                        #menu {
                                width: 200px;float:left
                                }                                 
                        #painel {
                                width:800px;
                                float:left;
                                background-color:#FAFAFA
                                }                                        
                        #rodape {
                                float:left;
                                width:1000px;
                                height:40px;
                                }                                     
                        .menuItem {
                                min-height:30px;
                                background-color:#FFC;
                                vertical-align:middle;
                                display:block;
                                width:inherit;
                                text-align:left;
                                border:none;
                                cursor:pointer;
                                margin-bottom:2px
                        }                                         
                        .novoLink {
                                cursor:pointer; color:#00C
                                }                      
                </style>

        </head>
        <body >
                <div id="tudo">
                        <div id='princ'>
                                        <div id='cab'>
                                        <p>Cabecalho</p>
                                        </div>
                                        <div id='nav'>
                                        <p>Nevagação principal</p>
                                        </div>
                                        <div id='menu'>
                                        <h3>Menu esquerdo</h3>
                                        <button class='menuItem' onClick='ajaxSOTEXTO("soTexto.php")' id="Sotexto">Só texto</button>
                                        <button class='menuItem' onClick='ajax("textoJS.php")' id="javascript">texto com javascript</button>
                                                                <!-- Note que para o  botão só texto eu chamo a função jaxSOTEXTO( ) e para javascript chamo
                                                                        ajax()
                                                                        isso é por que eu trato os dados do servidor de maneira diferente
                                                                        se é para executar javascript terei que mandar de uma forma diferente
                                                                       
                                                                        -->
                                        </div>
                                <hr>
                                        <div id='painel' >
                                                <p>Area de aplicação</p>                                             
                                        </div>
                                        <div id='rodape'>
                                                <p>Rodape</p>
                                        </div>
                        </div>
                </div>         
        </body>
</html>
/textoJS.php
<?php   
        echo "a1 = new Array(\"<p>ok executou html na div</p>\",\"window.alert(' Servidor mandou sting js');\");";                     
        /*para que nosso código funcione sou obrigado a mandar no formato a1 = new Array("código html", "código javascript");
        Sou obrigado por que eu tratei assim nos js, poderia mandar através de JSON, <xm>, conforme o gosto
        do fregues, mas se mando de maneiras diferentes trato de maneiras diferentes no meu js
        Mas como decidi mandar assim array["codigo html", "codigo js"], mando assim e trato assim no
        recebe( ) do ajax.js
        */
?>
soTexto.php
<?php echo "Ok est&aacute; enviando somente texto <br />";
                echo "Valores passados no array $_REQUEST<br />";
                print_r($_REQUEST);
                        /*aqui como ate o momento não sei como codificar os caracteres em iso-8859-1, sou obrigado a escrever o a com acento assim &aacute;
                          printo os valores do $_REQUEST
                          com print_r($_REQUEST);
                          Na verdade isso não precisa, mas em fim normalmente é necessário fazer algo
                          com o que recebe do cliente esse algo está no $_REQUEST['campo1', 'campo2', ...]
                        */     
?>
E finalmente o ajax.js:
// JavaScript Document
        /*!    
        *       xmlhttp.readyState == 0 - Não iniciado (Uninitialised)
        *       xmlhttp.readyState == 1 - Carregando (Loading)
        *       xmlhttp.readyState == 2 - Carregado (Loaded)
        *       xmlhttp.readyState == 3 - Interativo (Interactive)
        *       xmlhttp.readyState == 4 - Completado (Completed)                                        
        *       xmlhttp.status == 200 - ok || xmlhttp.status == 404 - objeto não encontrado
        *       Essas variáveis, REQ_FIM e  REQ_OK , servem apenas para ficar mais lógico o status do ajax
!*/
        var request = false;   
        var REQ_FIM = 4;
        var REQ_OK = 200;
        var campos="campo1="+"esseEUmCampo1"+"&"+"campo2"+"="+"esseEhOcampo2";
        /*!  Essa variável campos, não é usada mas se todos os dados dos formulários poderiam estar nela separados por &, como sugere ali, ela é uma string que conteria todos os campos!*/
        function stateChangeListener() { //Funcao ativada a cada mudanca de status na comunicacao com o servidor de transferencia
                if (request.readyState != REQ_FIM) {
                        return;
                }              
                if (request.status == REQ_OK) {
                        recebe(request.responseText);
                        request=false;
                }
                return;
        }
        /*!  Função que é chamada quando muda o status da comunicaçãod o ajax, essa especificamente  é chamada pelo ajax do botão   texto, id="Sotexto" !*/
        function stateChangeListenerSOTEXTO() { //Função ativada a cada mudança de status na comunicação com o servidor de transferencia
                if (request.readyState != REQ_FIM) {
                        return;
                }
               
                if (request.status == REQ_OK) {
                        /* ok se os dados chegaram do servidor, chama a função recebeSOTEXTO(request.responseText);  request.responseText  contém os dados chegaram do servidor*/
                        recebeSOTEXTO(request.responseText);
                        request=false;
                }
                return;
        }
        function ajaxSOTEXTO(url,params) {                     
                if(window.XMLHttpRequest) {
                        request = new window.XMLHttpRequest();
                } else if (window.ActiveXObject) {
                        request = new window.ActiveXObject('Microsoft.XMLHTTP');
                }
                if(request) {
                        request.onreadystatechange = stateChangeListenerSOTEXTO;
                        request.open("GET", url+'?'+campos, true);
                        request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                        if (typeof params == "undefined") {
                                request.send();
                        } else {
                                request.send(null);
                                /*como estou passando por GET não devo enviar os dados por aqui, pois eles  estão na url*/
                        }
                }
        }       
        function ajax(url,params) {// Função que envia a url e seus parametros para o servidor de transferencia (AJAX)         
                if(window.XMLHttpRequest) {
                        request = new window.XMLHttpRequest();
                } else if (window.ActiveXObject) {
                        request = new window.ActiveXObject('Microsoft.XMLHTTP');
                }
                if(request) {
                        request.onreadystatechange = stateChangeListener;
                        request.open("POST", url, true);
                        request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                        if (typeof params == "undefined") {
                                request.send();
                        } else {
                                request.send(params);
                        }
                }
        }
        /*! função que recebe os dados do servidor e coloca na div além de executar o javascript passado no array!*/
        function recebe(msg) {
          var  P = document.getElementById("painel");         
                        if(typeof msg=="undefined")
                        {    
                                eval(msg);
                                document.getElementById("painel").insertAdjacentHTML('beforeend', msg);                        
                        }else
                        {//se é um array a1["<p>ok executou html na div</p>", "window.alert(' Servidor mandou sting js');"]  obrigatoriamente te que ser o html e msg[1] o código javascript, mas não verifico se realmente é se mandar errado da pau
                                         //torna a string que veio do servidor um código js, ela deixa de ser string e passa a ser código
                                        //estamos esperando que seja:
                                        //a1 = new Array("<p>ok executou html na div</p>","window.alert(' Servidor mandou sting js');");
                                        //não faço nenhum tipo de teste nem controle de erro aqui para funcionar
                                        // obrigatoriamente a string que o servidor mandar tem que ser
                                        //a1 = new Array("código Html", "código javascript");
                                        //necessariamente nessa ordem
                                        eval(msg);
                                        /* como a1[1]) também é uma string de código js, eu faço ela efeticamente virar um código com o eval */
                                        eval(a1[1]);                                   
                                        document.getElementById("painel").insertAdjacentHTML('beforeend', a1[0]);//concateno a1[0] ao último elementodo div
                                        document.getElementById("painel").insertAdjacentHTML('beforeend', "Javascipt passado em a[1]:<br />");//concateno ao último elementodo div
                                        document.getElementById("painel").insertAdjacentHTML('beforeend', a1[1]);//concateno a1[1] ao último elementodo div
                                document.getElementById("painel").insertAdjacentHTML('beforeend', "<br />");//concateno ao último elementodo div
                        }              
        }
        function recebeSOTEXTO(msg) {     
                document.getElementById("painel").insertAdjacentHTML('beforeend', msg); //concateno o que veio do servidor ao último elementodo div
        }

Bom está inteirinho ai, para quem está começando a estudar ajax, para saber ao menos como começar ...
Como está no fórum, nem adianta tentar dizer que entendeu sem entender, então estuda entende e faça o seu ...
Ah aprenda a utilizar firebug, google developer tools, o debug do ie, comece apertanto F12, se não sabe como verificar qual é o valor de uma variável no firebug, pergunte para alguém de preferência pessoalmente!

Criado 25 de abril de 2012
Ultima resposta 2 de mai. de 2012
Respostas 28
Participantes 6