Jump to content


Photo

Ajax - Multi Request Call


  • Faça o login para participar
7 replies to this topic

#1 BierMann

BierMann

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Masculino

Posted 17/01/2010, 19:59

Bom, pesquisei e tentei desenvolver hoje o dia inteiro mas não fui bem sucedido.
(pesquisei tanto no forum que ele ficava mandando eu esperar meio minuto por causa de flood nas pesquisas)

Alguém já implementou multiplas requisições em uma página?

Eu não consegui fazer funcionar.

Fiz da seguinte maneira:
function alimentaDiv(id, url, dados)
{
    var http = getHTTPObject();
    http.open("POST", url+dados, true);
    http.onreadystatechange = function (){
    if (http.readyState == 4) {
          document.getElementById(id).innerHTML =  http.responseText;
      }
      else{
          document.getElementById(id).innerHTML = "<img border=none src=\"img/load.gif\" /></br></br>";
      }
    };
    http.send(null);
}

function alimentaDiv2(id, url, dados)
{
    var http2 = getHTTPObject();
    http2.open("POST", url+dados, true);
    http2.onreadystatechange = function (){
    if (http2.readyState == 4) {
          document.getElementById(id).innerHTML =  http2.responseText;
      }
      else{
          document.getElementById(id).innerHTML = "<img border=none src=\"img/load.gif\" /></br></br>";
      }
    };
    http2.send(null);
}


function getHTTPObject(){
        if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
        else if (window.XMLHttpRequest)return new XMLHttpRequest();
        else {alert("Seu navegador não suporta AJAX. Instale uma versão mais atualizada.");return null;}}

alimentaDiv é chamado no onLoad do body.
alimentaDiv2 é chamado para alimentar uma subdiv, através de um click, dentro da div principal carregada pela alimentaDiv.

O que acontece:
alimentaDiv funciona perfeitamente, assim como a alimentaDiv2.

Dããã, mas então qual o problema?
Quando alimentaDiv2 é finalizada, por algum motivo a alimentaDiv é rechamada, anulando o que a alimentaDiv2 fez.

Fiz alguns testes e descobri que até depois do
"http.send(null)"
da alimentaDiv2, ela funciona perfeitamente, ou seja, carrega o conteúdo na div secundária.
O problema está além desta função...

Alguma solução sugerida?

Att.,
Felipe

#2 Goku Jr

Goku Jr

    Nilson

  • Usuários
  • 3757 posts
  • Sexo:Masculino

Posted 17/01/2010, 21:07

Olá, então eu já fiz, estou usando pra um sisteminha tipo MSN que estou terminando de desenvolver para empresa onde trabalho! ta funcionando de boa... as requisições que são todas para o BANCO de DADOS =) então nunca perderá as ultimas informações alteradas... a menos que tenha nova informação no banco de dados e a checagem e de 1s ou até 2s...

mas em fim, explique extamente o que você está fazendo para que possamos ajudar!

T+
-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#3 BierMann

BierMann

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Masculino

Posted 17/01/2010, 21:39

É coisa simples, nem tem requisição a banco de dados.

Div principal (a que carrega o conteúdo principal)

<div id="main" class="main" align="center"></div>


Ao clicar no menu "Empresa", por exemplo, é chamado a alimentaDiv, que imprime as informações do empresa.php na div principal:
<?php
echo <<<EOT

<img src="img/quemSomos.png" border="0"/>

<p class=normal>bla bla bla</p>
EOT;
?>

Até ai beleza.
A página inicial carrega 2 divs dentro da div principal.
Do lado direito temos uma lista de notícias, e do lado esquerdo o conteúdo delas (futuramente com banco de dados).
Código referente à elas:
<?php
echo <<<EOT
<div class="noticias" id="noticias">
    <p>Últimas notícias:</p>
<hr/>
    <a href="" onclick="alimentaDiv2('cxNoticia', 'geraNoticia.php?', 'num=1')">16/10/2010 - Noticia 1</a>
<hr/>
    <a href="" onclick="alimentaDiv2('cxNoticia', 'geraNoticia.php?', 'num=2')">15/10/2010 - Noticia 2</a>
</div>
<div class="cxNoticia" id="cxNoticia"></div>
EOT;
?>

Ao clicar em uma notícia o conteúdo dela é carregado através da página geraNoticia.php:
<?php
if ($_GET["num"]==1)
    echo "bla bla bla noticia 1";
else if ($_GET["num"]==2)
    echo "bla bla bla noticia 2.";
?>

A questão é: ao clicar no titulo da noticia a ser carregada, o conteúdo da mesma é carregado na subdiv (cxNoticia), porém ao finalizar a requisição, é feito um "refresh" na página, como se eu mandasse fazer um alimentaDiv recarregando a página principal (sim, depois de terminar a alimentaDiv2 ele executa a alimentaDiv).

Podem me ajudar?

Edição feita por: BierMann, 17/01/2010, 21:44.


#4 Goku Jr

Goku Jr

    Nilson

  • Usuários
  • 3757 posts
  • Sexo:Masculino

Posted 18/01/2010, 07:46

Depois que você atualiza a DIV cxNoticia, você esta dando um reload(true) nesta div ou um reflesh de HTML ou de JS?

[]'s
-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#5 BierMann

BierMann

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Masculino

Posted 18/01/2010, 20:55

