AJAX Techniques Help

[collinpyle]

Here's my need:

I am currently calling an init function that is fired up when the page loads. The function initializes HTML drop downs from data in a MySQL database.

As of now it utilizes the XMLHttpRequest object synchronously and it works just fine. A request is sent, PHP returns an XML list of labels from MySQL, and JS parses the XML to create the HTML drop downs.

It's called like this:

var labelsDropdown1=getLabelDropdown("label1");
var labelsDropdown2=getLabelDropdown("label2");

Now the variables are set to something like the following:

labelsDropdown1="<select><option>item 1</option><option>item 2</option></select>";

This way I can dynamically add this drop down content later on, without having the latency effect the work flow.

The only problem is the initialization process could be faster with asynchronous calls and with asynchronous calls I can use the readystatechange event to update a "Loading" progress bar.

Essentially what I want to happen is for an array of asynchronous calls to create the drop down variables inside the init function without exiting until they are all done being created. Once the different labels have been created the init function can be completed.

I know all of this is a tall order, but I was hoping some one could at least point me in the right direction.

Thanks in advance

[collinpyle]

Any ideas?

[7stud]

Yeah, forget you ever heard of XMLHttpRequest. Why would you send out a request for a page, and then a few seconds later after the page loads already feel a need to update the information on the page? Why not get the information during the initial request?

Once the different labels have been created the init function can be completed.

As far as I can tell, that is the definition of synchronous. If you have a bunch of asynchronous calls inside a function, that means that after each asynchronous call any subsequent js can continue executing. Therefore, when the last asynchronous call is made, the init() function will finish executing. As a hack, you could add a synchronous call at the end that is guaranteed to take a long time to stall the init() function, but I wouldn't recommend that. Or, you could try adding a function call at the end of init() that polls the readyState of each of the xhr calls inside an infinite while loop, and then when all the readyState's == 4, you can break out of the while loop.

[collinpyle]

I could do it on the initial load, but the problem is that I will be making a lot of requests and I don't want to lose my customers so I wanted to show a progress bar.

It seems redundant but I need the progress bar and AJAX seems to be a good way to do that. I guess the while loop would work, just sounds pretty hackish..

[bensheard]

Hi
I am interested in doing a very similar thing - get information from a MySQL database through AJAX to create drop down menus. The problem is that my knowledge of JS is pretty good but that of ajax is very limited. Do you know where I can get the code to do this sort of thing? - I'm sure I will be able to adapt an example to suit my needs...

Thanks