Ajax call not responding on repeated request

Question

I have a page with a dropdown. The onchange event calls a Javascript function (below) that includes an Ajax block that retrieves data and populates a TEXTAREA . On the surface, everything works.

I can select any item in the list with no problems. However, if I select an item that has previously been selected, the Ajax call appears to hang. It looks like maybe some weird caching issue or something. If I close the browser and reload the page, all items work again until I re-select.

I've tested for the readyState and status properties when it's hanging, but I get nothing. Am I missing something?

The page is a client project behind authentication so I can't post a URL, but here's the Ajax code. This is in a PHP page, but there's no PHP script related to this.

function getText( id ) {
var txt = document.getElementById( "MyText" );

txt.disabled = "disabled";
txt.innerText = "";
txt.className = "busy";

var oRequest = zXmlHttp.createRequest();
oRequest.open( "get", "get_text.php?id=" + id, true );
oRequest.send( null );

oRequest.onreadystatechange = function() {
    if( oRequest.readyState == 4 ) {
        if( oRequest.status == 200 ) {
            txt.innerText = oRequest.responseText;
        } else {
            txt.innerText = oRequest.status + ": " + oRequest.statusText;   
        }

        txt.disabled = "";
        txt.className = "";

        oRequest = null;
    }
}}

Edit: The code block seems a little quirky; it won't let me include the final } unless it's on the same line as the previous.

Answer 1

You're setting the onreadystatechange function after you're sending the request. If it takes a long time (ie if it goes to the server), this will probably work, since there will be a delay before it tries to call the callback.

If the page is cached, though, the browser is probably trying to call onreadystatechange immediately in the send method. Move your assignment to onreadystatechange to before the open/send code.

Answer 2

HI, The caching is due to the same url thats being called repeatedly. If you change the URl dynamically then this issue can be rsolved. Something like by adding a querystring with the current time with the request ( or any random renerated number ) you can change the url without affecting the result

Answer 3

I would guess that you are running into a caching issue. I have noticed that Internet Explorer is more aggressive at caching ajax calls than Firefox is. One way to be sure of what is happening is to use Fiddler2. This application monitors your web traffic, and you would be able to see if the browser is making a request or not, and what cache headers are coming back on the responses that you do get.

You can download fiddler2 from http://www.fiddlertool.com/fiddler/