Asynchronous JavaScript and XML

nutmegactSoftware and s/w Development

Nov 11, 2012 (4 years and 7 months ago)

242 views

1

Copyright 2010 NK All rights reserved

A Component Technology


Asynchronous
JavaScript

and XML


(Ajax)

2

What
Is

AJAX?


Asynchronous JavaScript and XML




Type of programming made
-

in 2005 by Google (with Google Suggest)




Not a new programming language




AJAX is the art of exchanging data with a server.




Update parts of a web page
-

without reloading the whole page.




Copyright 2004 NK All rights reserved

3

WHAT ARE THE PROBLEMS WITH
WEB APPLICATIONS?



Too many round trips by client



Users have to wait for page refreshes



No instant feedback for user


Copyright 2004 NK All rights reserved

4

Why use AJAX ?


To build a fast, dynamic website




requests can be made asynchronously or synchronously




modify a part of a page displayed by the browser, and
update it



Copyright 2010 NK All rights reserved

5

Traditional Web Application

1.
The application shows a list of employees to pick from.




Copyright 2010 NK All rights reserved

6

Traditional Web Application

2.

When the user chooses an employee, the server returns a
new page (FIRST REFRESH).

Copyright 2010 NK All rights reserved

7

Traditional Web Application

3.
edits the employee data and submit the form
-

returns the
new page (SECOND REFRESH).













4.
To modify other employee's data
-

click on the "Employee
List" link (THIRD REFRESH).




Copyright 2010 NK All rights reserved

8

An Ajax Web Application

1. When the user chooses an employee, the page doesn't reload




Copyright 2010 NK All rights reserved

9

An Ajax Web Application

2.

The user can then edit the form fields.




Copyright 2010 NK All rights reserved

10

An Ajax Web Application

4.
The employee list is updated to reflect the changes made.















Only one complete refresh. This is the major benefit of Ajax.





11


AJAX IS BASED ON INTERNET
STANDARDS AND USES A
COMBINATION OF:



XMLHttpRequest object (to exchange data asynchronously with a
server)



JavaScript/DOM (to display/interact with the information)




CSS (to style the data)




XML (often used as the format for transferring data)


Copyright 2010 NK All rights reserved

12

XMLHttpRequest Object


First introduced by Microsoft in 1997.



Used in IE 5.0



Used to make asynchronous request and response



No post back, no full refresh of the page.



Adopted by all other major browsers



Contains methods and properties



Copyright 2010 NK All rights reserved

13

Properties of XMLHttpRequest

object

Copyright 2010 NK All rights reserved

Property

Meaning

readyState

indicates the state of the asynchronous request

responseXML

Contains XML document sent from server

responseText

Contains text sent from server

Status

Status code of the response

statusText

status text sent by server

14

onreadyStateChange Event

Copyright 2010 NK All rights reserved


Onreadystatechange

event specifies the javascript function to be called

When readystate property changes. Generally it examines
readystate

property before processing the response


readystate property

It contain a value that indicates the state of asynchronous request.



Value

Description

0

object created but not initialized

1

open() method is called but not sent

2

send() is called but yet to receive response

3

Receiving response.Body is not yet received

4

Response has been completely received

15

Methods of XMLHttpRequest

object

Method

Meaning

open(method,url,async,uname,
pwd)

Prepares an asynchronous request.

send(value)

sends the request with the give value. The
values are passed to server in http post
request

setRequestHeader(name,value)

Sets request header to the given value.

getResponseHeader(name)

Returns values of the specified response
header.

getAllResponseHeaders()

Returns all response headers as a string

abort()

Aborts the current request

Copyright 2010 NK All rights reserved

16

1


XMLHttpRequest object



object to connect to the remote server using JavaScript
function.


JavaScript must determine whether the client is IE or
Firefox

Creating the object


For IE 5.5:


objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);



For Mozilla:


objXmlHttp=new XMLHttpRequest();











Copyright 2010 NK All rights reserved

Var object;

17

2
-

Sending the request





xhr.open("GET", serverurl, true);



xhr.onreadystatechange = jsMethodToHandleResponse;



xhr.send(null);




When the response returns the JavaScript method
jsMethodToHandleResponse can update the page









Copyright 2010 NK All rights reserved

JavaScript method

called

Get request

Asynchronous request

18

3
-

Handling the Response



Implementation of the JavaScript method which will be used to


handle the response (Event Handler)

function jsMethodToHandleResponse(str)

{


if(xhr.readyState==4)


{ //Received, OK

} else


{


//Wait……………


}

}


Now the page has communicated with the server without


having to refresh the entire page



Copyright 2010 NK All rights reserved

19

Tools used for AJAX


NetBeans supports JavaScript editor and debugger



Mozilla FireBug debugger (add
-
on)


This is the most comprehensive and most useful
JavaScript debugger



Mozilla JavaScript console



Mozilla DOM inspector (comes with Firefox package)

Copyright 2010 NK All rights reserved

20

Browsers Which Support

XMLHttpRequest



Mozilla Firefox 1.0 and above



Netscape version 7.1 and above



Apple Safari 1.2 and above



Microsoft Internet Exporer 5 and above



Opera 7.6 and above







Copyright 2010 NK All rights reserved

21

Real World Examples


Google Maps (
http://maps.google.com/
) (slid able maps)



My Yahoo! (
http://my.yahoo.com/
) (shuffling windows)




Gmail

(
http://gmail.com
/

)



Yahoo Maps (new)

(
http://maps.yahoo.com/

)




Many more are popping everywhere








Copyright 2010 NK All rights reserved

22

Key Aspects of Google Maps


A user can drag the entire map by using the mouse


Instead of clicking on a button or something


The action that triggers the download of new map data
is not a specific click on a link but a moving the map
around with a mouse



Behind the scene
-

AJAX is used


The map data is requested and downloaded
asynchronously in the background



Other parts of the page remains the same


No loss of operational context








Copyright 2010 NK All rights reserved

23

USAGE CASES OF AJAX


Real

time server
-
side input for validation


-

Removes the need to have validation logic at both client side for user



responsiveness and at server side for security and other reasons



Auto
-
completion


-

Email address, name, or city name may be auto
-
completed as the
user types



Master
detail

operation


-

Based on a user selection, more detailed information can be fetched
and displayed



Refreshing

Data


-

HTML pages may poll data from a server for up
-
to
-
date data such as
scores, stock quotes, weather, or application
-
specific data



Copyright 2010 NK All rights reserved

24

Advantages


Asynchronous



Minimal data transfer



Responsiveness



Context is maintained



No plug
-
in/code to be downloaded



Tremendous industry acceptance







Copyright 2010 NK All rights reserved

25

Disadvantages of AJAX


May be disabled (for security reasons ) or not
available on some browsers



Debugging is difficult



Break back button support



URL’S does not change as state changes







Copyright 2010 NK All rights reserved

26

AJAX Futures



Standardization of XMLHttpRequest



Better browser support



More best practice guidelines in the programming
model

Copyright 2010 NK All rights reserved

27








Copyright 2010 NK All rights reserved