SlideShare a Scribd company logo
1 of 19
AJAX –  Asynchronous JavaScript and XML
What is AJAX ? Ajax is a set of client side technologies that provides asynchronous communication between user interfaces and web server. So the advantages of using Ajax are asynchronous communication, minimal data transfer and server is not overloaded with unnecessary load.
  What problem does Ajax  solve? ,[object Object],[object Object],[object Object]
Unnecessary data is transferred between client and server. For instance, the whole page is posted and refreshed even when we want small data of the page to be refreshed.   ,[object Object]
When a user requests for a page he has to wait until the complete round trip happens. In short, the request / response work on a synchronous model rather than asynchronous which makes user experience very difficult. How many times it has happened that you are requesting a page and you see the below screen…frustrating right.   ,[object Object]
Because we are posting unnecessary information to the server, the server is overloaded with unnecessary processing.   ,[object Object]
Ajax Lifecycle
XmlHttpRequest ? ,[object Object],[object Object],[object Object],[object Object]
XmlHttpRequest Component ,[object Object],[object Object],[object Object],[object Object],[object Object]
Let’s see some coding : <html> <head> <script language = &quot;javascript&quot;> function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject (&quot;Microsoft.XMLHTTP&quot;); } return null; }
Let’s see some coding : var xmlhttp; function showUser(str) { xmlhttp= GetXmlHttpObject(); if (xmlhttp==null) { alert (&quot;Browser does not support HTTP Request&quot;); return; } var url=&quot;getselected.php&quot;; url= url+&quot;?id=&quot;+str; xmlhttp.onreadystatechange= stateChanged; xmlhttp.open (&quot;GET“ ,url,true); xmlhttp.send(null); } 
Coding : PHP [getselected.php] ,[object Object],[object Object],[object Object],[object Object]
Coding: Javascript  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Coding: Javascript  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Limitations of AJAX ,[object Object],[object Object],[object Object]
One of the well known tools in building an efficient Ajax based application is jQuery. This programming language is often used in developing plug-ins for JavaScript and Ajax based applications.   ,[object Object]
<html>  <head> <script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;>   $(function()   {   $('#container-1').tabs();   });   </script> </head> <body> <h2>Simple Tabs</h2> <div id=&quot;container-1&quot;>   <ul>   <li><a href=&quot;#fragment-1&quot;><span>Tab1</span></a></li>   <li><a href=&quot;#fragment-2&quot;><span>Tab2</span></a></li>   <li><a href=&quot;#fragment-3&quot;><span>Tab3</span></a></li>   </ul>   -continued ,[object Object]
<ul>   <li><a href=&quot;#fragment-1&quot;><span>Tab1</span></a></li>   <li><a href=&quot;#fragment-2&quot;><span>Tab2</span></a></li>   <li><a href=&quot;#fragment-3&quot;><span>Tab3</span></a></li>   </ul> <div id=&quot;fragment-1&quot;>   <p>First tab is active by default:</p>   <pre><code>$(&#039;#container&#039;).tabs();</code></pre>   </div>   <div id=&quot;fragment-2&quot;> Some text goes here for tab2 </div>   <div id=&quot;fragment-3&quot;> some more text  for tab3</div> </div> </body> </html> ,[object Object]
Thank You

More Related Content

What's hot

What's hot (20)

Ajax
AjaxAjax
Ajax
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax
AjaxAjax
Ajax
 
Jquery Ajax
Jquery AjaxJquery Ajax
Jquery Ajax
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 
AJAX
AJAXAJAX
AJAX
 
Controls
ControlsControls
Controls
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Pracitcal AJAX
Pracitcal AJAXPracitcal AJAX
Pracitcal AJAX
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Developing great applications using ASP.NET MVC and ASP.NET AJAX
Developing great applications using ASP.NET MVC and ASP.NET AJAXDeveloping great applications using ASP.NET MVC and ASP.NET AJAX
Developing great applications using ASP.NET MVC and ASP.NET AJAX
 
2310 b 08
2310 b 082310 b 08
2310 b 08
 
