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

2. SE-2840 Dr. Mark L. Hornick 2 HTTP is a transaction-based communication protocol Web Browser Web Server HTTP request: “get me a page” HTTP response: “here is the page” 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

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

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

5. 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 SE-2840 Dr. Mark L. Hornick 5 Browser Server

6. 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 6

7. 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(,, ); After the request is sent, the state is 2 xhr.send( ); 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 7

8. If used synchronously, the request may take a long time to process xhr.open(,, false); The send() function will not return until the readyState changes to 4 (internally): xhr.send( ); 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 8

9. If used asynchronously, the request will be offloaded to a worker thread xhr.open(,, true ); The send() function will return immediately xhr.send( ); 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 9

10. 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 10