Web 2.0 & Ajax Basics

Web 2.0 and AJAX

Abhishek Nagarnagar.ksp@gmail.com

Agenda• Definitions: Web 2.0 , AJAX• AJAX : Real Life Examples• Why AJAX?• Technologies used in AJAX

– XMLHttpRequest• Steps of AJAX Operation• AJAX Security

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

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

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

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

AJAXAsynchronous 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

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

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

Why AJAX?

• Asynchronous communication replaces synchronous request/response model.

– A user can continue to use the application while the client program requests information from the server in the background

– Separation of displaying from data fetching

Technologies Used in AJAX• Javascript

• DOM

• CSS

• XMLHttpRequest

XMLHttpRequest• Javascript

• Adopted from modern browsers– Mozilla, Safari and Opera

• Communicates with a server via standard HTTP GET/POST

• XMLHttpRequest object works in the background for performing asynchronous communication with the backend server– Does not interrupt user operation

Browsers which supportXMLHttpRequest

• 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

Classic Vs. AJAX Model

Classic Model

Interrupted user operationwhile the data is being fetched

The AJAX Model

Uninterrupted user operationwhile the data is being fetched

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 containing the result

• The XMLHttpRequest object calls the callback() function and processes the result

• The HTML DOM is updated

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 as regular Web applications

AJAX Security : Client Side• JavaScript code is visible to a

user/hacker

• JavaScript code is downloaded from the server and executed at the client

Thank You

Abhishek Nagar