SlideShare une entreprise Scribd logo
1  sur  23
From Desktop Applications towards Ajax Web Applications
Agenda

    1   A brief History and Introduction of Ajax

    2   Defining Ajax &Technologies incorporated

✓   3   Communication

    4   The insight of Ajax Web Applications.

    5   Features of Ajax

    6   Conclusion
History

 1990’s-Webpages were completely Static.
 1995 – First version of JAVA with Applets.
 1996 – Microsoft introduced iFrame element to HTML.
 1999 – Dynamic Update of News stories and Stock
          quotes on msn.com
 1999 – Creation of XMLHttpActivex control and
         XMLHttpRequest Object.
 2002 – OddPost
History (contd..)

 2004 – Gmail
 2005 – Google Maps
 2005 – Jesse James Garrett’s article:”AJAX – A New
          Approach to Web applications”.
 2006 – W3C released first draft for XHR object.
Defining Ajax




  Ajax is not
        A technology
        A new Programming Language
        A Platform.
Defining Ajax



  Ajax is
     A technique that uses set of open standard
      technologies with support by cross-browser and
      cross-platform compatibility.
     It incorporates several technologies, each flourishing
      in its own right, coming together in powerful new ways.
     These technologies work together in different levels
      each with specific functionality.
Defining Ajax
        The technologies,levels,languages
and protocols used are


  Ajax incorporates
  • The Hypertext Transfer Markup Languages: HTML,
      XHTML, XML.
  •  Language to describe the presentation of a document:
     Cascading Style Sheets (CSS).
  • Interaction and dynamic display: W3C Document Object
     Model.
  • Client-side language and parse data: JavaScript.
  • Asynchronous data transfer and communication with
    the server : XMLHttpRequest object (XHR).
Defining Ajax
        The technologies,levels,languages
and protocols used are (cont..)


  Ajax incorporates
  • Manipulation, transformation and data exchange:
     XML, XSLT, HTML, JSON, Plain Text.
  • Transfer Protocol: HTTP, HTTPS.
  • Server-side languages: JSP, JSF, Perl, Ruby, PHP,
       Cold Fusion, ASP, and CGI applications.
Examples
Google Suggest:




Google Maps:
Examples(cont..)




Gmail Registration        Yahoo! Sports
Communication

 Communication usually occurs in two ways as following

       Synchronous(Traditional way)
       Asynchronous(Ajax way)
Synchronous Comm..

• Classical way of connection.
• Publication of information in static
  web pages is good example.
• The communication occurs as
       1. User Http request to server
       2. Server Process request (includes
          data retrieval and processing)
       3. Returns a HTML Page to the
          Client
Synchronous Comm..(contd..)

Traditional Web interaction


                              Client makes http request




                              Server returns a new page
                                                          Web server
Asynchronous Comm..

Ajax Web Interaction


                       Client makes http request for specific information




                               Server returns the requested information
                                                                            Web server




                                        Multiple requests are served
Synchronous Comm..(Contd..)




          Broken user activity and full page reload
Asynchronous Comm..(contd..)




            Ajax way of Communication
Insight of Ajax Web Application


 •   Ajax application in client side is formed of three layers
                    • User Interface (XHTML,DOM,CSS)
                    • Java script Code
                    • Ajax Engine
 •   Object for asynchronous communication is created based on the browser
      used.
           • Internet Explorer (ActiveX Object)
           • Firefox , Safari (XMLHttpRequest Object)
 •   XHR object sends request in asynchronous way, this request is through
     HTTP or HTTPS
Examples(cont..)
Features: Advantages


• Advantages
     • Cross-Browser and Cross-Platform Compatibility.
     • Ajax application can be build with open standards
        technologies, is not tied to proprietary software.
     • Lower cost of development.
     • The code can be optimized and separated.
     • More rich interaction with the user, by example:autocomplete, drag
       and drop, transparency, shading, Z-ordering, etc.
     • More speed, and less wait time for screen updated.
     • Widespread adoption of Ajax by industry leaders.
     • Integration with others proprietaries technologies.
