This document discusses Web 2.0 and AJAX technologies. It defines Web 2.0 as focusing on user participation, sharing, and collaboration using technologies like blogs, wikis, and AJAX. AJAX is defined as using asynchronous JavaScript and XML to update parts of a web page asynchronously without reloading the entire page. Examples of popular AJAX applications are given like Gmail and Google Maps. The technologies used in AJAX like XMLHttpRequest are discussed along with the asynchronous request-response process and browser support. Security considerations for both server-side and client-side AJAX applications are also covered.

1. Web 2.0 and AJAX
Abhishek Nagar
nagar.ksp@gmail.com

2. Agenda
• Definitions: Web 2.0 , AJAX
• AJAX : Real Life Examples
• Why AJAX?
• Technologies used in AJAX
– XMLHttpRequest
• Steps of AJAX Operation
• AJAX Security

3. 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

4. Web 2.0 by examples
Web 1.0 Web 2.0
• •
Double Click Google Adsense
• •
Ofoto Flickr
• •
Britannica Online Wikipedia
• •
Personal Websites Blogging
• •
Directories Social Web

5. 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

6. 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

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

9. Why AJAX?
• Intuitive and natural user interaction
– No clicking required
– Mouse movement is a sufficient event trigger
• quot;Partial screen updatequot; replaces the quot;click, wait,
and refreshquot; 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

10. 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

11. Technologies Used in AJAX
• Javascript
• DOM
• CSS
• XMLHttpRequest

12. 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

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

14. Classic Vs. AJAX Model

15. Classic Model
Interrupted user operation
while the data is being fetched

16. The AJAX Model
Uninterrupted user operation
while the data is being fetched

17. 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

18. 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

19. AJAX Security : Client Side
• JavaScript code is visible to a
user/hacker
• JavaScript code is downloaded from the
server and executed at the client

20. Thank You
Abhishek Nagar