SlideShare a Scribd company logo
1 of 4
Download to read offline
Ajax: A New Approach to Web Applications
Defining Ajax

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own
right, coming together in powerful new ways. Ajax incorporates:

   •   standards-based presentation using XHTML and CSS;
   •   dynamic display and interaction using the Document Object Model;
   •   data interchange and manipulation using XML and XSLT;
   •   asynchronous data retrieval using XMLHttpRequest;
   •   and JavaScript binding everything together.


The classic web application model works like this: Most user actions in the interface
trigger an HTTP request back to a web server. The server does some processing —
retrieving data, crunching numbers, talking to various legacy systems — and then
returns an HTML page to the client. It’s a model adapted from the Web’s original use
as a hypertext medium, but as fans of The Elements of User Experience know, what
makes the Web good for hypertext doesn’t necessarily make it good for software
applications.

This approach makes a lot of technical sense, but it doesn’t make for a great user
experience. While the server is doing its thing, what’s the user doing? That’s right,
waiting. And at every step in a task, the user waits some more.

Obviously, if we were designing the Web from scratch for applications, we wouldn’t
make users wait around. Once an interface is loaded, why should the user interaction
come to a halt every time the application needs something from the server? In fact,
why should the user see the application go to the server at all?
Figure 1: The traditional model for web applications (left) compared to the Ajax
model (right).


How Ajax is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the
Web by introducing an intermediary — an Ajax engine — between the user and the
server. It seems like adding a layer to the application would make it less responsive,
but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax
engine — written in JavaScript and usually tucked away in a hidden frame. This
engine is responsible for both rendering the interface the user sees and
communicating with the server on the user’s behalf. The Ajax engine allows the
user’s interaction with the application to happen asynchronously — independent of
communication with the server. So the user is never staring at a blank browser
window and an hourglass icon, waiting around for the server to do something.
Figure 2: The synchronous interaction pattern of a traditional web application (top)
compared with the asynchronous pattern of an Ajax application (bottom).

Every user action that normally would generate an HTTP request takes the form of a
JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t
require a trip back to the server — such as simple data validation, editing data in
memory, and even some navigation — the engine handles on its own. If the engine
needs something from the server in order to respond — if it’s submitting data for
processing, loading additional interface code, or retrieving new data — the engine
makes those requests asynchronously, usually using XML, without stalling a user’s
interaction with the application.

Reference: http://www.adaptivepath.com/publications/essays/archives/000385.php

Thanks,
Shelly
                has notified the sender that this message has been received.


                          Yahoo! Groups Sponsor
                              ADVERTISEMENT




Yahoo! Groups Links

   •      To visit your group on the web, go to:
          http://groups.yahoo.com/group/a1internetdesign/

   •      To unsubscribe from this group, send an email to:
          a1internetdesign-unsubscribe@yahoogroups.com

   •      Your use of Yahoo! Groups is subject to the Yahoo! Terms of
          Service.

More Related Content

What's hot

Introduction To Mvc
Introduction To MvcIntroduction To Mvc
Introduction To MvcVolkan Uzun
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentationengcs2008
 
Web Applications Are Technically Awesome!
Web Applications Are Technically Awesome!Web Applications Are Technically Awesome!
Web Applications Are Technically Awesome!MediaFront
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniJoseph Khan
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flexJoseph Khan
 
Angularjs and the promise of hypermedia clients
Angularjs and the promise of hypermedia clientsAngularjs and the promise of hypermedia clients
Angularjs and the promise of hypermedia clientstoddbr
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic SubmissionIan Elrick
 
Developing a Better User Experience with "Atlas"
Developing a Better User Experience with "Atlas"Developing a Better User Experience with "Atlas"
Developing a Better User Experience with "Atlas"goodfriday
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVCEmad Alashi
 
Technology of the New News Workflow
Technology of the New News WorkflowTechnology of the New News Workflow
Technology of the New News WorkflowRoger Theriault
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic SubmissionClifton Alex
 
Asp.net With mvc handson
Asp.net With mvc handsonAsp.net With mvc handson
Asp.net With mvc handsonPrashant Kumar
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic SubmissionMarc Duchene
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answersis4030.ray
 

What's hot (20)

Introduction To Mvc
Introduction To MvcIntroduction To Mvc
Introduction To Mvc
 
Ajax
AjaxAjax
Ajax
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Web Applications Are Technically Awesome!
Web Applications Are Technically Awesome!Web Applications Are Technically Awesome!
Web Applications Are Technically Awesome!
 
