Introduction to Ajax

Introduction to Ajax Asynchronous Javascript And XML SE-2840 Dr. Mark L. Hornick

HTTP is a transaction-based communication protocol • Each HTTP request generates a response • Typically the browser requests a (HTML) page, the server responds by sending it, and the browser then displays it HTTP request: “get me a page” HTTP response: “here is the page” Web Browser Web Server SE-2840Dr. Mark L. Hornick

Subsequent transactions are typically requests for other web pages • For example, the browser requests another page to process the form data entered in the currently displayed page HTTP request: “here’s some data; load another pagethat processes it” HTTP response: “here is the results page” Web Browser Web Server SE-2840 Dr. Mark L. Hornick

Ajax is a methodology for requesting a response from the server that does not involve a change in the current web page • For example, the browser requests just the information needed to validate username/password part of a form AJAX request: “here’s is a username/password to be validated” AJAX response: “OK” or “Invalid” Web Browser Web Server • After receiving the response, the browser incorporates the results into the current page being displayed (using JavaScript) SE-2840 Dr. Mark L. Hornick

Ajax requests can be Synchronous or Asynchronous • The browser can continue to execute (JavaScript) while awaiting the results of an Asynchronous request • Use if results take a long time to generate • Call setup is more complex • Synchronous requests cause the browser to stop and wait for a request • OK if browser responds quickly • Call setup is simple Server Browser SE-2840 Dr. Mark L. Hornick

Ajax request/response is implemented in JavaScript • The XMLHttpRequest object is the workhorse of Ajax var xhr = new XMLHttpRequest(); • You use this object (and it’s methods and attributes) from within Javascript SE-2840 Dr. Mark L. Hornick

An Ajax request changes state four times during execution • The initial state is 0 (request not initialized) var xhr = new XMLHttpRequest(); • After the connection to the server is established, the state is 1 xhr.open(<method>, <url>, <sync|async>); • After the request is sent, the state is 2 xhr.send(<request parameters>); • While the request is being processed, the state is 3 • After the request is completed, the state is 4 status = xhr.status; // 200 if OK response = xhr.responseText; SE-2840 Dr. Mark L. Hornick

If used synchronously, the request may take a long time to process xhr.open(<method>, <url>, false); • The send() function will not return until the readyState changes to 4 (internally): xhr.send(<request parameters>); While the request is being processed, all other javascript code on the webpage will be suspended, since the send() function will execute on the primary thread. SE-2840 Dr. Mark L. Hornick

If used asynchronously, the request will be offloaded to a worker thread xhr.open(<method>, <url>, true ); • The send() function will return immediately xhr.send(<request parameters>); While the request is being processed asynchronously, the status property and responseText are undefined! status = xhr.status; response = xhr.responseText; SE-2840 Dr. Mark L. Hornick

Ajax state change monitoring is best handled via events: // This anonymous inner function handles events as the readyState changes xhr.onreadystatechange = function() { switch( xhr.readyState ) { case 3: // Interactive // Do whatever you want to notify the user that the request is processing… break; case 4: // Completed default: // bulletproofing if( xhr.status == 200 ) { // successful completion (server sent http OK) // do whatever } else { // the server sent an http error code (404 etc) // do error reporting } break; } // end switch } // end anonymous function SE-2840 Dr. Mark L. Hornick

Introduction to Ajax