Ajax
AjaxAjax
Ajax
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax
AjaxAjax
Ajax
 

Viewers also liked

W-JAX Performance Workshop - Web and AJAX
W-JAX Performance Workshop - Web and AJAXW-JAX Performance Workshop - Web and AJAX
W-JAX Performance Workshop - Web and AJAX
Alois Reitbauer
 

Viewers also liked (7)

Getting a Quick Start with Visualforce
Getting a Quick Start with Visualforce Getting a Quick Start with Visualforce
Getting a Quick Start with Visualforce
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
W-JAX Performance Workshop - Web and AJAX
W-JAX Performance Workshop - Web and AJAXW-JAX Performance Workshop - Web and AJAX
W-JAX Performance Workshop - Web and AJAX
 
How to Successfully Take Over a WordPress Plugin
How to Successfully Take Over a WordPress PluginHow to Successfully Take Over a WordPress Plugin
How to Successfully Take Over a WordPress Plugin
 
SecTor '09 - When Web 2.0 Attacks!
SecTor '09 - When Web 2.0 Attacks!SecTor '09 - When Web 2.0 Attacks!
SecTor '09 - When Web 2.0 Attacks!
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 

Similar to Ajax

Introduction to javaScript
Introduction to javaScriptIntroduction to javaScript
Introduction to javaScript
Neil Ghosh
 
AJAX
AJAXAJAX
AJAX
ARJUN
 
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: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
petrov
 

Similar to Ajax (20)

Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax
AjaxAjax
Ajax
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
Introduction to javaScript
Introduction to javaScriptIntroduction to javaScript
Introduction to javaScript
 
AJAX
AJAXAJAX
AJAX
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Ajax
AjaxAjax
Ajax
 
M Ramya
M RamyaM Ramya
M Ramya
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
Retrofitting
RetrofittingRetrofitting
Retrofitting
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
 
Core Java tutorial at Unit Nexus
Core Java tutorial at Unit NexusCore Java tutorial at Unit Nexus
Core Java tutorial at Unit Nexus
 
Ajax tutorial by bally chohan
Ajax tutorial by bally chohanAjax tutorial by bally chohan
Ajax tutorial by bally chohan
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 

Ajax

  • 1. AJAX – Asynchronous JavaScript and XML
  • 2. What is AJAX ? Ajax is a set of client side technologies that provides asynchronous communication between user interfaces and web server. So the advantages of using Ajax are asynchronous communication, minimal data transfer and server is not overloaded with unnecessary load.
  • 3.
  • 4.
  • 5.
  • 6.
  • 8.
  • 9.
  • 10. Let’s see some coding : <html> <head> <script language = &quot;javascript&quot;> function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject (&quot;Microsoft.XMLHTTP&quot;); } return null; }
  • 11. Let’s see some coding : var xmlhttp; function showUser(str) { xmlhttp= GetXmlHttpObject(); if (xmlhttp==null) { alert (&quot;Browser does not support HTTP Request&quot;); return; } var url=&quot;getselected.php&quot;; url= url+&quot;?id=&quot;+str; xmlhttp.onreadystatechange= stateChanged; xmlhttp.open (&quot;GET“ ,url,true); xmlhttp.send(null); } 
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

Editor's Notes

  1. AJAX – has taken IT industry by storm. It might turn out to be one of the most demanded thing/in thing and hence, a brief presentation to understand AJAX. Be it anything that we are learning, asking 6 key questions is very important to get an overall idea of the same. The questions being – What, Why, Who, How, When and Where. So let’s being with what is AJAX? – not a technology, not a product … but an approach taken to develop Web Applications.
  2. Inorder to understand what is this approach all about … let us first seek to know what the current approach is … At present, for every user interaction, the entire web page is rebuild. Even if a part of the entire page needs to be changed … we land up reloading the entire page. Which leads to … network traffic … slow speed … and most importantly … user experience goes down … user has to wait for loading of images … controls … which had already been loaded once!!! This is what AJAX asks us not to do.