Features : Disadvantages


• Disadvantages
     •   Same security problems as in classic Web applications.
     •   Think of different way in the development and design.
     •   The use of frameworks can generate complexity.
     •   More interaction through JavaScript.
     •   More code for old browser.
     •   Special code for some functions of Internet Explorer.
Who’s Using Ajax?
Conclusions

•   E-mails, calendars, spreadsheets, information managers,
    and word processors, are migrating of the traditional installation
    of programs in local desktop, towards Ajax Web applications.
•   These Ajax applications have the similar interactivity and speed as desktop
    programs. The Ajax Web applications are producing radically changes
    towards a new Internet age. New, better, useful and successful
     applications based on Ajax, are near.
•   It is necessary to understand and have some research how Ajax is working
     inside its new paradigms.
THANK YOU!

Contenu connexe

Tendances

Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
dominion
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
thinkphp
 

Tendances (20)

Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
PHP - Introduction to PHP AJAX
PHP -  Introduction to PHP AJAXPHP -  Introduction to PHP AJAX
PHP - Introduction to PHP AJAX
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
AJAX
AJAXAJAX
AJAX
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client application
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Architecture in Ajax Applications
Architecture in Ajax ApplicationsArchitecture in Ajax Applications
Architecture in Ajax Applications
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Overview of AJAX
Overview of AJAXOverview of AJAX
Overview of AJAX
 

Similaire à Ajax:From Desktop Applications towards Ajax Web Applications

Ajax Basics And Framework
Ajax Basics And FrameworkAjax Basics And Framework
Ajax Basics And Framework
shivas
 
AJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptxAJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptx
Jobin86
 
Web Development Technologies
Web Development TechnologiesWeb Development Technologies
Web Development Technologies
Vignesh Prajapati
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
Chamnap Chhorn
 

Similaire à Ajax:From Desktop Applications towards Ajax Web Applications (20)

WEB TECHNOLOGY Unit-5.pptx
WEB TECHNOLOGY Unit-5.pptxWEB TECHNOLOGY Unit-5.pptx
WEB TECHNOLOGY Unit-5.pptx
 
Asynchronous javascript and xml
Asynchronous javascript and xmlAsynchronous javascript and xml
Asynchronous javascript and xml
 
Ajax & Reverse Ajax Presenation
Ajax & Reverse Ajax PresenationAjax & Reverse Ajax Presenation
Ajax & Reverse Ajax Presenation
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Lessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX ExperiencesLessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX Experiences
 
Lessons
LessonsLessons
Lessons
 
Signal R 2015
Signal R 2015Signal R 2015
Signal R 2015
 
Ajax
AjaxAjax
Ajax
 
Ajax
Ajax Ajax
Ajax
 
Ajax Basics And Framework
Ajax Basics And FrameworkAjax Basics And Framework
Ajax Basics And Framework
 
AJAX - An introduction
AJAX - An introductionAJAX - An introduction
AJAX - An introduction
 
AJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptxAJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptx
 
AJAX
AJAXAJAX
AJAX
 
Web Development Technologies
Web Development TechnologiesWeb Development Technologies
Web Development Technologies
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01
 
Intoduction to Ajax
Intoduction to AjaxIntoduction to Ajax
Intoduction to Ajax
 
Ajax introduction
Ajax introductionAjax introduction
Ajax introduction
 
Fundamentals of Web for Non-Developers
Fundamentals of Web for Non-DevelopersFundamentals of Web for Non-Developers
Fundamentals of Web for Non-Developers
 

Dernier

Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Dernier (20)

FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 

