ajax发送请求两次

Example URL: http://twitter.realgamingreview.com/index.php

Edit: forgot to mention: use the test sign in: test/test for username/password.

I am attempting to do a simple AJAX request to retrieve some data from a database. The target file, serverTime.php, seems to be working perfectly; it inserts the desired data and returns the desired responseText.

However, the request seems to be firing twice. This is clear when I step through the JavaScript using Firebug. This causes the page to 'reset' (not exactly sure), such that my cursor loses focus from its current textbox, which is a new problem. The URL also says, "localhost/twitter/index.php?message=", even if my message is not actually empty. I want to fix this fairly minor problem before something major comes of it.

The JavaScript is below. ajaxRequest is my XMLHTTPRequest object. Any help is appreciated!

//Create a function that will receive data sent form the server
ajaxRequest.onreadystatechange = function(){
    if (ajaxRequest.readyState == 4){
        document.getElementById('output').innerHTML = ajaxRequest.responseText;
    }
}
// build query string
var message = document.myForm.message.value;
var queryString = "message=" + message;

    //send AJAX request
    ajaxRequest.open("GET", "serverTime.php" + "?" + queryString, true);

    ajaxRequest.send(null);

Thanks,

Paragon

I've seen this many times, and for me it's always been firebug. Try TURNING OFF firebug and submit the request again. Use fiddler or some other means to verify the request only executed once.

When I write AJAX functions in Javascript, I usually keep around a state variable that prevents a new request from being dispatched while one is currently in progress. If you just want to ignore requests that are made before another one finishes, you can do something like this:

1. Initialize inProgress to false.
2. Set inProgress to true right before calling ajaxRequest.send(). Do not call ajaxRequest.send() unless inProgress is false.
3. ajaxRequest.onreadystatechange() sets inProgress to false when the state is 4.

In some cases, however, you'd like to queue the actions. If this is the case, then you can't just ignore the request to ajaxRequest.send() when inProgress is true. Here's what I recommend for these cases:

1. Initialize ajaxQueue to an empty global array.
2. Before calling ajaxRequest.send(), push the request onto ajaxQueue.
3. In ajaxRequest.onreadystatechange() when the state is 4, pop the array to remove the request just services. Then, if ajaxQueue is not empty (array.size > 0), pop again and call send() on the object returned.

My issue was completely unrelated to AJAX. Instead, it was a simple (but obscure) issue where with two textboxes in my form, I was able to hit enter and not have the page reload, but with only one, the page would reload for some reason.

I have since changed my event system such that I am not relying on something so unreliable (now using jQuery to listen for the Enter key being pressed for specific textboxes).

Thanks to those of you who took the time to answer my misinformed question.