Asynchronous Javascript And XML 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 A browser may send a GET request for 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-2840 Dr. Mark L. Hornick

Ajax is a methodology for requesting a HTTP response from the server that does not involve receiving an entire HTML web page For example, the browser requests just the data needed to update part of a web page (for example, the contents of 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 JavaScript) SE-2840 Dr. Mark L. Hornick

Ajax requests can easily be handled via the jQuery .ajax() function: type : "GET", // request via HTTP GET url : "http://localhost:8080/CoinFlipTimes/AllData", // the url of the resource returning the Ajax response data : null, // any addition parameters go here crossDomain:true,// cross-origin request? Then set to true async: true, // the default; false for synchronous dataType : "json", // we want a JSON response success : handleSuccess, // the function to call on success error : handleError // the function to call if an error occurs }); If used synchronously, all other javascript code on the webpage will be suspended, since the .ajax() function will execute on the primary thread. If used asynchronously, the request will be offloaded to a worker thread, so the .ajax call will not block SE-2840 Dr. Mark L. Hornick

The big question What format does Ajax use to represent the data it returns? Hint: Asynchronous Javascript And XML But we really don’t use XML too much anymore (it’s so 1995) CS-422 Dr. Mark L. Hornick

JSON – JavaScript Object Notation JSON took hold around 2005/2006 and quickly replaced XML Part of the JavaScript specification, but is really a language-independent data format JSON XML SE2840 Dr. Mark L. Hornick

Scenario Consider a Java collection of Students: List<Student> students; where public class Student { String firstname; String lastname; int id; String program; } SE2840 Dr. Mark L. Hornick

Here is a JSON portable collection of Students: { “students”: [ { “firstname”:“Bill”, “lastname:“Bored”, “id”:“1111”, “program”:“SE” }, { “firstname”:“Bob”, “lastname:“Sledd”, “id”:“1114”, “program”:“CE” } ] SE2840 Dr. Mark L. Hornick

Here an equivalent XML representation: <?xml version="1.0" encoding="ISO-8859-1"?> <student_list> <student> <firstname>Bill</firstname> <lastname>Bored</lastname> <id>1111</id> <program>SE</program> </student> <firstname>Bob</firstname> <lastname>Sledd</lastname> <id>1112</id> <program>CE</program> </student_list> Note that the XML representation is “heavier” than the JSON representation (and also more difficult to interpret) SE2840 Dr. Mark L. Hornick

JSON data is syntactically just plain old Javascript! { “students”: [ { “firstname”:“Bill”, “lastname:“Bored”, “id”:“1111”, “program”:“SE” }, { “firstname”:“Bob”, “lastname:“Sled”, “id”:“1114”, “program”:“CE” } ] var firstname = response.students[0].firstname; // result is “Bill” SE2840 Dr. Mark L. Hornick

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