AJAX Strange Behaviour

JavaScript
1

Hi there.

I have spent the last 4 hours trying to figure this out and I’m about to send the computer flying to the street. But knowing that this would not solve the problem, I come to sitepoint.

I have some issue with AJAX. I am using the standard script that I found in some tutorial a while back, which has been working fine. Suddenly, all hell broke loose. Now I have been modifying the script a bit, but nothing that would obviously break it.

Here is what should happen:

  1. User action –> javascript initiating the AJAX call to a server script
  2. Server script (php) processes the information, echo ‘response’
  3. Back to javascript, if readyState == 4 and status == 200, display ‘response’ in the predefined div on the page through .innerHtml

Here is what happens:

  1. User action –> javascript initiating the AJAX call to a server script
  2. Server script (php) processes the information, echo ‘response’
  3. Back to javascript, if readyState == 0 and status == 0, no response displayed

I simply don’t get it. If there was a parse error of sorts, php would rebel and I would get the error message in the ‘response’ div (happened in the past). The server-side script runs just fine, since I can see its actions reflected in the database. If there was a JS issue, I’d see it come up in the error console, like it usually does.

So, gang, any ideas on what could possibly result in readyState and status being 0???

I am out of ideas, especially because it worked fine earlier today, then stopped working, then came back for about 30 min, then stopped working again.

Another thing: I called tech support of the hosting company - no issues with the server that would cause this that they are aware of.

Any ideas please??? Thank you!

Victor

2

UPDATE:

I tracked down the piece of code that was breaking the whole thing. There is a line:

http_request.onreadystatechange = alertContents;

which calls this function:

   
function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('ajaxresponse').innerHTML = result;            
         } else {
            document.getElementById('ajaxresponse').innerHTML = '<span style="color:red;">There was a problem with the request.</span>';
         }
      } //else { alert(http_request.readyState);alert(http_request.status); }
   }

Note: the commented out ‘else’ statement at the bottom is where I would get my ‘0’ and ‘0’ alerts popping up that I described in my issue.

So what I wanted to do was to change the id of the element where the ‘result’ gets written. Right now, in the script it is set to ‘ajaxresponse’, and I want to set to to a different value depending on which user action initiated the AJAX call. I thought it was as simple as passing some variables…

Turned out that putting brackets at the end:

http_request.onreadystatechange = alertContents();

resulted in the issue I described, regardless of whether a parameter was included.

Question: why? I thought it would work like any other function…

Now I got to figure out a different way to pass a variable to it. Any ideas?

Thank you!

Victor

3

This is a good piece of info on how to pass variables to ‘onreadystatechange’ in AJAX.

Hopefully this will save someone hours and hours of debugging at some point.