AJAX Call issue

Hi All, So I am sending multiple AJAX calls using an array and all works fine except for the fact that despite sending different calls all my queries respond back under one response. e.g.:

Response 1 will include the results for call 1 and call 2.
Response 2 will also include the results for call 1 and call 2.

The code itself finishes without error and the output is in the correct format. The issue is simply that each response should not have both calls. Please see my code below, wondering what is wrong here:

var strIDs = IDList.split("\n");
var arrayLength = strIDs.length; <------- Verified arrayLength = 2

var f = (function ()
                {
                    var xhr = [];
                    for (var i = 0; i < arrayLength; i++)
                    {
                        if (strIDs[i] != null && strIDs[i].length >= 7)
                        {
                            (function (i)
                            {
                                xhr[i] = new XMLHttpRequest();
                                xhr[i].onreadystatechange = function ()
                                {
                                    if (xhr[i].readyState == 4 && xhr[i].status == 200)
                                    {
                                        var inputdata = xhr[i].responseText.replace(/<tr>/gi, "");
                                        //alert(inputdata);
                                        var inputdataArray = inputdata.split("</tr>");
                                        //alert(inputdataArray.length);
                                        for (var sRows = 0; sRows < inputdataArray.length - 1; sRows++)
                                        {
                                            if (inputdataArray[sRows] != "") {
                                                var sTable = document.getElementById("SearchResults");
                                                var row = document.createElement('tr');

                                                var sRow = inputdataArray[sRows];
                                                sRow = sRow.replace(/<td>/gi, "");
                                                //alert(sRow);
                                                var sCellsArray = sRow.split("</td>");
                                                for (var sCells = 0; sCells < sCellsArray.length - 1; sCells++)
                                                {
                                                    if (sCellsArray[sCells] != "")
                                                    {
                                                        var sCell = sCellsArray[sCells];
                                                        var cell = document.createElement('td');
                                                        cell.innerHTML = sCell;
                                                        row.appendChild(cell);
                                                        //alert(sCell);
                                                    }
                                                }
                                                sTable.appendChild(row);
                                            }
                                        }
                                        document.getElementById("myDiv").innerHTML = "Processed: " + i + " of " + arrayLength + " IDs";

                                        if (i == arrayLength - 1)
                                        {
                                            document.getElementById("myDiv").innerHTML = "<b><u>Search Completed</u></b>";
                                        }      
                                    }
                                };

                                xhr[i].open("POST", "Search1.aspx/Search", true);
                                xhr[i].setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                xhr[i].send("Method=" + encodeURIComponent("Search") + "&ID=" + encodeURIComponent(strIDs[i]) + "&Size=" + encodeURIComponent(Size));
                            })(i);
                        }
                    }
                })();

Open in new window

tr57285Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Any reason you are coding this from scratch and not using a library that handles AJAX - like jQuery?

Apart from that - I put your code here and added some console output to see what was going on - dump of output below.
From the dump I cannot see where there is a duplicate. The content appears twice because of a ReadyState = 3 (processing request) but your code specifically tests for 4 (complete) and status 200.
A:[Loop Start] i: 0
B: [function(i)] i: 0
E: [Open POST]:i: 0
C: [onreadystatechange]:i: 0, readyState: 1, responseText: , status: 0
POST reflect.php 200 OK 2ms	
F: [Request Sent]:i: 0
A: [Loop Start] i: 1
B: [function(i)] i: 1
E: [Open POST]:i: 1
C: [onreadystatechange]:i: 1, readyState: 1, responseText: , status: 0
POST http://mrcp9/ee/reflect.php 200 OK 3ms	
F: [Request Sent]:i: 1
C: [onreadystatechange]:i: 0, readyState: 2, responseText: , status: 200
C: [onreadystatechange]:i: 0, readyState: 3, responseText: <pre>
Array
(
    [Method] => Search
    [ID] => Constantinople
    [Size] => 100
)
</pre>, status: 200
C: [onreadystatechange]:i: 0, readyState: 4, responseText: <pre>
Array
(
    [Method] => Search
    [ID] => Constantinople
    [Size] => 100
)
</pre>, status: 200
D: [readyState=4 && status=200] i: 0, readyState: 4
C: [onreadystatechange]:i: 1, readyState: 2, responseText: , status: 200
C: [onreadystatechange]:i: 1, readyState: 3, responseText: <pre>
Array
(
    [Method] => Search
    [ID] => Amamzimtoti
    [Size] => 100
)
</pre>, status: 200
C: [onreadystatechange]:i: 1, readyState: 4, responseText: <pre>
Array
(
    [Method] => Search
    [ID] => Amamzimtoti
    [Size] => 100
)
</pre>, status: 200
D: [readyState=4 && status=200] i: 1, readyState: 4  

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tr57285Author Commented:
Hi Julian,

All of my AJAX code is in raw javascript,. I have not gotten around to porting it into JQuery, although it seems to be the more popular ways of using JScript these days.

So are you saying that I should be waiting for readyState 3 instead of 4 to handle the response data?

Basically I am looking to send X # of requests e.g. 2 or 3 and have 2 or 3 different responses back. but It seems all of the requests go through in one call and all come back together.
0
Julian HansenCommented:
All of my AJAX code is in raw javascript,. I have not gotten around to porting it into JQuery, although it seems to be the more popular ways of using JScript these days.
In JQuery you would do something like this (once for each call you need to make)
$.ajax({
   url: 'Search1.aspx/Search',
   type: 'POST',
   data: {
     Method: encodeURIComponent("Search").
     ID: encodeURIComponent(strIDs[i]),
     Size: encodeURIComponent(Size)
   }
}).done(function(response) {
  var inputdata = response.replace(/<tr>/gi, "");
  var inputdataArray = inputdata.split("</tr>");
  for (var sRows = 0; sRows < inputdataArray.length - 1; sRows++) {
    if (inputdataArray[sRows] != "") {
      var sTable = $("#SearchResults");
      var row = $('<tr/>');
      var sRow = inputdataArray[sRows];
      sRow = sRow.replace(/<td>/gi, "");
      var sCellsArray = sRow.split("</td>");
      for (var sCells = 0; sCells < sCellsArray.length - 1; sCells++) {
      if (sCellsArray[sCells] != "") {
        var sCell = sCellsArray[sCells];
        var cell = $('<td/>').html(sCell);
        row.append(cell);

      }
    }
  sTable.append(row);
});

Open in new window

So are you saying that I should be waiting for readyState 3 instead of 4 to handle the response data?
No I am saying I don't see any dupes - I see the same data reported twice in the console but the first is associated with a readyState = 3 the second with readyState = 4 - as you are already filtering for the RS=4 the first one should not come through.
Basically I am looking to send X # of requests e.g. 2 or 3 and have 2 or 3 different responses back. but It seems all of the requests go through in one call and all come back together.
I am not seeing that in the sample I put up.
0
tr57285Author Commented:
Thank you.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.