Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

micox

[Resolvido] [Dica] Função rápida pra AJAX

Por , em Javascript

Recommended Posts

FileasFogg    0

FileasFogg
Postado

Micox & demais senhores... Fiz uma pequena alteração na função extraiScript para poder chamar arquivos externos...

Espero que seja de utilidade a todos !

 

 

Abraços a todos

 

PS: Fiz o esquema meio que na comparação com os esquemas do Micox se existir uma maneira mais simples/melhor por favor postem ! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

function extraiScript(texto){ var ini = 0;   while (ini!=-1) {   ini = texto.indexOf('<script', ini);		  if (ini >=0) {   // Primeira alteração para pegar o SRC do arquivo externo ******   var ini1 = texto.indexOf('SRC="',ini)+5;     var fim1 = texto.indexOf('"></SCRIPT>', ini);		         // ********** Fim    ini = texto.indexOf('>', ini) + 1;	      var fim = texto.indexOf('</SCRIPT>', ini);		      codigo = texto.substring(ini,fim);       novo = document.createElement("script")     // *** Verifica se existe um arquivo externo a ser chamado e "seta" o atributo no elemento "script"   if (ini1 >= 0 && fim1 >= 0) {  	var att = texto.substring(ini1,fim1);	 novo.setAttribute("src",att);   }   // ****** Fim      novo.text = codigo;	     document.body.appendChild(novo);		  }	 }}

Compartilhar este post

Link para o post
Compartilhar em outros sites

falke    0

falke
Postado

olah, estou usando as funões do micox q gostei mto, porém estou com problemas na passagens de variaveis pela url, na div carregada nao chegam as variaveis..já tentei dessa forma que o micox postou, mas nada... http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

opa. Valeu aí guilherme.

 

Acho que só faltou uma correção aí no onclick.

 

Deverá ter um return false pra cancelar a navegação nativa do link, não? :)

 

<a href="home.php?b=2" onclick="ajaxGet(this.href,document.getElementById('meio'),true); return false">LINK</a>

 

Lá na metade dessa postagem aqui eu explico isso se interessar :jioa:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zenner    0

Zenner
Postado

Olá pessoal...

 

Seguinte. Usei a função e está tudo funcionando certinho.. Porém gostaria de fazer algo e não consegui fazer usando a dita cuja .

 

 

imaginemos os links..

 

<a href="teste1.php">xxx</a>

<a href="teste2.php">xxx</a>

<a href="teste3.php">xxx</a>

<a href="teste4.php">xxx</a>

<a href="teste5.php">xxx</a>

 

criei uma funcao q ao ser chamada, transfere o href escrito para um onclick=ajaxget... e coloca no lugar do href um void(0); porém nao está funcionando..

 

segue abaixo a funcao q é chamada no onload do index..

 

function carregaajax() {

if(!document.getElementsByTagName) return;

var anchors = document.getElementsByTagName("a");

for(var i=0; i<anchors.length; i++)

{

var anchor = anchors;

var url = anchor.href;

anchor.onClick = function()

{

ajaxGet(url,document.getElementById('conteudo'),true);

}

anchor.href = "java script:void(0);"

}

}

 

 

trocando em miúdos...

 

se insiro na unha o link dentro da função (fazendo todos ficarem com um link único - ajaxGet('teste1.php',document.getElementById('conteudo'),true);

) ele funciona, mas se peço pra ele capturar o link do href e colcoar na funcao dá erro...

 

o q estaria errado e como fazer funcionar???

 

 

Aproveito pra sugerir pra colocar efeitos de transição junto do get, passando na função após o true o nome do efeito.

efeitos tipo esses:

http://labs.adobe.com/technologies/spry/demos/effects/

Compartilhar este post

Link para o post
Compartilhar em outros sites

dilnet    0

dilnet
Postado

muito boa esta funcao... maravilha..... parabens micox

mas nao estou conseguindo carregar este script abaixo....o pagecontro1 nao aparece o <script> não funciona.

estou usando a classe da qooxdoo...(qx.js)

 

<html ><head><title>cadcliente</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript" src="qooxdoo/framework/script/qx.js"></script><script type="text/javascript">  qx.log.Logger.ROOT_LOGGER.setMinLevel(qx.log.Logger.LEVEL_FATAL);  qx.manager.object.AliasManager.getInstance().add("static", "qooxdoo/framework/resource/static/");  qx.manager.object.AliasManager.getInstance().add("widget", "qooxdoo/framework/resource/widget/windows/");  qx.manager.object.AliasManager.getInstance().add("icon", "qooxdoo/framework/resource/icon/VistaInspirate/");</script></head><body  style=" margin-left: 0px;  margin-top: 0px;  margin-right: 0px;  margin-bottom: 0px; "  ><form style="margin-bottom: 0" id="cadcliente" name="cadcliente" method="post"  action="/Cadcliente.php"><script type="text/javascript">	var d = qx.ui.core.ClientDocument.getInstance();	d.setOverflow("scrollY");	d.setBackgroundColor(null);</script><table  width="800"   style="height:600px"  border="0" cellpadding="0" cellspacing="0"  ><tr><td valign="top"><div id="PageControl1_outer" style="Z-INDEX: 0; LEFT: 40px; WIDTH: 556px; POSITION: absolute; TOP: 72px; HEIGHT: 244px"><input type="hidden" id="PageControl1_state" name="PageControl1_state" value="" /><div id="PageControl1"></div><script type="text/javascript">  var d = qx.ui.core.ClientDocument.getInstance();  var inline_div = new qx.ui.basic.Inline("PageControl1");  inline_div.setHeight("auto");  inline_div.setWidth("auto");  var PageControl1 = new qx.ui.pageview.tabview.TabView;  PageControl1.setLeft(0);  PageControl1.setTop(0);  PageControl1.setWidth(556);  PageControl1.setHeight(244);  PageControl1.setPlaceBarOnTop(true);  var tabPageControl1_1 = new qx.ui.pageview.tabview.Button("1");  var tabPageControl1_2 = new qx.ui.pageview.tabview.Button("2");  var tabPageControl1_3 = new qx.ui.pageview.tabview.Button("3");  var tabPageControl1_4 = new qx.ui.pageview.tabview.Button("4");  var tabPageControl1_5 = new qx.ui.pageview.tabview.Button("5");  tabPageControl1_1.setChecked(true);  PageControl1.getBar().add(tabPageControl1_1,tabPageControl1_2,tabPageControl1_3,abPageControl1_4,tabPageControl1_5);  var pagePageControl1_1 = new qx.ui.pageview.tabview.Page(tabPageControl1_1);  var pagePageControl1_2 = new qx.ui.pageview.tabview.Page(tabPageControl1_2);  var pagePageControl1_3 = new qx.ui.pageview.tabview.Page(tabPageControl1_3);  var pagePageControl1_4 = new qx.ui.pageview.tabview.Page(tabPageControl1_4);  var pagePageControl1_5 = new qx.ui.pageview.tabview.Page(tabPageControl1_5);  PageControl1.getPane().add(pagePageControl1_1,pagePageControl1_2,pagePageControl_3,pagePageControl1_4,pagePageControl1_5);  var container = new qx.ui.basic.Atom("<input type=\"text\" id=\"edtNome\" name=\"edtNome\" value=\"\" style=\" font-family: Verdana; font-size: 10px;  height:20px;width:121px;\"	tabindex=\"0\"	/>");  container.setLeft(7);  container.setTop(29);  container.setWidth(121);  container.setHeight(21);  pagePageControl1_1.add(container);  container.addEventListener("appear", function(e) {  }, container);   var container = new qx.ui.basic.Atom("<input type=\"submit\" id=\"btnSalvar\" name=\"btnSalvar\" value=\"btnSalvar\"  style=\" font-family: Verdana; font-size: 10px;  height:25px;width:75px;\"   tabindex=\"0\"	/>");  container.setLeft(9);  container.setTop(69);  container.setWidth(75);  container.setHeight(25);  pagePageControl1_1.add(container);  container.addEventListener("appear", function(e) {  }, container);   PageControl1.setVisibility(true);  d.add(inline_div);  inline_div.add(PageControl1);</script></div></td></tr></table></form></body></html><!-- cadcliente end -->

desde ja agradeço a todos.............

 

print screen

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Opa pessoal, desculpem o sumiço.Bora lá:1) FileasFogg - Valeu cara, em breve solto uma nova versão do meu script mais completa2) falke - explica melhor, se possível com códigos (e em outro post)3) zenner - Não use desta forma. Asism você não consegue cancelar a navegação do link. Pra cancelar a navegação do link é só colocar um return false ao final da função que trata o onclick.Sobre os efeitos, em breve solto uma nova versão mais customizável. VAleus.4) dilnet - não vi chamada à minha função em nenhum lugar aí ué :(Pronto, esqueci alguém?

Compartilhar este post

Link para o post
Compartilhar em outros sites

fael    1

fael
Postado

Mesmo com GET como eu faço então? Aonde eu chamo a função? Atualmente estou fazendo manualmente, pegando valor por valor com document.getElementById com uma função e depois chamo o AJAX, passando como parâmetro a página e seus

É isso mesmo que tem que ser feito. Mas voce me deu uma ótima idéia de função pra fazer. Uma função que pegue o form e já mande ele por ajax.Um dia eu faço e posto aqui.té mais...
Cara, tu chegou a fazer isso http://forum.imasters.com.br/public/style_emoticons/default/grin.gif ? Valeu! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tonare    0

Tonare
Postado

Ola MicoxShow de bola sua função. Está de parabéns!!!Estou com um pequeno problema quanto a acentuação. Como faço para corrigir? Pois meus caracteres acentuados não estão sendo exibidos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Tenta deixar explícito no início do seu código server-side o seu charset. Tipo:header("Content-Type: text/html; charset=ISO-8859-1",true) //se for phpou Response.Charset="ISO-8859-1" 'se for ASPe também setar o mesmo charset no meta-head

Compartilhar este post

Link para o post
Compartilhar em outros sites

lfpcosta    0

lfpcosta
Postado

Parabens pelo SCRIPT !

 

Sou novato em relação ao AJAX.

 

Baixei e estou fazendo testes para entender como funciona.

A muito tempo estava tentando encontrar um script AJAX escrito de uma forma que consiga entender.

E o seu, faz exatamento o que eu precisava.

Assim que finalizar meus testes, predendo usa-lo para minhas aplicações, sem deixar de dar o mereciso crédito ao autor.

 

Muito o brigado, abraços

 

Luiz Fernando

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Motta    0

Thiago Motta
Postado

fala kra

muito bom esta funcao

tem uma semana q estou no ajax, bom...

 

dei uma adaptada para funcionar do jeito que quero

 

 

1º) 

