SlideShare a Scribd company logo
1 of 32
Welcome to One & AllG    d Day Seminar on  AJAX
AJAX :Asynchronous JavaScript And XML
Back then : Click Search
And you get this :
These days :
The magic spell behind this is :AJAX
So what is Ajax ? ,[object Object]
 A new technology – not exactly…
 So what else ? It is a methodology on using several web technologies together, in an effort to close the gap between the usability and interactivity of a desktop application and the ever demanding web application 
Order of Developments Internet Explorer introduces the concept of IFrame element in 1996.(a technique that helps in loading the contents of a web page.) In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s Remote Scripting’ as a replacement to the older techniques.
A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveX control, in IE 5.  The term AJAX is coined on February 18, 2005, by Jesse James Garret in a short essay published a few days after Google released its Maps application.
Finally, in the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which includes the specification for the object (XHR) and makes it an official web standard.
Why Ajax is important ? ,[object Object]
Developers can now provide user interfaces that are nearly as   responsive and rich as more traditional Windows Forms applications while taking advantage of the Web's innate ease of deployment and heterogeneous, cross-platform nature.
These benefits have been shown to dramatically reduce software maintenance costs and increase its reach. You can use AJAX to load specific portions of  a page that need to be changed.
It further reduces network traffic.,[object Object]
The process cycle
A little about XHR object
The readyState values
A few status values
Let’s get to some work 
Example ( cont...)
( cont...)
Output page looks like this :
Interactive mouse-overs
Here comes another Ajax example — one that’s a little more impressive visually. When you move the mouse over one of the images on this page, the application fetches text for that mouseover by using Ajax. All you really have to do is to connect the getData function (which fetches text data and displays it in the <div> element whose name you pass) to the ‘onmouseover’ event of each of the images you see in Figure 3-3.
Take a look at this :
    How to do this :
    Here’s the content of sandwiches.txt :      and pizzas.txt :     and soups.txt :
Hm…done with coding 

More Related Content

What's hot

[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 

What's hot (20)

Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
What Is Express JS?
What Is Express JS?What Is Express JS?
What Is Express JS?
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
java Servlet technology
java Servlet technologyjava Servlet technology
java Servlet technology
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Form Handling using PHP
Form Handling using PHPForm Handling using PHP
Form Handling using PHP
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Javascript
JavascriptJavascript
Javascript
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 

Similar to Ajax ppt - 32 slides

Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
petrov
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
george.james
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look
rumsan
 

Similar to Ajax ppt - 32 slides (20)

Asynchronous javascript and xml
Asynchronous javascript and xmlAsynchronous javascript and xml
Asynchronous javascript and xml
 
Intoduction to Ajax
Intoduction to AjaxIntoduction to Ajax
Intoduction to Ajax
 
25250716 seminar-on-ajax text
25250716 seminar-on-ajax text25250716 seminar-on-ajax text
25250716 seminar-on-ajax text
 
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
 
Ajax
AjaxAjax
Ajax
 
AJAX
AJAXAJAX
AJAX
 
Ajax & Reverse Ajax Presenation
Ajax & Reverse Ajax PresenationAjax & Reverse Ajax Presenation
Ajax & Reverse Ajax Presenation
 
Ajax
AjaxAjax
Ajax
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
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
 
01 Ajax Intro
01 Ajax Intro01 Ajax Intro
01 Ajax Intro
 
M Ramya
M RamyaM Ramya
M Ramya
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
 
Java Script - A New Look
Java Script - A New LookJava Script - A New Look
Java Script - A New Look
 
Ajax
AjaxAjax
Ajax
 

Recently uploaded

Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
EADTU
 

Recently uploaded (20)

Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Economic Importance Of Fungi In Food Additives
Economic Importance Of Fungi In Food AdditivesEconomic Importance Of Fungi In Food Additives
Economic Importance Of Fungi In Food Additives
 
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdfFICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
 
PANDITA RAMABAI- Indian political thought GENDER.pptx
PANDITA RAMABAI- Indian political thought GENDER.pptxPANDITA RAMABAI- Indian political thought GENDER.pptx
PANDITA RAMABAI- Indian political thought GENDER.pptx
 
Introduction to TechSoup’s Digital Marketing Services and Use Cases
Introduction to TechSoup’s Digital Marketing  Services and Use CasesIntroduction to TechSoup’s Digital Marketing  Services and Use Cases
Introduction to TechSoup’s Digital Marketing Services and Use Cases
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
Play hard learn harder: The Serious Business of Play
Play hard learn harder:  The Serious Business of PlayPlay hard learn harder:  The Serious Business of Play
Play hard learn harder: The Serious Business of Play
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Tatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf artsTatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf arts
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
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
 
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
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdfUGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
 

Ajax ppt - 32 slides

  • 1. Welcome to One & AllG d Day Seminar on AJAX
  • 3. Back then : Click Search
  • 4. And you get this :
  • 6. The magic spell behind this is :AJAX
  • 7.
  • 8. A new technology – not exactly…
  • 9. So what else ? It is a methodology on using several web technologies together, in an effort to close the gap between the usability and interactivity of a desktop application and the ever demanding web application 
  • 10. Order of Developments Internet Explorer introduces the concept of IFrame element in 1996.(a technique that helps in loading the contents of a web page.) In the year 1998, Microsoft introduces another technique, called ‘Microsoft’s Remote Scripting’ as a replacement to the older techniques.
  • 11. A year later, in 1999, Microsoft introduces the XMLHttpRequest object, an ActiveX control, in IE 5. The term AJAX is coined on February 18, 2005, by Jesse James Garret in a short essay published a few days after Google released its Maps application.
  • 12. Finally, in the year 2006, the W3C (World Wide Web Consortium) announces the release of the first draft which includes the specification for the object (XHR) and makes it an official web standard.
  • 13.
  • 14. Developers can now provide user interfaces that are nearly as responsive and rich as more traditional Windows Forms applications while taking advantage of the Web's innate ease of deployment and heterogeneous, cross-platform nature.
  • 15. These benefits have been shown to dramatically reduce software maintenance costs and increase its reach. You can use AJAX to load specific portions of a page that need to be changed.
  • 16.
  • 18.
  • 19. A little about XHR object
  • 20.
  • 22. A few status values
  • 23. Let’s get to some work 
  • 26. Output page looks like this :
  • 28. Here comes another Ajax example — one that’s a little more impressive visually. When you move the mouse over one of the images on this page, the application fetches text for that mouseover by using Ajax. All you really have to do is to connect the getData function (which fetches text data and displays it in the <div> element whose name you pass) to the ‘onmouseover’ event of each of the images you see in Figure 3-3.
  • 29. Take a look at this :
  • 30. How to do this :
  • 31. Here’s the content of sandwiches.txt : and pizzas.txt : and soups.txt :
  • 33.  Benefits of using Ajax Helps to build fast, dynamic websites. Improves sharing of resources : it facilitates to use the power of all the client computers rather than just a unique server and network. Ajax allows to perform processing on client computer (in JavaScript) with data taken from the server thereby reducing server load by moving a part of server functionality to client side. Ajax can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus etc. This bridges the gap between desktop and web applications.
  • 34.  A Few Drawbacks If JavaScript is not activated, Ajax can't works. The user must be asked to set JavaScript from within options of the browser, with the "noscript" tag. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines. The asynchronous mode may change the page with delays (when the processing on the server takes more time), this may be disturbing. The back button may be deactivated.
  • 36. A presentation by SmithBig thanks to “members of slideshare.net and the website crew”Special thanks toM Ramya, MCA IIIrd yr – member of slideshare.net