Web 2.0 and AJAX



                         Abhishek Nagar
                   nagar.ksp@gmail.com
Agenda
•   Definitions: Web 2.0 , AJAX
•   AJAX : Real Life Examples
•   Why AJAX?
•   Technologies used in AJAX
    – XML...
A little Web History
•   CGI / Perl & C
•   Servlets
•   JSP / ASP / PHP
•   Java Based frameworks
    – Struts, JSF & man...
Web 2.0 by examples
        Web 1.0                 Web 2.0
•                       •
    Double Click            Google A...
Web 2.0 by definitions
•   Not just a technology
•   Web as a platform
•   Collective Intelligence
•   Data is key and sho...
So what is WEB 2.0
•   Technologies
    – Blogging, Wikis
    – AJAX, Rich Internet clients
•   Attitudes
    – Sharing, C...
AJAX
Asynchronous Javascript + XML
• DHTML plus Asynchronous communication
  capability through XMLHttpRequest
• Pros
  – ...
AJAX : Real Life Examples
• Google Maps
  – http://maps.google.com/
• Google Suggest
  – http://www.google.com/webhp?compl...
Why AJAX?
• Intuitive and natural user interaction
   – No clicking required
   – Mouse movement is a sufficient event tri...
Why AJAX?
• Asynchronous communication replaces
  synchronous request/response model.

  – A user can continue to use the ...
Technologies Used in AJAX
• Javascript

• DOM

• CSS

• XMLHttpRequest
XMLHttpRequest
• Javascript

• Adopted from modern browsers
   – Mozilla, Safari and Opera


• Communicates with a server ...
Browsers which support
XMLHttpRequest
•Mozilla Firefox 1.0 and above
•Netscape version 7.1 and above
•Apple Safari 1.2 and...
Classic Vs. AJAX Model
Classic Model




         Interrupted user operation
        while the data is being fetched
The AJAX Model




     Uninterrupted user operation
     while the data is being fetched
Steps of AJAX operation
•   A client event occurs

•   An XMLHttpRequest object is created

•   The XMLHttpRequest object ...
AJAX Security : Server Side
• AJAX-based Web applications use the
  same server side security schemes of
  regular Web app...
AJAX Security : Client Side
• JavaScript code is visible to a
  user/hacker

• JavaScript code is downloaded from the
  se...
Thank You




            Abhishek Nagar
Upcoming SlideShare
Loading in …5
×

Web 2.0 & Ajax Basics

2,799 views

Published on

A Basic Intoduction to What is AJAX Why AJAX

XMLHttpRequest Basic

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,799
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
238
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web 2.0 & Ajax Basics

  1. 1. Web 2.0 and AJAX Abhishek Nagar nagar.ksp@gmail.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Technologies Used in AJAX • Javascript • DOM • CSS • XMLHttpRequest
  12. 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. 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. 14. Classic Vs. AJAX Model
  15. 15. Classic Model Interrupted user operation while the data is being fetched
  16. 16. The AJAX Model Uninterrupted user operation while the data is being fetched
  17. 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. 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. 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. 20. Thank You Abhishek Nagar

×