ASP .NET MVC - best practices
ASP .NET MVC - best practicesASP .NET MVC - best practices
ASP .NET MVC - best practices
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flex
 
Angularjs and the promise of hypermedia clients
Angularjs and the promise of hypermedia clientsAngularjs and the promise of hypermedia clients
Angularjs and the promise of hypermedia clients
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic Submission
 
Developing a Better User Experience with "Atlas"
Developing a Better User Experience with "Atlas"Developing a Better User Experience with "Atlas"
Developing a Better User Experience with "Atlas"
 
ITI006En-AJAX
ITI006En-AJAXITI006En-AJAX
ITI006En-AJAX
 
Ajax
AjaxAjax
Ajax
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Mvc Brief Overview
Mvc Brief OverviewMvc Brief Overview
Mvc Brief Overview
 
Technology of the New News Workflow
Technology of the New News WorkflowTechnology of the New News Workflow
Technology of the New News Workflow
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic Submission
 
Asp.net With mvc handson
Asp.net With mvc handsonAsp.net With mvc handson
Asp.net With mvc handson
 
Asp.net,mvc
Asp.net,mvcAsp.net,mvc
Asp.net,mvc
 
Manual versus Automatic Submission
Manual versus Automatic SubmissionManual versus Automatic Submission
Manual versus Automatic Submission
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answers
 

Viewers also liked

3 uithoudingsvermogen les1
3 uithoudingsvermogen les13 uithoudingsvermogen les1
3 uithoudingsvermogen les1Magalie Mahieu
 
Trainingsleer
TrainingsleerTrainingsleer
Trainingsleerdwebbink
 
Trainingsleer week 1.4 hva sjabloon 2011
Trainingsleer week 1.4 hva sjabloon 2011Trainingsleer week 1.4 hva sjabloon 2011
Trainingsleer week 1.4 hva sjabloon 2011Martin Breedijk
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanPost Planner
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
 

Viewers also liked (8)

3 uithoudingsvermogen les1
3 uithoudingsvermogen les13 uithoudingsvermogen les1
3 uithoudingsvermogen les1
 
Trainingsleer
TrainingsleerTrainingsleer
Trainingsleer
 
Trainingsleer week 1.4 hva sjabloon 2011
Trainingsleer week 1.4 hva sjabloon 2011Trainingsleer week 1.4 hva sjabloon 2011
Trainingsleer week 1.4 hva sjabloon 2011
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 

Similar to Ajax -a_new_approach_to_web_applications

Similar to Ajax -a_new_approach_to_web_applications (20)

Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
Ajax
AjaxAjax
Ajax
 
25250716 seminar-on-ajax text
25250716 seminar-on-ajax text25250716 seminar-on-ajax text
25250716 seminar-on-ajax text
 
AJAX
AJAXAJAX
AJAX
 
AJAX
AJAXAJAX
AJAX
 
Ajax
AjaxAjax
Ajax
 
Components of a Generic Web Application Architecture
Components of  a Generic Web Application ArchitectureComponents of  a Generic Web Application Architecture
Components of a Generic Web Application Architecture
 
Introduction to ajax
Introduction  to  ajaxIntroduction  to  ajax
Introduction to ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
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
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax Workshop
 
Ajax
AjaxAjax
Ajax
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax & Reverse Ajax Presenation
Ajax & Reverse Ajax PresenationAjax & Reverse Ajax Presenation
Ajax & Reverse Ajax Presenation
 
Ajax
AjaxAjax
Ajax
 
AJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdfAJAX vs. jQuery What Are The Differences.pdf
AJAX vs. jQuery What Are The Differences.pdf
 
Ajax
AjaxAjax
Ajax
 

Recently uploaded

Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterMateoGardella
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.MateoGardella
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 

Recently uploaded (20)

Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 

Ajax -a_new_approach_to_web_applications

  • 1. Ajax: A New Approach to Web Applications Defining Ajax Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: • standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • and JavaScript binding everything together. The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications. This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more. Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?
  • 2. Figure 1: The traditional model for web applications (left) compared to the Ajax model (right). How Ajax is Different An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true. Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.
  • 3. Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom). Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine
  • 4. makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application. Reference: http://www.adaptivepath.com/publications/essays/archives/000385.php Thanks, Shelly has notified the sender that this message has been received. Yahoo! Groups Sponsor ADVERTISEMENT Yahoo! Groups Links • To visit your group on the web, go to: http://groups.yahoo.com/group/a1internetdesign/ • To unsubscribe from this group, send an email to: a1internetdesign-unsubscribe@yahoogroups.com • Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.