Multiple AJAX-calls at the same time

  • zooounds
  • Born
  • Born
  • zooounds
  • Posts: 4
  • Loc: Sweden

Post 3+ Months Ago

Hi!

I'm trying to call multiple AJAX calls at the same time.

The problem is that only the latest call seems to return data and update the page properly.

Is it because my xmlHTTP object is global?

Any way to solve this?

This is my code:

Code: [ Select ]

   function GetXmlHttpObject()
   {
    var objXMLHttp = null;

    if (window.XMLHttpRequest)
    {
     objXMLHttp = new XMLHttpRequest();

     if (objXMLHttp.overrideMimeType)
     {
      objXMLHttp.overrideMimeType('text/xml');
     }
    }
    else if (window.ActiveXObject)
    {
     objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return objXMLHttp;
   }


   function loadChannelData(destination)
   {
    xmlHttp = GetXmlHttpObject();

    if (xmlHttp == null)
    {
     return;
    }

    var url = "test_xml.php?destination=" + destination;

    xmlHttp.onreadystatechange = insertChannelData;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
   }

   function insertChannelData()
   {
    if (xmlHttp.readyState == 4)
    {
     var response  = xmlHttp.responseXML;
     var destination = response.getElementsByTagName('destination')[0].firstChild.data;
     var data    = response.getElementsByTagName('data')[0].firstChild.data;

     document.getElementById(destination).innerHTML = data;
    }
   }

   loadChannelData("alpha");
   loadChannelData("beta");
   loadChannelData("gamma");
  1.    function GetXmlHttpObject()
  2.    {
  3.     var objXMLHttp = null;
  4.     if (window.XMLHttpRequest)
  5.     {
  6.      objXMLHttp = new XMLHttpRequest();
  7.      if (objXMLHttp.overrideMimeType)
  8.      {
  9.       objXMLHttp.overrideMimeType('text/xml');
  10.      }
  11.     }
  12.     else if (window.ActiveXObject)
  13.     {
  14.      objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.     }
  16.     return objXMLHttp;
  17.    }
  18.    function loadChannelData(destination)
  19.    {
  20.     xmlHttp = GetXmlHttpObject();
  21.     if (xmlHttp == null)
  22.     {
  23.      return;
  24.     }
  25.     var url = "test_xml.php?destination=" + destination;
  26.     xmlHttp.onreadystatechange = insertChannelData;
  27.     xmlHttp.open("GET", url, true);
  28.     xmlHttp.send(null);
  29.    }
  30.    function insertChannelData()
  31.    {
  32.     if (xmlHttp.readyState == 4)
  33.     {
  34.      var response  = xmlHttp.responseXML;
  35.      var destination = response.getElementsByTagName('destination')[0].firstChild.data;
  36.      var data    = response.getElementsByTagName('data')[0].firstChild.data;
  37.      document.getElementById(destination).innerHTML = data;
  38.     }
  39.    }
  40.    loadChannelData("alpha");
  41.    loadChannelData("beta");
  42.    loadChannelData("gamma");
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Netlyte
  • Graduate
  • Graduate
  • Netlyte
  • Posts: 179

Post 3+ Months Ago

When you say the latest call do you mean the very first time it returns the data and then it returns the same data?

Does it work correctly in Firefox?

If it works correctly in Firefox but not in IE then you can use this hack to get around it.

Current URL:
var url = "test_xml.php?destination=" + destination;

Change it to:
var url = "test_xml.php?destination=" + destination + "?datehack=" + new Date().getTime();

This will make IE think that each call is new and return the newest one each time.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Quote:
Is it because my xmlHTTP object is global?

Yes.
Quote:
Any way to solve this?

Yes, use an Array or an Object to track multiple instances if you need them.

See the Prototype Framework for examples of this.
  • zooounds
  • Born
  • Born
  • zooounds
  • Posts: 4
  • Loc: Sweden

Post 3+ Months Ago

During the night I dreamed about another solution. It works great :)

Code: [ Select ]
   function loadChannelData(destination, channel_id, date)
   {
    var xmlHttp = GetXmlHttpObject();

    if (xmlHttp == null)
    {
     return;
    }

    var url = "get_channel_data.pl?channel_id=" + channel_id + "&date=" + date;

    xmlHttp.onreadystatechange = function () { insertChannelData(mlHttp); };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
   }
  1.    function loadChannelData(destination, channel_id, date)
  2.    {
  3.     var xmlHttp = GetXmlHttpObject();
  4.     if (xmlHttp == null)
  5.     {
  6.      return;
  7.     }
  8.     var url = "get_channel_data.pl?channel_id=" + channel_id + "&date=" + date;
  9.     xmlHttp.onreadystatechange = function () { insertChannelData(mlHttp); };
  10.     xmlHttp.open("GET", url, true);
  11.     xmlHttp.send(null);
  12.    }
  • purvi88
  • Born
  • Born
  • purvi88
  • Posts: 1

Post 3+ Months Ago

Hey I dont understand what change you have made. Can you please post the whole code here? What is channel_id and what happened to the destination variable?
  • Satwant
  • Graduate
  • Graduate
  • User avatar
  • Posts: 127
  • Loc: Bangalore

Post 3+ Months Ago

zooounds wrote:
During the night I dreamed about another solution. It works great :)

Cool One :)

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.