AJAX multi-request at once help

[Ang3l0fDeath]

Ok to start off with i need help preforming multi-ajax-request at once, this isnt a true/false answer with the http.open() function.  What im trying to do is get data from 20 different pages, and return that data to the current page.  I can do this with the http.open in false mode, and get the results i want, but the page freezes while the data loads, which i dont want it to do.  My problem with doing this http.open in true state is only (1) http.request is returned.

 

My question is not a simply copy and paste of your working code for this problem or any libraries, i prefer to learn how to better handle sending and handling the data recieved.  Plus i've seen examples of how some of these scripts look, most of these http.multi.request use the THIS/SELF ( .this / .self ) to preform isolated request.

 

I've also thought of using the header data to help sort data returned, but the host site doesnt give the required detailed information to help sort returned data.  So i need to learn how to send unique request and how to retrieve those unique request back into the right function/handler/field.

 

Hopefully someone where can explain this to me, and all 20 request are sent at once through a loop function.

[F1Fan]

First, if you don't already know how, learn how to make asynchronous calls (true) as opposed to the synchronous (false) that you're doing now. Assuming you don't know how to do this, here are two examples that do the same thing, but one sync, the other async:

Synchronous:

	var newHttpObject = getHTTPObject();
newHttpObject.open('GET', url, false);
newHttpObject.send(null);
document.getElementById('someElement').innerHTML = newHttpObject.responseText;

Asynchronous:

	var newHttpObject = getHTTPObject();
newHttpObject.open('GET', url, true);
newHttpObject.send(null);
newHttpObject.onreadystatechange = function(){
	if (newHttpObject.readyState == 4){
		document.getElementById('someElement').innerHTML = newHttpObject.responseText;
	}
}

 

Now, to make multiple calls, I would suggest putting the above into its own function. Then, in your loop (or whatever you're using to do the 20 calls), call the function each time. This will create a unique http object for each call, allowing them to each run independently of one another.

 

As far as handling the returned data, I'm not sure. I would guess the best way to to that would be to set a global JS counter that was incremented each time the function was called, and decrement that counter inside the IF statement that handles the response. Then, in your first function, write something that waits until that counter is back to zero before it sorts whatever data you have returned. It also would probably be best to put the data returned by each call into an array, so it doesn't overwrite any previous calls.

 

Hope this helps.

[Ang3l0fDeath]

There is already a timer on the page, its excuted every 5 seconds to 15 minutes depending on which page im on.  My http.request is already in a function and the function has the return element for where the responce should be placed.

 

I dont have a problem with knowing the different between the Synchronous Or Asynchronous request.

 

my problem is handling the returned data within side onreadystatechange = function(){}

Example i send out 20 httprequest.open('GET', url, true);

how do i handle and sort all the returned data. plus i figure it doesnt take long to get all 20 reponces back at once.

 

And the only useful thing i already thought of is putting everything into an array.

 

This is my current code pretty much.  I cut out slice/replace/indexof strings.  As you can tell the data is returned to a unique ID field, however like i said im only getting 1 responce.  How do i sorta though the responces and why am i only getting 1 back.

for (ii=1; ii<(table_temp.rows.length); ii++){AJAX(table_temp.rows[ii].id,
table_temp.rows[ii].getElementsByTagName("a")[0].href)}

 

function AJAX(return_field, url){
function handleReceiveData(){
    if (http_request.readyState == 4){
        var data_recieved = http_request.responseText;
document.getElementById(return_field.id).innerHTML=data_recieved;}

http_request.open("GET", url, true);
http_request.onreadystatechange = handleReceiveData; 
http_request.send(null);}

 

Also a little reminder note: the loop is only executed after the main page has finished loading.  So im not constantly updating the data, but i can if i wanted to since this page is on a timer already.

[F1Fan]

Where are you creating the "http_request" object? It appears that your problem is that you've created that object globally, then you're attempting to reuse it. When you do that, each request will abort the previous, and you will only ever get the last response. You need to actually create that object inside your private function, so that you are using 20 different http objects 1 time each, as opposed to 1 object 20 times.

 

Also, you keep saying you want to sort them. What do you want to use to sort them? Something that's being returned, or do you want them in the order that you called them?

[Ang3l0fDeath]

Well my bad i guess.... yes i did have httprequest set as a global var instead of a private one.  Sorry that totally fixed the problem.  Easy fix thanks for the help, see i didnt know that.