Introduction to Ajax Asynchronous Javascript And XML SE2840

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

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

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 page that processes it” HTTP response: “here is the results page” Web Browser SE-2840 Dr. Mark L. Hornick Web Server 3

Ajax is a methodology for requesting a response from the server that does not involve loading an entirely new web page For example, the browser requests just the information needed to update part of a web page (ie a table) AJAX request: “give me the latest list of users” AJAX response: collection of users Web Browser Web Server After receiving the response, the browser incorporates the results into the current page being displayed (using Java. Script) SE-2840 Dr. Mark L. Hornick 4

Ajax request/response was initially implemented in pure Java. Script l The XMLHttp. Request object is the workhorse method for Ajax var xhr = new XMLHttp. Request(); l You use this object (and it’s methods and attributes) from within Java. Script SE-2840 Dr. Mark L. Hornick 5

An Ajax request changes state four times during execution l The initial state is 0 (request not initialized) var xhr = new XMLHttp. Request(); // init l After the connection to the server is established, the state is 1 xhr. open(…); // connect to the server l After the request is sent, the state is 2 xhr. send(…); // make the request l 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. response. Text; l SE-2840 Dr. Mark L. Hornick 6

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

If used synchronously, the request may take a long time to process xhr. open(<method>, <url>, false); l The send() function will not return until the ready. State 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 8

Security issues with Ajax CS-422 Dr. Mark L. Hornick 9

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

Ajax state change monitoring is best handled via events: // This anonymous inner function handles events as the ready. State changes xhr. onreadystatechange = function() {// This function is called 4 times! switch( xhr. ready. State ) {// switch on state transitions case 1: // handles states 1, 2 case 2: break; // nothing much to do here case 3: // state 3: processing request // Do whatever you want to notify the user that the request is processing… break; case 4: // state 4: Completed default: // bulletproofing if( xhr. status == 200 ) { // successful completion (server sent http OK with transition to state 4) // do whatever } else { // the server sent an http error code (404 etc) // do error reporting } SE-2840 Dr. Mark L. Hornick break; } // end switch 11

Ajax can easily be handled via j. Query: $. ajax({ type : "GET", // request via HTTP GET url : "http: //localhost: 8080/Coin. Flip. Times/All. Data", // the url of the resource returning the Ajax response data : null, // any addition parameters go here cross. Domain: true, // cross-origin request? Then set to true async: true, // the default; false for synchronous data. Type : "json", // we want a JSON response success : handle. Success, // the function to call on success error : handle. Error // the function to call if an error occurs }); SE-2840 Dr. Mark L. Hornick 12