criei uma funcao 
function DefinirImagemCarregando(caminhoImagem)
{
	_caminhoImagem = caminhoImagem;
}

esta funcao eu faço:

DefinirImagemCarregando("<img src='../img/ajax_aguarde2.gif'>");
AjaxGet(...)

e a imagem é exibida junto com o "Carregando..."

 

 

 

2º)

passei um outro parametro para a funcao AjaxGet
function AjaxGet(url, modo, elemento_retorno, exibe_carregando, dados)
{
}


foi o parametro dados
este parametro pode vir da seguinte maneira:
dados = "login=" + varLogin + "&dado=VERIFICAR_SE_LOGIN_EXISTE";

entao fica:
AjaxGet("usuario.php", "POST", document.getElementById("molduraVerificacaoLogin"), true, dados);

minha paging usuario.php ira pegar o login, fazer a verificacao, quando eu tratar, imprimo USUARIO_ENCONTRADO ou USUARIO_NAO_ENCONTRADO

 

até aqui beleza...

 

o que eu preciso é pegar o resultado USUARIO_ENCONTRADO ou USUARIO_NAO_ENCONTRADO, na pagina html e com o if exibir o que eu desejo, tipo:

 

 

var dados;
		dados = "login=" + varLogin + "&dado=VERIFICAR_SE_LOGIN_EXISTE";
		
		DefinirImagemCarregando("<img src='../img/ajax_aguarde2.gif'>");
		AjaxGet("usuario.php", "POST", document.getElementById("molduraVerificacaoLogin"), true, dados);

		var retorno;
		retorno = AjaxValorRetorno();

		if (retorno == "USUARIO_NAO_ENCONTRADO")
		{
			var msg;
			msg = "<img src='../img/confirmado.gif'> Login disponível para ser utilizado.";
			ExibirDiv("molduraVerificacaoLogin", msg);
		}
		else
		if (retorno == "USUARIO_ENCONTRADO")
		{
			var msg;
			msg = "<img src='../img/icoContra.gif'> Este login já esta sendo utilizado.";
			ExibirDiv("molduraVerificacaoLogin", msg);
		}

 

