Two xmlHttpRequests in a single page

问题:

I'm fairly new to ajax but am trying to implement two simple calls to dynamically changes two separate divs on a page using javascript. I have no problems using one call at a time, but when I use two it seems like the second xmlhttprequest takes over the first and writes into both divs.

I've read and tried using the fixes listed on these two other posts both neither seem to work in my case:

Sending two Ajax requests to two different PHP scripts from single javascript function

Using two xmlhttprequest calls on a page

And here is my relevant code:

function request_handler(url, params, changed_div) {
    if(window.XMLHttpRequest) {
            try {
                    req = new XMLHttpRequest();
            }catch(e) {
                    req = false;
            }
    }else if(window.ActiveXObject) {
            try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                    try {
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                            req = false;
                    }
            }
    }

    if(req) {
              req.onreadystatechange = function(){
                    if (req.readyState == 4 && req.status == 200){
                                    document.getElementById(changed_div).innerHTML = req.responseText);

                    }
            }

            req.open("POST", url, true);
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.send(params)
            return true;
    }

    return false;
}

Here is the basic format of each request using the function above:

request_handler("sample.php", parameters , "sample_div");

Apologies if I'm passing something simple up here, I just can't seem to get it to work.

回答1:

This question

Using two xmlhttprequest calls on a page

does answer your question.

In your request_handler function, you're using a global variable req that gets overwritten every time you call that function.

If you change it to start:

function request_handler(url, params, changed_div) {
    var req;
    // Rest of your function
}

you should find that it works. In this case req has a local scope and so is not overwritten when you call request_handler for the second time.

Can I also suggest that you strongly consider using the likes of jQuery, Prototype or Dojo, if you're planning on writing Ajax scripts? Writing scripts that work cross-browsers is hard to do well and these frameworks do a lot of the legwork for you.

回答2:

Your req is a global variable as it is defined without the var keyword, keep that in mind.

What I think happens is that the second call overwrites the first one. This is because of the (default) asynchronous nature of the XMLHTTPRequest. Your first function call will end, but the fetching of the page is still going. The second function call then overwrites the previous request.

This however does not explain why both div get filled with the result of the second call. I must say I'm a bit lost on that one.

回答3:

This is a pretty common problem, especially if you don't want to take additional measures to block further calls until the first has finished loading. Its a bigger subject that I can cover in a post but there are several examples on the web of an "Ajax Queue" that effectively manages the order of requests received.

jQuery has a plugin for managing queues and I'm certain that most other JavaScript frameworks such as Prototype and MooTools will as well. If you're wanting to stick with raw JavaScript I would take a look at this web page:

http://www.cmarshall.net/MySoftware/ajax/index.html

He implements a queue very effectively and has an excellent example of its use.