SlideShare uma empresa Scribd logo
1 de 19
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

Mais conteúdo relacionado

Mais procurados

Ajax basics
Ajax basicsAjax basics
Ajax basics
Vel004
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
hchen1
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
thinkphp
 

Mais procurados (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
 

Semelhante a Ajax

AJAX
AJAXAJAX
AJAX
ARJUN
 

Semelhante a 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
 

Último

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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (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
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
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
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
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)
 
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...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

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.