mas acontece que desta forma o resultado nao é exibido, pois como é chamado logo apos nao da tempo de fazer a verificacao

 

queria saber como posso contornar isso

ps.: como sou novo no ajax, talvez esteja fazendo coisa errada, ou tem um jeito mais correto para fazer o q eu quero

 

thiago

Compartilhar este post

Link para o post
Compartilhar em outros sites

FinosBoy    0

FinosBoy
Postado

Olá a todos...

sou novo nesse forum e tbm na utilização de AJAX...

achei muito interesante essa sua biblioteca Micox, e a estou utilizando... PARABENS

 

porem estou com um problema!!!

criei um select que altera outro select, até ai não devia ser nada de mais, mas não esta dando certo..

acho eu q seja o formato da resposta do servidor pois ele retorna o erro 500...

 

vo por o codigo da pagina e o php tbm aki...

 

alguem me ajuda!!!!

 

index.php

<div class='codetop'>CODE</div><div class='codemain' style='height:300px;white-space:pre;overflow-y:auto'><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org./TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" href="js/c1.css" type"text/css">

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Documento sem título</title>

</head>

 

<script language="javascript">

function selectDin(secao,parametro,alvo){

var url = "http://localhost/php/consult.php?secao="+encodeURIComponent(parametro);

ajaxGet(url,document.getElementById(alvo),true);

}

