AJAX - An introduction

transcript

AJAX: an introduction Eleonora Ciceri

Ph.D student – Politecnico di Milano

eleonora.ciceri@polimi.it

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

JavaScript AJAX

Yes No

Ubiquity Industrial strength

Fancy animations

ü  JavaScript is available “out-of-the-box”

ü  It works on computers / mobile devices

JavaScript AJAX

Yes No

Fancy animations

ü  Maintainability ü  Reliability ü  Availability ü  Scalability

JavaScript AJAX

Yes No

Fancy animations

ü  Attractiveness ü  No (or few?)

support for mobile devices

JavaScript AJAX

Yes No

Fancy animations

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

¤  http://www.javalobby.org/articles/ajax-ria-overview/

¤  AJAX explained: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

AJAX - An introduction

Software