Depois que você atualiza a DIV cxNoticia, você esta dando um reload(true) nesta div ou um reflesh de HTML ou de JS?

[]'s


Nem... está tudo ai...

Não sei porque ele "rechama" a atualizaDiv.

Se eu utilizar uma função só (não utilizando a atualizaDiv2) acontece a mesma coisa.

#6 Goku Jr

Goku Jr

    Nilson

  • Usuários
  • 3757 posts
  • Sexo:Masculino

Posted 20/01/2010, 08:16

Olá desculpe a demora pra responder! estranho mesmo, se você não usar o reflesh do HTML, JS e nem PHP e ainda não da um reload(true) em algum DIV não deveria "atualizar" as outras DIV's. bom vou usar esse seu código pra fazer uns testes aqui. qualquer novidade eu te aviso.

T+

Então montei aqui um exemplo com o codigo que você passou, porém mudei de POST para GET no AJAX e não deixei pra armazenar em CACHE as informações. no caso é apenas para fazer teste.

página: teste1.php
<script>
function alimentaDiv(id, url, dados) {
 var http = getHTTPObject();
  http.open("GET", noCache(url + '&numberTAB=' + dados), true);
  http.onreadystatechange = function (){
  if (http.readyState == 4) {
  document.getElementById(id).innerHTML =  http.responseText;
  }      else{
   document.getElementById(id).innerHTML = "Aguarda ae po !!!";
   }
   };
    http.send(null);
    }

    function alimentaDiv2(id, url, dados){
     var http2 = getHTTPObject();
     http2.open("GET", noCache(url + '&numberTAB=' + dados), true);
     http2.onreadystatechange = function (){
     if (http2.readyState == 4) {
     document.getElementById(id).innerHTML =  http2.responseText;
     }      else{
     document.getElementById(id).innerHTML = "Aguarda ae po !!!";
     }
     };
     http2.send(null);
     }

     function getHTTPObject(){
     if (window.ActiveXObject)
      return new ActiveXObject("Microsoft.XMLHTTP");
     else if (window.XMLHttpRequest)
      return new XMLHttpRequest();
     else {
      alert("Seu navegador não suporta AJAX. Instale uma versão mais atualizada.");
      return null;
     }
}
 function noCache(uri) {
  return uri.concat(/\?/.test(uri) ? "&" : "?", "noCache=", (new Date).getTime(), ".", Math.random()*1234567);
 };
</script>

 <body style='padding: 0; margin: 0'>
  <div style='width:100%; height: 228px;'>
   <div style='width:40%; height: 25px; border: 1px solid #000; float: left; background-color: #DFDFDF;'><strong>&nbsp;TABUADA DO 2</strong></div>
   <div style='width:40%; height: 25px; border: 1px solid #000; float: left; background-color: #DFDFDF;'><strong>&nbsp;TABUADA DO 5</strong></div>
   <div id='teste1' style='width:40%; height: 200px; border: 1px solid #000; float: left;'></div>
   <div id='teste2' style='width:40%; height: 200px; border: 1px solid #f00; float: left;'></div>
  </div>
  
 <BR><BR>
 
  <input type='button' value='VER TABUADA 2' style='width:180px;' onclick="alimentaDiv('teste1', 'teste2.php?TAB=<?php echo md5('tab'); ?>', 2);" />
  <input type='button' value='VER TABUADA 5' style='width:180px;' onclick="alimentaDiv2('teste2', 'teste2.php?TAB=<?php echo md5('tab'); ?>', 5);" />
 <BR><BR>
  <input type='button' value='LIMPAR TABUADA 2' style='width:180px;' onclick="javascript: document.getElementById('teste1').innerHTML = '';" />
  <input type='button' value='LIMPAR TABUADA 5' style='width:180px;' onclick="javascript: document.getElementById('teste2').innerHTML = '';" />

 </body>

E na página de processamento.

página: teste2.php
<?php

if ($_GET['TAB'] == md5('tab')) {
 for($x = 1; $x <= 10; $x++)
  echo "{$_GET['numberTAB']}x{$x} = " . $x * $_GET['numberTAB'] . '<br />';
}

?>

Qualquer dúvida, e só falar.!
-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951

#7 BierMann

BierMann

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Masculino

Posted 20/01/2010, 18:59

Olá!

Então, fiz do jeito que você colocou ai, mas continuo com o mesmo problema.

Pelo que percebi o problema está em fazer requisições em páginas diferentes.

Se fizer diversas requisições na mesma página não dá problema algum.

=/

Vou fazer mais algumas tentativas...
Se ninguém resolver antes de mim eu coloco o que aconteceu aqui!

Valeu!

#8 Goku Jr

Goku Jr

    Nilson

  • Usuários
  • 3757 posts
  • Sexo:Masculino

Posted 21/01/2010, 10:08

Estranho em sí não tem lógica isso que você falou, porque o exemplo que coloquei ele envia para uma única página com apenas uma instrução e as duas divs "praticamente" usam a mesma instrução. porém, elas não se atualizam a menos que eu pressione algum botão =/.

Você está desenvolvendo na sua maquina local ou tá em algum endereço na internet para que possamos acessar e visualizar se tem algo a mais ?

T+
-----------------------------------------------------------------------
PALMEIRAS - Primeiro campeão do mundo em 1951




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq