Jump to content
Larry Ullman's Book Forums

Recommended Posts

the lesson in chapter 3 includes a script dept.js, that calls function init which in turn calls function handleResponse to determine the response code from an Ajax request. 

 

 

 
 // Function that adds the Ajax layer:
function init() {
 
  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();
  
  // Attach the function call to the form submission, if supported:
  if (ajax) {
  
    // Check for DOM support:
    if (document.getElementById('results')) {
    
      // Add an onsubmit event handler to the form:
      document.getElementById('dept_form').onsubmit = function() {
      
        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.
        
        // Get the department_id:
        var did = document.getElementById('did').value;
        
        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));
      
        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }
        
        // Send the request:
        ajax.send(null);
      
        return false; // So form isn't submitted.
 
      } // End of anonymous function.
      
    } // End of DOM check.
    
  } // End of ajax IF.
 
} // End of init() function.
 
// Function that handles the response from the PHP script:
function handleResponse(ajax) {
 
  // Check that the transaction is complete:
  if (ajax.readyState == 4) {
  
    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {
      
      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;
 
      // Make the results box visible:
      results.style.display = 'block';
      
    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }
    
  } // End of readyState IF.
  
} // End of handleResponse() function.

 

 

The author wraps the function call to handleResponse in an anonymous function. I tried to simply call the function like this:

 

 

// Function that handles the response:
        ajax.onreadystatechange = handleResponse(ajax);

 

but it wouldn't work and I don't understand why. Is this an example of an event receiving a function definition and not the actual result?

 

 

Link to comment
Share on other sites

It doesn't work because you have to assign a function reference, not a function call, to an event handler in JS.

If you assign a function call to an event handler in JS, an error will always occur. The only exception to this is when the function call itself returns a function reference.

 

The downside of having to assign a function reference to an event handler is that you can't pass arguments to it.

The common workaround to this is to assign an anonymous function, which is actually a function reference being defined on the spot, to the event handler, and then within that anonymous function, calling the function you actually want to call and sending it the arguments that you actually want to use.

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...