Ajax:From Desktop Applications towards Ajax Web Applications

  • 1. From Desktop Applications towards Ajax Web Applications
  • 2. Agenda 1 A brief History and Introduction of Ajax 2 Defining Ajax &Technologies incorporated ✓ 3 Communication 4 The insight of Ajax Web Applications. 5 Features of Ajax 6 Conclusion
  • 3. History  1990’s-Webpages were completely Static.  1995 – First version of JAVA with Applets.  1996 – Microsoft introduced iFrame element to HTML.  1999 – Dynamic Update of News stories and Stock quotes on msn.com  1999 – Creation of XMLHttpActivex control and XMLHttpRequest Object.  2002 – OddPost
  • 4. History (contd..)  2004 – Gmail  2005 – Google Maps  2005 – Jesse James Garrett’s article:”AJAX – A New Approach to Web applications”.  2006 – W3C released first draft for XHR object.
  • 5. Defining Ajax  Ajax is not  A technology  A new Programming Language  A Platform.
  • 6. Defining Ajax  Ajax is  A technique that uses set of open standard technologies with support by cross-browser and cross-platform compatibility.  It incorporates several technologies, each flourishing in its own right, coming together in powerful new ways.  These technologies work together in different levels each with specific functionality.
  • 7. Defining Ajax The technologies,levels,languages and protocols used are Ajax incorporates • The Hypertext Transfer Markup Languages: HTML, XHTML, XML. • Language to describe the presentation of a document: Cascading Style Sheets (CSS). • Interaction and dynamic display: W3C Document Object Model. • Client-side language and parse data: JavaScript. • Asynchronous data transfer and communication with the server : XMLHttpRequest object (XHR).
  • 8. Defining Ajax The technologies,levels,languages and protocols used are (cont..) Ajax incorporates • Manipulation, transformation and data exchange: XML, XSLT, HTML, JSON, Plain Text. • Transfer Protocol: HTTP, HTTPS. • Server-side languages: JSP, JSF, Perl, Ruby, PHP, Cold Fusion, ASP, and CGI applications.
  • 11. Communication  Communication usually occurs in two ways as following  Synchronous(Traditional way)  Asynchronous(Ajax way)
  • 12. Synchronous Comm.. • Classical way of connection. • Publication of information in static web pages is good example. • The communication occurs as 1. User Http request to server 2. Server Process request (includes data retrieval and processing) 3. Returns a HTML Page to the Client
  • 13. Synchronous Comm..(contd..) Traditional Web interaction Client makes http request Server returns a new page Web server
  • 14. Asynchronous Comm.. Ajax Web Interaction Client makes http request for specific information Server returns the requested information Web server Multiple requests are served
  • 15. Synchronous Comm..(Contd..) Broken user activity and full page reload
  • 16. Asynchronous Comm..(contd..) Ajax way of Communication
  • 17. Insight of Ajax Web Application • Ajax application in client side is formed of three layers • User Interface (XHTML,DOM,CSS) • Java script Code • Ajax Engine • Object for asynchronous communication is created based on the browser used. • Internet Explorer (ActiveX Object) • Firefox , Safari (XMLHttpRequest Object) • XHR object sends request in asynchronous way, this request is through HTTP or HTTPS
  • 19. Features: Advantages • Advantages • Cross-Browser and Cross-Platform Compatibility. • Ajax application can be build with open standards technologies, is not tied to proprietary software. • Lower cost of development. • The code can be optimized and separated. • More rich interaction with the user, by example:autocomplete, drag and drop, transparency, shading, Z-ordering, etc. • More speed, and less wait time for screen updated. • Widespread adoption of Ajax by industry leaders. • Integration with others proprietaries technologies.
  • 20. Features : Disadvantages • Disadvantages • Same security problems as in classic Web applications. • Think of different way in the development and design. • The use of frameworks can generate complexity. • More interaction through JavaScript. • More code for old browser. • Special code for some functions of Internet Explorer.
  • 22. Conclusions • E-mails, calendars, spreadsheets, information managers, and word processors, are migrating of the traditional installation of programs in local desktop, towards Ajax Web applications. • These Ajax applications have the similar interactivity and speed as desktop programs. The Ajax Web applications are producing radically changes towards a new Internet age. New, better, useful and successful applications based on Ajax, are near. • It is necessary to understand and have some research how Ajax is working inside its new paradigms.