HTTP is a transactionbased communication protocol Each HTTP

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

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 Java. Script) SE-2840 Dr. Mark L. Hornick 2

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

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

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

Here an equivalent XML representation: <? xml version="1. 0" encoding="ISO-8859 -1"? > <student_list> <student> <lastname>Bored</lastname> <id>1111</id> <program>SE</program> <firstname>Bill</firstname> </student> Note that the XML representation uses <student> user-defined tags to add structure to <firstname>Bob</firstname> the data representation. <lastname>Sledd</lastname> <id>1112</id> <program>CE</program> </student_list> SE 2840 Dr. Mark L. Hornick 6

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” } ] } Note that the XML representation is “heavier” than the JSON representation (and also more difficult to interpret) SE 2840 Dr. Mark L. Hornick 7

JSON data is syntactically (almost) 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” SE 2840 Dr. Mark L. Hornick 8

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

Ajax requests can easily be handled via the j. Query. ajax() function: $. 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 }); 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 10

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