SlideShare a Scribd company logo
AJAX -  Mahesh Shitole -  Associate Software Engineer -  Knowledge Quest Infotech
What is AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Technologies used by AJAX : - ,[object Object],[object Object],[object Object],[object Object],[object Object]
Uses of AJAX : - ,[object Object],[object Object],[object Object],[object Object],[object Object]
Classic Web Application Architecture user interface Web server Server-side logic and data Browser client Server-side system HTTP  request HTML + CSS data
AJAX Architecture user interface Web  and/or XML server Server-side logic and data Brower client Server-side system HTTP  request XML data AJAX  engine JavaScript call HTML + CSS data
 
Implementation of AJAX <html> <body> <form name = “myForm”> Name:<input type=“text”name=“username”/> Time:<input type=“text” name=“time”/> </form> </body> </html>
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties of XMLHttpRequest OnReadyStateChange ReadyState ResponseText stores your function that will process the response from a server. holds the status of the server's response. It is always changing State Description  0 The request is not initialized  1 The request has been set up  2 The request has been sent  3 The request is in process  4 The request is complete data sent back from the server can be retrieved from this property
Updated Ajax Application <html>  <body> <script type=&quot;text/javascript&quot;> function ajaxFunction() {  var xmlHttp; try {  // Firefox, Opera 8.0+, Safari  xmlHttp=new  XMLHttpRequest(); } catch (e) {  // Internet Explorer 6.0+
try {  xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);  } catch (e) {  // Internet Explorer 5.5+ try {    xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);  } catch (e) {  alert(&quot;Your browser does not support AJAX!&quot;);    return false;  } }  } // end of outer catch
} xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) {    document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open(&quot;GET&quot;,&quot;time.asp&quot;,true); xmlHttp.send(null);  } </script>
<form name=&quot;myForm&quot;> Name: <input type=&quot;text“    onkeyup=&quot;ajaxFunction();”   name=&quot;username&quot; /> Time:  <input type=&quot;text“    name=&quot;time&quot; /> </form> </body> </html>
<% response.expires=-1 response.write(time) %>  Server Side Code ,[object Object],[object Object],[object Object],[object Object]
Advantages of AJAX : - ,[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],[object Object]
Disadvantages of AJAX : - ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thank You

More Related Content

What's hot

Ajax
AjaxAjax
Ajax technology
Ajax technologyAjax technology
Ajax technology
Safal Agrawal
 
Ajax basics
Ajax basicsAjax basics
Ajax basicsVel004
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?
JavaTpoint.Com
 
Overview of AJAX
Overview of AJAXOverview of AJAX
Overview of AJAX
Roshith S Pai
 
AJAX
AJAXAJAX
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
Bharat_Kumawat
 
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
Placinta Alin
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programminghchen1
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Raja V
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
Adnan Sohail
 
AJAX in ASP.NET
AJAX in ASP.NETAJAX in ASP.NET
AJAX in ASP.NET
James Crowley
 
AJAX
AJAXAJAX
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentationthinkphp
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
John Coggeshall
 

What's hot (20)

Ajax
AjaxAjax
Ajax
 
Ajax technology
Ajax technologyAjax technology
Ajax technology
 
Ajax basics
Ajax basicsAjax basics
Ajax basics
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?
 
Overview of AJAX
Overview of AJAXOverview of AJAX
Overview of AJAX
 
AJAX
AJAXAJAX
AJAX
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
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
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax part i
Ajax part iAjax part i
Ajax part i
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
AJAX in ASP.NET
AJAX in ASP.NETAJAX in ASP.NET
AJAX in ASP.NET
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax
AjaxAjax
Ajax
 
AJAX
AJAXAJAX
AJAX
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 

Similar to Ajax

Ajax
AjaxAjax
M Ramya
M RamyaM Ramya
AJAX
AJAXAJAX
AJAXARJUN
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
engcs2008
 
Ajax
AjaxAjax
25250716 seminar-on-ajax text
25250716 seminar-on-ajax text25250716 seminar-on-ajax text
25250716 seminar-on-ajax text
Kamleshh Chandnani
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
Oliver Cai
 
mukesh
mukeshmukesh
mukesh
guest06dc4b2
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
Ganesh Chavan
 
Ajax assignment help
Ajax assignment helpAjax assignment help
Ajax assignment help
john mayer
 
Ajax
AjaxAjax
Ajax tutorial by bally chohan
Ajax tutorial by bally chohanAjax tutorial by bally chohan
Ajax tutorial by bally chohan
WebVineet
 
Ajax
AjaxAjax
ITI006En-AJAX
ITI006En-AJAXITI006En-AJAX
ITI006En-AJAX
Huibert Aalbers
 

Similar to Ajax (20)

Ajax
AjaxAjax
Ajax
 
M Ramya
M RamyaM Ramya
M Ramya
 
AJAX
AJAXAJAX
AJAX
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
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 Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
mukesh
mukeshmukesh
mukesh
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
 
Ajax
AjaxAjax
Ajax
 
Ajax assignment help
Ajax assignment helpAjax assignment help
Ajax assignment help
 
Ajax
AjaxAjax
Ajax
 
AJAX
AJAXAJAX
AJAX
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
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
 
ITI006En-AJAX
ITI006En-AJAXITI006En-AJAX
ITI006En-AJAX
 

Recently uploaded

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 

Recently uploaded (20)

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 

Ajax

  • 1. AJAX - Mahesh Shitole - Associate Software Engineer - Knowledge Quest Infotech
  • 2.
  • 3.
  • 4.
  • 5. Classic Web Application Architecture user interface Web server Server-side logic and data Browser client Server-side system HTTP request HTML + CSS data
  • 6. AJAX Architecture user interface Web and/or XML server Server-side logic and data Brower client Server-side system HTTP request XML data AJAX engine JavaScript call HTML + CSS data
  • 7.  
  • 8. Implementation of AJAX <html> <body> <form name = “myForm”> Name:<input type=“text”name=“username”/> Time:<input type=“text” name=“time”/> </form> </body> </html>
  • 9.
  • 10. Properties of XMLHttpRequest OnReadyStateChange ReadyState ResponseText stores your function that will process the response from a server. holds the status of the server's response. It is always changing State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete data sent back from the server can be retrieved from this property
  • 11. Updated Ajax Application <html> <body> <script type=&quot;text/javascript&quot;> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer 6.0+
  • 12. try { xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) { // Internet Explorer 5.5+ try { xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e) { alert(&quot;Your browser does not support AJAX!&quot;); return false; } } } // end of outer catch
  • 13. } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open(&quot;GET&quot;,&quot;time.asp&quot;,true); xmlHttp.send(null); } </script>
  • 14. <form name=&quot;myForm&quot;> Name: <input type=&quot;text“ onkeyup=&quot;ajaxFunction();” name=&quot;username&quot; /> Time: <input type=&quot;text“ name=&quot;time&quot; /> </form> </body> </html>
  • 15.
  • 16.
  • 17.
  • 18.