8/8/2019 web-20-ajax-basics-1196786878943915-2

1/20

Web 2.0 and AJAX

Abhishek Nagar

nagar.ksp@gmail.com

8/8/2019 web-20-ajax-basics-1196786878943915-2

2/20

Agenda

Definitions: Web 2.0 , AJAX

AJAX : Real Life Examples

Why AJAX? Technologies used in AJAX

XMLHttpRequest

Steps of AJAX Operation AJAX Security

8/8/2019 web-20-ajax-basics-1196786878943915-2

3/20

A little Web History

CGI / Perl & C

Servlets

JSP / ASP / PHP

Java Based frameworks

Struts, JSF & many others

Other Scripting

Python, Ruby

But all these kept the same (1.0) UI

8/8/2019 web-20-ajax-basics-1196786878943915-2

4/20

Web 2.0 by examples

Web 1.0

Double Click

Ofoto Britannica Online

Personal Websites

Directories

Web 2.0

Google Adsense

Flickr Wikipedia

Blogging

Social Web

8/8/2019 web-20-ajax-basics-1196786878943915-2

5/20

Web 2.0 by definitions

Not just a technology

Web as a platform

Collective Intelligence

Data is key and should be shared

Lightweight Programming Models

The network is the computer

Rich User Experience

Largely driven by hobbyists

8/8/2019 web-20-ajax-basics-1196786878943915-2

6/20

So what is WEB 2.0

Technologies Blogging, Wikis AJAX, Rich Internet clients

Attitudes Sharing, Connected, Participatory

Services, Users Engaged Services

Flickr, BitTorrent Maps, Wikipedia Google, Yahoo etc

Drivers Faster Connectivity More available connectivity More powerful machines Customers More Comfortable with Technology Browser wars (almost) over

8/8/2019 web-20-ajax-basics-1196786878943915-2

7/20

AJAX

Asynchronous Javascript + XML DHTML plus Asynchronous communication

capability through XMLHttpRequest Pros

Most viable technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No plug-in required

Cons Still browser incompatibility JavaScript is hard to maintain and debug

neither new, nor a technology

8/8/2019 web-20-ajax-basics-1196786878943915-2

8/20

AJAX : Real Life Examples

Google Maps http://maps.google.com/

Google Suggest http://www.google.com/webhp?complete=1&hl=en

Gmail http://gmail.com/

Yahoo Maps (New) http://maps.yahoo.com/

Wikipedia http://en.wikipedia.com/

Many many more

8/8/2019 web-20-ajax-basics-1196786878943915-2

9/20

Why AJAX?

Intuitive and natural user interaction No clicking required

Mouse movement is a sufficient event trigger

"Partial screen update" replaces the "click, wait,and refresh" user interaction model Only user interface elements that contain new information

are updated (fast response)

The rest of the user interface remains displayed without

interruption (no loss of operational context)

Data-driven (as opposed to page-driven) UI is handled in the client while the server provides data

8/8/2019 web-20-ajax-basics-1196786878943915-2

10/20

Why AJAX?

Asynchronous communication replacessynchronous request/response model.

A user can continue to use the application while the clientprogram requests information from the server in thebackground

Separation of displaying from data fetching

8/8/2019 web-20-ajax-basics-1196786878943915-2

11/20

Technologies Used in AJAX

Javascript

DOM

CSS

XMLHttpRequest

8/8/2019 web-20-ajax-basics-1196786878943915-2

12/20

XMLHttpRequest

Javascript

Adopted from modern browsers Mozilla, Safari and Opera

Communicates with a server via standard HTTPGET/POST

XMLHttpRequest object works in the background forperforming asynchronous communication with thebackend server Does not interrupt user operation

8/8/2019 web-20-ajax-basics-1196786878943915-2

13/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

Konqueror

Opera 7.6 and above

and many more

8/8/2019 web-20-ajax-basics-1196786878943915-2

14/20

8/8/2019 web-20-ajax-basics-1196786878943915-2

15/20

Classic Model

Interrupted user operation

while the data is being fetched

8/8/2019 web-20-ajax-basics-1196786878943915-2

16/20

The AJAX Model

Uninterrupted user operation

while the data is being fetched

8/8/2019 web-20-ajax-basics-1196786878943915-2

17/20

Steps of AJAX operation

A client event occurs

An XMLHttpRequest object is created

The XMLHttpRequest object is configured

The XMLHttpRequest object makes an async. Request

The Validate Servlet returns an XML document containingthe result

The XMLHttpRequest object calls the callback() function andprocesses the result

The HTML DOM is updated

8/8/2019 web-20-ajax-basics-1196786878943915-2

18/20

AJAX Security : Server Side

AJAX-based Web applications use the

same server side security schemes of

regular Web applications

AJAX-based Web applications are

subject to the same security threats asregular Web applications

8/8/2019 web-20-ajax-basics-1196786878943915-2

19/20

AJAX Security : Client Side

JavaScript code is visible to a

user/hacker

JavaScript code is downloaded from the

server and executed at the client

8/8/2019 web-20-ajax-basics-1196786878943915-2

20/20

Thank You

Abhishek Nagar