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

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

3. 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 Dr. Mark L. Hornick

4. Ajax requests can easily be handled via the jQuery .ajax() function:
type : "GET", // request via HTTP GET
url : " // 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 Dr. Mark L. Hornick

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

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

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

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

9. Here an equivalent XML representation:
<?xml version="1.0" encoding="ISO "?> <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

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

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