Print

---

I'd highly recommend getting a good clear handle on the underlying
javascript workings before moving to a library like jQuery (which I am
quite fond of) especially when using XMLHTTPRequest.  If you don't,
mysterious problems may arise that are all the more difficult to debug
since you have the library between you and the executed javascript.

I find that the most common problems with XHR are quite often due to it's
asynchronous behavior.  You cannot simply invoke a function within the
response code and expect to have it fire, because the code has no way of
knowing when/if that response will occur.  You need to instead create a
"callback" function that you pass into the response code (like you are
accustomed to doing when setting an event handler).

I am not 100% sure if that's the problem here, but I would try this:

before defining httpRequest.onreadystatechange, define:

callback_alert = function(msg) { alert(msg); };

then:

httpRequest.onreadtstatechange = function(callback_alert) {
[...]
     callback_alert ( root_node.firstChild.data );
  }

The problem is that your anonymous function onreadystatechage is
effectively "compiled" to run later, but the alert function becomes a
"closure" which remembers its compilation state when invoked.  And at the
time of its compilation, xmldoc did not exist.

One thing I WOULD recommend it to study some of the libraries to see how
they construct their XHR code.

Here's my standard XHR:

Dase.ajax = function(url,my_func) {
     var xmlhttp = Dase.createXMLHttpRequest();
     xmlhttp.open('GET', url, true);
     xmlhttp.send(null);
     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             var returnStr = xmlhttp.responseText;
             if (my_func) {
                 my_func(returnStr);
             }
         } else {
             // wait for the call to complete
         }
     };
};

Note that I always pass in a (callback) function to do what needs doing
to the response code.

I hope that helps-
Peter Keane
daseproject.org


On Thu, 29 Nov 2007, Eric Lease Morgan wrote:

> Why doesn't my httpRequest Javascript function return unless I add an
> alert? Grrr.
>
> I am writing my first AJAX-y function called add_tag. This is how it
> is suppose to work:
>
> 1. define a username
> 2. create an httpRequest object
> 3. define what it is suppose to happen when it gets a response
> 4. open a connection to the server
> 5. send the request
>
> When the response it is complete is simply echos the username. I know
> the remote CGI script works because the following URL works correctly:
>
> http://mylibrary.library.nd.edu/demos/tagging/?
> cmd=add_tag&username=fkilgour
>
> My Javascript is below, and it works IF I retain the "alert
> ( 'Grrr!' )" line. Once I take the alert out of the picture I get a
> Javascript error "xmldoc has no properties". Here's my code:
>
>
> function add_tag() {
>
>  // define username
>  var username  = 'fkilgour';
>
>  // create an httpRequest
>  var httpRequest;
>  if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); }
>  else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
> ( "Microsoft.XMLHTTP" ); }
>
>  // give the httpRequest some characteristics and send it off
>  httpRequest.onreadystatechange = function() {
>
>   if ( httpRequest.readyState == 4 ) {
>
>    var xmldoc = httpRequest.responseXML;
>    var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
>    alert ( root_node.firstChild.data );
>
>   }
>
>  };
>
>  httpRequest.open( 'GET', './index.cgi?cmd=add_tag&username=' +
> username, true );
>  httpRequest.send( '' );
>  alert ( 'Grrr!' );
>
> }
>
>
> What am I doing wrong? Why do I seem to need a pause at the end of my
> add_tag function? I know the anonymous function -- function() -- is
> getting executed because I can insert other httpRequest.readyState
> checks into the function and they return. Grrr.
>
> --
> Eric Lease Morgan
> University Libraries of Notre Dame
>
> (574) 631-8604