ajax - the basics

Asynchronous

Javascript

And

XML

HISTORY

1990s websites are based on complete HTML pages- user actions required complete pages to be loaded from the server

- additional load on the server and used excessive bandwidth

1996 Internet Explorer introduced the iframe tag- allowed asynchronous loading of content

HISTORY

1998 Microsoft Outlook Web Access Team created the first XMLHTTP component

1999 Microsoft added the XMLHTTP ActiveX component to Internet Explorer 5

- later adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest object

“…while nobody I know used it, the function stayed there, waiting to be taken advantage of.”Aaron Swartz, W3C

HISTORY

2004 Google realized the potential of the XMLHttpRequest object

- created Gmail

2005 Google created Google MapsFebruary 18 Jesse James Garrett of Adaptive Path coined the term “AJAX” based

on techniques used on Google pages

WHAT IS IT?

a group of interrelated web development techniques used on the client-side to create asynchronous web applications

WHAT IS IT?

not just a single technology- HTML and CSS

- Document Object Model (DOM)

- XMLHttpRequest

- Javascript

WHAT IS IT?

despite the name, it is not necessary to use XML for data interchange

- preformatted HTML

- Javascript Object Notation (JSON)

requests to the server can be synchronous

- plain text

WHERE IS IT USED?

login forms

auto-complete

voting and rating

updating user content external widgets

form validations

chat rooms

instant messaging

…and many more

HOW IT WORKS

user requests a pageURL

browser sends request to the server

HOW IT WORKS

server receives the request and prepares the requested page

user stares at a blank page while waiting for the requested page to load

URL

HOW IT WORKS

Javascript

server sends the requested page to the browser

HTML

CSS

URL

HOW IT WORKS

URL

browser renders the page and executes additional scripts

creates XMLHttpRequest object

user can now interact with the page

HOW IT WORKS

URL

page tells the XMLHttpRequest object to send a request to the server

XMLHttpRequest object sends request to the server

HOW IT WORKS

URL

server receives and processes the request

user can continue interacting with the page

HOW IT WORKS

URL

server sends response to the XMLHttpRequest object

HOW IT WORKS

URL

Javascript processes the server response

HOW TO DO IT

creating an XMLHttpRequest object

sending a request to the server

handling server response

HOW TO DO ITcreating an XMLHttpRequest object

var xhr = new XMLHttpRequest();

var xhr;if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();} else {

try {xhr = new ActiveXObject(‘Msxml2.XMLHTTP');

} catch (e) {try {xhr = new ActiveXObject(‘Microsoft.XMLHTTP');

} catch (e) {}}

}

modern browsers

older versions of IE

cross-browser compatibility

HOW TO DO ITsending a request to the server

xhr.open(method, url, async);

initialize the request

method – string, HTTP request method (GET or POST)

url – string, the URL to send the request to

async – boolean, whether to perform the operation asynchronously

HOW TO DO ITsending a request to the server

xhr.setRequestHeader(header, value);

set the request headers

header – string, the name of the request header

value – string, the value of the request header

HOW TO DO ITsending a request to the server

xhr.send(data);

send the request

data – the data to be sent to the server

note: - data is ignored if request method is GET

HOW TO DO IThandling server response

readystatechange event- triggered when the readyState property of the XMLHttpRequest object gets changed

readyState values- 0 – UNSENT

- 1 – OPENED

- 2 – HEADERS_RECEIVED

- 3 – LOADING

- 4 – DONE

HOW TO DO IThandling server response

xhr.onreadystatechange = nameOfCallbackFunction;

listen for the readystatechange event

xhr.onreadystatechange = function() {

}

note: - this must be performed already before calling the send() function

HOW TO DO IThandling server response

xhr.onreadystatechange = function() {if (xhr.readyState == 4) {

}}

checking the readyState

note: - readyState becomes DONE when either the request completed successfully or something went wrong

HOW TO DO IThandling server response

xhr.onreadystatechange = function() {if (xhr.readyState == 4) {

if (xhr.status == 200) {// request completed successfully

} else {// something went wrong

}}

}

checking the response status

HTTP Status Codes200 – OK

404 – NOT FOUND

500 – INTERNAL ERROR

503 – GATEWAY TIMEOUT

etc.

HOW TO DO IThandling server response

xhr.onreadystatechange = function() {if (xhr.readyState == 4) {

if (xhr.status == 200) {var response = xhr.responseText;

} else {// something went wrong

}}

}

get the server’s response

- returns the response as a string

xhr.onreadystatechange = function() {if (xhr.readyState == 4) {if (xhr.status == 200) {

var response = xhr.responseXML;} else {

// something went wrong}

}}

- returns the response as an XMLDocument object, traversable using Javascript DOM functions

HOW TO DO ITsample source code

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {if (xhr.readyState == 4) {

if (xhr.status == 200) {alert(xhr.responseText);

} else {alert('Something went wrong!');

}}

}

xhr.open('GET', 'server.php');Xhr.send();

$.ajax({url: 'server.php',type: 'GET',success: function(response) {alert(response);

},error: function() {alert('Something went wrong!');

}});

Native Javascript jQuery

the end