SlideShare una empresa de 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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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 a Ajax

AJAX
AJAXAJAX
AJAX
ARJUN
 

Similar 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

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
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...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
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
 

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.