</script>

 

<body>

<div class="estrutura">

<table width="451" height="200" border="0" background="images/layout.jpg">

<tr height="20">

<td width="125"><center>

<select id="sel_origem" name="sel_origem" onChange="selectDin('select1',this.options[this.selectedIndex].value,'sel_alvo')">

<?php include "php/mostraSelect.php"; ?>

</select>

</center></td>

<td width="125"><center>

<select id="sel_alvo" name="sel_alvo">

<option>Escolha um setor</option>

</select>

</center></td>

</tr>

<div>

</body>

</html></div>

 

consult.php

<div class='codetop'>CODE</div><div class='codemain' style='height:300px;white-space:pre;overflow-y:auto'><?php

include "conex.php";

$setor=$_GET["select1"];

$res = mysqli_query($con, "SELECT e.nome FROM empresa e, setor s WHERE e.cod = s.cod AND s.nome_setor = '$setor'");

 

$arr = new array();

 

while($linha=mysql_fetch_array($res)) {

$arr = $linha["nome"];

}

 

echo $arr;

 

?> </div>

 

alguem me ajuda !!!

:wacko:

Compartilhar este post

Link para o post
Compartilhar em outros sites

faiad    0

faiad
Postado

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Boa Noite! Gostei muito do framework, mas nào estou conseguido fazer uma segunda consulta com ele.

Estou montando um sistema e tenho uma tela de consulta de CPFs. Faço a primeira consulta perfeitamente, mas quando tento a segunda consulta, não retorna os valores.

você tem alguma idéia?

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdamame    0

douglasdamame
Postado

Como faço para colocar uma imagem junto com o carregando...

 

Tentei como o Thiago escreveiu acima, mas não funcionou

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdamame    0

douglasdamame
Postado

Só esqueci de agradecer!!

 

VALEU MICOX.... PARABÉNS!!!!

 

SHOW ESTE AJAX, JÁ CONSEGUI FAZER MUITAS COISAS COM ELE!!!

 

Só falta eu conseguir colocar a imagem junto ao carregando..... hehehehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

webruno    0

webruno
Postado

E aí galera...

 

só uma complementação pro script...

 

quem já tentou usar esse script de maneira síncrona (SJAX), ou seja, alterando a linha ajax1.open("GET",url,true); para ajax1.open("GET",url,false); pôde perceber que no FireFox não funciona, apenas no IE.

 

Isso acontece porque como a execução é síncrona ela trava a página até terminar de processar para então continuar o carregamento. Sendo assim o "onreadystatechange" nesse caso não tem necessidade. E por isso no FF não funciona.

 

Fiz essa alteração simples pra quem tiver o mesmo problema:

 

function ajaxGet(url, elemento_retorno, exibe_carregando, assincrono_ou_sincrono){
	/******
	* ajaxGet - Coloca o retorno de uma url em um elemento qualquer
	* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
	* A funçao é grande, coloque-a em um arquivo .js separado.
	* Versao: 1.2 - 20/04/2006
	* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - elmicox.blogspot.com
	* Parametros:
	* url: string; elemento_retorno: object||string; exibe_carregando:boolean; assincrono_ou_sincrono:boolean (true para assincrono, false para sincrono)
	*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),
	*	exibe o retorno no innerHTML / value / options do elemento
	*  - Se elemento_retorno for o nome de uma variavel
	*	(o nome da variável deve ser declarado por string, pois será feito um eval)
	*	a funçao irá atribuir o retorno a variável ao receber a url.
	*******/
	var ajax1 = pegaAjax();
	if(ajax1){
		url = antiCacheRand(url)
		if(assincrono_ou_sincrono){ //Se for true será AJAX (assincrono); Se for false será SJAX (sincrono)
			ajax1.onreadystatechange = ajaxOnReady;
		}
		ajax1.open("GET",url,assincrono_ou_sincrono);
		//ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");
		ajax1.setRequestHeader("Cache-Control", "no-cache");
		ajax1.setRequestHeader("Pragma", "no-cache");
		if(exibe_carregando){ put("Carregando ...")	}
		ajax1.send(null);
		if(!assincrono_ou_sincrono){ //Se for sincrono...
			return ajax1.responseText;
		}	
		return true;
	}else{
		return false;
	}


... continua igual ao script anterior ...

 

 

Aí você pergunta: pra que usar o síncrono??

 

Pra você retornar o resultado para uma variável por exemplo.

 

Ex.:

 

var msg = ajaxGet(URL, "", false, false);
alert(msg);

Com o assíncrono você não consegue fazer isso.

 

 

 

Se eu tiver errado me corrijam, por favor.

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito