Anyone working with AJAX knows the headache of dealing with HTTP Requests. They can only be done one at a time, and any one called while waiting on another leaves that request blowing in the wind. The only way to successfully handle request that can be fired off at any time, is to use a queuing system to manage the calls. I’m sure there are other recommendations out there, but I always enjoy the challenge of creating my own solutions.
Before I get into the code of my AJAX Request Queue, I want to show you the debug window. I set this up as a div with a few form fields that I can pop open at any time to show me what’s going on in the queue.
Form Field “queueMsg” – A general message about the state of the queued requests. | |
Form Field “queueInCall” – The value of the inCall variable… where or not the HTTP Request line is busy. | |
Form Field “queueReadyState” – The value of the readystate variable of the current HTTP Request, if in a call. | |
Form Field “queueTest” – The list of calls waiting to be executed. This example shows that there are 2 pending calls, one to get some slides and another to get comments for a particular slide. | |
The following is the Javascript code for the queue, all contained in a .JS file called createRequestObject, which is linked on pages that need to make HTTP Requests. I’m not going to go into too much detail about the code, just the overall idea.
Setting up initial variables:
|
Create our Request Object:
|
Insert calls to the Queue:
|
Watcher function that is called on intervals to set out queued calls based on inCall variable:
|
If we are not currently in a call and have a pending request, the call URL is sent here:
|
This is a generic return function intended to just clear the inCall variable when we have a call type that we don’t need/expect a response from:
|
And finally, to start the Queue engine, we have:
|
All that together successfully runs my Request Queue and gives me the ability to monitor it. A pause button would be a nice addition, but I haven’t had time to implement it. However, it would simply need to clear the queueWatcher interval on pause and restart it on play.
Finally, for any page that needs to make a call, for example, a log in, I would just have the submit button call a function that gathers the data and sends it to the queue, as such:
|
You will notice when I sendCall, I have “hr_checkLogin” as the second parameter, which, once the call is complete, will call:
|
The important thing is to always set inCall to false once your call is complete, or the next request will never be processed.
Like I said, there may be better solutions out there, but I’m a big fan of building my own, which always helps me to become a better programmer.
Any thoughts?
Thanks for this! Exactly what I needed. Works straight out the box. Helped me to understand what is going on, being the ajax noob that I am.
Good example. Works great. Exactly what i required. Your descriptions adds values to your example. Keep Going…!!!
“Like I said, there may be better solutions out there, but I’m a big fan of building my own, which always helps me to become a better programmer.”
Its not always true though 🙂 since you are in your own sandbox …..its good to look at other people solutions so you wont reinvent the wheel
This is a pretty good solution! I spent some time looking for something similar but couldn’t really find anything. I used your ideas and made a nice AjaxManager object using good old prototype.
Pingback: developen › Keyword Driven Automation
Hi. I’ve made a serious debt and I really need to do something about that. I think I should apply for a new credit card now, when my credit rating is so bad but I do not see any other way out except killing off my credit card debt with a new credit card. I believe it is possible to do if I pay all my bills duly in full.
trans unioin credit bureau
G7tb8Hjk
I may be a little slow but i cant get this working at all. I dont know if im doing anything wrong but im not getting any response.
Can I have the complete source code for this to work.
I am trying to make an ajax validation form (to validate int for phone number) using this query.But failed. may i ask your help? my codes are
function insertUserReply() {
if(http.readyState == 4){
var response = http.responseText;
if(response == 0){
document.getElementById(‘msg’).innerHTML = ‘Please fill all required fields!’;
}
if else (parseInt(document.forms[0].Telephone.value) != document.forms[0].Telephone.value) {
document.getElementById(‘msg’).innerHTML = ‘Please enter a telephone number, numbers only’;
}
else {
container = document.getElementById(‘mylist’);
new_element = document.createElement(‘li’);
new_element.innerHTML = response;
container.insertBefore(new_element, container.firstChild);
lastRecord=document.getElementById(‘lastRecord’).value;
new_element.setAttribute(‘id’, lastRecord);
document.getElementById(‘msg’).innerHTML = “Customer added!”;
}
i wish u could pass a user data as a parameter with the returnTo callback function.
by this u will be able to distinguish between calls
NTT Says:
May 13, 2008 at 3:24 pm
i wish u could pass a user data as a parameter with the returnTo callback function.
by this u will be able to distinguish between calls
————————————————————————————
I found that I could set an id property on the request and return it to my response handler very simply with the following
xmlHttp = new XMLHttpRequest();
xmlHttp.id = this.id;
xmlHttp.name = this.name;
if(xmlHttp.readyState==4)
{
HandleResponse( xmlHttp.responseText , xmlHttp.id, xmlHttp.name );
}
I couldn’t get prototype to work on the xmlHttpRequest object (which could be a problem with IE7?) so to hold other information with the request I used the request objects “name” property and set it to be a list of delimitted values then use string.split in my response handler.
i’m trying to download for files in different http requests can you help
me do that
Hi
I hvae problems listning to incoming http requests from a push server.
Can you help please?
Phone Status requests are pushed / send to my using http. But I do not know how to get it out to a web.
Best Regards
Maali
Hi,
thanks a lot for this nice code!
My question is: is there a chance to set and monitor timeout?
Cheers DF
Thank You for nice piece of code. I am not a regular Web Programmer but interested in learning. Have read about issues of invoking a CROSS domain XMLhttpRequest object through JavaScript and it’s limitations on various types of Browsers.
Am talking about a REMOTE Client requesting a Page to be back to his PC from a cross domain server for his own further analysis.
Would highly appreciate if you could explain with examples and possible checks/ exceptions handling , so that Remote Client knows , about what is going on or any issue if there.
Thanks again,
Sanjib
Can I have the complete source code for this to work.
Nice replies in return of this difficulty with firm arguments
and describing the whole thing about that.
I’m really enjoying the theme/design of your website. Do you ever run into any browser compatibility issues? A number of my blog audience have complained about my blog not operating correctly in Explorer but looks great in Safari. Do you have any suggestions to help fix this problem?