ajax - an introduction
DESCRIPTION
TRANSCRIPT
JavaScript: pros…
¤ Advantages of JavaScript ¤ Reactive web interfaces: similar to desktop applications
¤ Avoid page refresh: content is modified dynamically, without changing the page
¤ Communication with the server is limited: the content updates are executed at client side
¤ The browser is used as an universal client
Each click on the page modifies the page content
The server generates the content at request time
… JavaScript: cons
¤ Problems of JavaScript ¤ Inconsistencies between different interpreters: different
browsers might behave differently
¤ Complex debugging: debug in console
¤ Security problems: see “JavaScript” slides
¤ Memory usage: everything is running at client side
AJAX
¤ AJAX = Asynchronous JavaScript And XML ¤ This is not a new technology, but a mixture of different
technologies
¤ Objective: improve the Web usability
HTML (presentation)
CSS (presentation)
XML (interchange of data)
XMLHttpRequest (asynchronous communication)
JavaScript (bind together the other technologies)
AJAX principles
¤ Use JavaScript for user interaction handling
¤ Move processing and data on the browser
¤ Reduce the client-server communication
Reduced conversation
ü Data processing ü Page update
AJAX vs. RIA
¤ AJAX is one of the techniques used for building Rich Internet Applications (RIA) ¤ Similar techniques: Flash, Java
¤ A Rich Internet Application: ¤ Is a Web application
¤ Has features similar to the ones of desktop applications
¤ Is executed in a browser
¤ Does not require an installation
¤ Works both in online and offline modalities
AJAX vs. RIA: the decision tree
HTML
JavaScript AJAX
Yes No
Ubiquity Industrial strength
Java
Fancy animations
Flash
AJAX vs. RIA: the decision tree
ü JavaScript is available “out-of-the-box”
ü It works on computers / mobile devices
HTML
JavaScript AJAX
Yes No
Ubiquity Industrial strength
Java
Fancy animations
Flash
AJAX vs. RIA: the decision tree
ü Maintainability ü Reliability ü Availability ü Scalability
HTML
JavaScript AJAX
Yes No
Ubiquity Industrial strength
Java
Fancy animations
Flash
AJAX vs. RIA: the decision tree
ü Attractiveness ü No (or few?)
support for mobile devices
HTML
JavaScript AJAX
Yes No
Ubiquity Industrial strength
Java
Fancy animations
Flash
AJAX: guarantee industrial strength
¤ It is preferable to limit the amount of code that needs to be run in the shaky JavaScript environment
Thin Fat
RIA vs. classical applications
Classical application Rich Internet Application
HTTP request
HTTP response
HTTP request
HTTP response
Asynchronous request
Asynchronous response
Incremental update of the page
RIA: advantages
¤ User interaction ¤ Behaviour is similar to the one of the desktop applications ¤ Reactivity, i.e., we don’t have to operate a request to the
server each time the user clicks on the page
¤ Performance ¤ Tasks are equally divided between client and server (avoid
both fat client and fat server)
¤ Asynchronous communication (e.g., prefetching)
¤ Limited communication = limited bandwidth
RIA: disadvantages
¤ User interaction ¤ Bookmark usage (how to integrate a dynamic application
with bookmark handling)
¤ Integration with crawlers, e.g., search engines
¤ Performance ¤ Security (from JavaScript)
¤ Performance and Maintenance (e.g., scripts dimension)
AJAX Syntax
What is XMLHttpRequest?
¤ XMLHttpRequest is an object used to: ¤ Send HTTP (or HTTPS) requests to a web server
¤ Load the server response data back into the script
¤ The name is misleading, since any textual data can be received from the servers ¤ Common formats: XML, JSON, HTML, plain text
¤ Security issues: requests succeed only if they are made to the same server that served the original web page
Create an XMLHttpRequest object
¤ All modern browsers have a built-in XMLHttpRequest object
¤ Create it with modern browsers
¤ Create it with old versions of IE (IE5,IE6) (The horror, the horror!)
variable = new XMLHttpRequest();!
variable = new ActiveXObject(“Microsoft.XMLHTTP”);!
XMLHttpRequest: send a request to a server
¤ The send and open methods of the XMLHttpRequest object are used in order to send a request to a server
¤ A request is used to exchange data with a server
xmlHttpRequest.open(method, URL, async)!
Request type (GET, POST)
Location of file on the
server
true if the request is asynchronous
false if not
xmlHttpRequest.send(string)!
Only used for POST requests
GET requests or POST requests?
¤ GET is simpler and faster than POST, and can be used in most cases
¤ POST is useful to: ¤ Send a large amount of data to the server (since POST has
not size limitations)
¤ Send user input (which can contain unknown characters), since POST is more robust and secure than GET
GET requests
¤ Standard GET request:
¤ When sending information is required:
xmlHttpRequest.open(“GET”, URL, true)!
xmlHttpRequest.open(“GET”, “URL?par1=value1”, true);!
This is called query string and it is used to contain the data we want to send
POST requests
¤ Standard POST request:
¤ When sending information (like in forms) is required:
xmlHttpRequest.open(“POST”, URL, true);!
xmlHttpRequest.open(“POST”, URL, true);!xmlHttpRequest.setRequestHeader(“Content-type”, !
! !“application/x-www-form-urlencoded”);!xmlHttpRequest.send(“par1=value1”);!
Asynchronous: true or false?
¤ Many of the tasks performed on the server are very time consuming
¤ Before AJAX, this operation could cause the application to hang or stop
¤ With AJAX the JavaScript does not have to wait for the server response; it can instead: ¤ Execute other scripts while waiting for the server response
¤ Deal with the response when it is ready
Server response
¤ To get the response from a server, use the responseText or responseXML property of XMLHttpRequest!
¤ Two ways of doing it: ¤ responseText: get the response data as a string
¤ responseXML: get the response data as XML data
Server response: responseText!
¤ The text is downloaded from the server ¤ JavaScript can be used to insert it inside the page
¤ How to update the page content to insert the text:
document.getElementById(“id”).innerHTML = !! !xmlHttpRequest.responseText;!
Server response: responseXML!
¤ How to parse the XML response of the server and include it in the HTML page ¤ Since XML is a structured document, it needs to be parsed and
integrated in the page by converting it in HTML code
xmlDoc = xmlHttpRequest.responseXML;!txt = “”;!x = xmlDoc.documentElement.getElementsByTagName(“ARTIST”);!
for (i = 0; i < x.length; i++)!txt = txt + x[i].childNodes[0].nodeValue + “<br />”;!document.getElementById(“id”).innerHTML = txt;!
The onreadystatechange event
¤ The request status can be monitored by checking some properties of the XMLHttpRequest object ¤ XMLHttpRequest.readyState keeps track of the request
status (see next slide)
¤ XMLHttpRequest.onreadystatechange refers a function called every time XMLHttpRequest.readyState changes
¤ XMLHttpRequest.status is 200 when the response is OK and 404 when the page is not found
Values for XMLHttpRequest.readyState!
0: connection not initialized
1: connection initialized (asynchronous request)
4: complete response
3: send response
2: compute response
5: page update
Calling XMLHttpRequest.onreadystatechange!
xmlHttpRequest.onreadystatechange = function() {!if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)!
document.getElementById(“id”).innerHTML = !! ! ! !xmlHttpRequest.responseText;!
}!
This function is automatically called when XMLHttpRequest.readyState is changed
Retrieve the response in order to store it in the HTML page
onreadystatechange with callback functions
¤ A callback function is a function passed as a parameter to another function
¤ Useful when more than one AJAX task are used on the website, and one standard function is written for creating the XMLHttpRequest object
onreadystatechange with callback functions
function myFunction() {!loadXMLDoc(URL, function() {!
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)!document.getElementById(“id”).innerHTML =
xmlHttpRequest.responseText;!});!
}!!
References
References
¤ http://www.javalobby.org/articles/ajax-ria-overview/
¤ AJAX explained: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp