SlideShare a Scribd company logo
1 of 19
AJAX
[object Object],[object Object],INTRODUCTION
UNDERSTANDING AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object]
UNDERSTANDING AJAX (contd...) ,[object Object],[object Object]
HOW AJAX WORKS? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
BENEFITS OF AJAX ,[object Object],[object Object],[object Object],[object Object]
AJAX AS WEB DEVELOPMENT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DATA EXCHANGE IN AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DATA EXCHANGE IN AJAX (Contd...) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XML HTTP REQUEST OBJECT ,[object Object],[object Object]
XML HTTP REQUEST OBJECT (Contd...) CREATING XML HTTP REQUEST OBJECT : We can create an instance of the XMLHttpRequest in most of the modern popular browsers, and in the old versions of the browsers we need to create an object of ActiveXObject. var xmlobj=new XMLHttpRequest (); var activeobj=new ActiveXObject("Microsoft.XMLHTTP"); We need to create an XMLHttpRequest, after that we will use few important functions like:  (1) onreadystatechange property : After submitting the request to the server, we need to store the response from the server. onreadystatechange property stores the response from the function which process the server.
XML HTTP REQUEST OBJECT (Contd...) (2) Readystate property : eadystate property holds the state of the server response, every time readystate property change , onreadystatechange function executes. Possible values and their meaning are given below: STATE REQUEST 0 Not initialized 1 Has been set up 2 Has been sent 3 In process 4 Is complete
XML HTTP REQUEST OBJECT (Contd...) (3) Response text  property: The data sent back from the server is stored and retrieved later with the help of responseText property.
AJAX EXAMPLE In the following example we will see how to display server IP address dynamically with the help of AJAX, HTML, & PHP. SimpleAjax.html <html> <body> <script type=&quot;text/javascript&quot; > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();
AJAX EXAMPLE(Contd..) } else { xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open(&quot;GET&quot;,&quot;SimpleAjax.php&quot;,true); xmlhttp.send(null); } </script> Time:<input type=&quot;text&quot; name=&quot;time&quot;/>
AJAX EXAMPLE(Contd..) <form name=&quot;timeform&quot; > Name:<input type=&quot;text&quot; name=&quot;Name&quot; onkeyup=&quot;ajaxfunction()&quot;; /> <br/> </form> </body> </html> SimpleAjax.php <?php echo ($SERVER_ADDR); ?>
AJAX EXAMPLE(Contd..) SimpleAjax.html <html> <body> <script type=&quot;text/javascript&quot; > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.onreadystatechange=function() {
AJAX EXAMPLE(Contd..) if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open(&quot;GET&quot;,&quot;SimpleAjax.php&quot;,true); xmlhttp.send(null); } </script> <form name=&quot;timeform&quot; > Name:<input type=&quot;text&quot; name=&quot;Name&quot; onkeyup=&quot;ajaxfunction()&quot;; /> <br/> Time:<input type=&quot;text&quot; name=&quot;time&quot;/> </form> </body> </html>
THANK YOU

More Related Content

What's hot

Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
dominion
 

What's hot (20)

Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax
AjaxAjax
Ajax
 
What is Ajax technology?
What is Ajax technology?What is Ajax technology?
What is Ajax technology?
 
Ajax
AjaxAjax
Ajax
 
Copy of ajax tutorial
Copy of ajax tutorialCopy of ajax tutorial
Copy of ajax tutorial
 
Ajax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web ApplicationsAjax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web Applications
 
Ajax and PHP
Ajax and PHPAjax and PHP
Ajax and PHP
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
JSON and XML
JSON and XMLJSON and XML
JSON and XML
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
PHP - Introduction to PHP AJAX
PHP -  Introduction to PHP AJAXPHP -  Introduction to PHP AJAX
PHP - Introduction to PHP AJAX
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Introduction to ajax
Introduction  to  ajaxIntroduction  to  ajax
Introduction to ajax
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Ajax
AjaxAjax
Ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 

Similar to Ajax

AJAX
AJAXAJAX
AJAX
ARJUN
 

Similar to Ajax (20)

M Ramya
M RamyaM Ramya
M Ramya
 
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 presentation
Ajax presentationAjax presentation
Ajax presentation
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Mashup
MashupMashup
Mashup
 
Ajax
AjaxAjax
Ajax
 
WEB TECHNOLOGY Unit-5.pptx
WEB TECHNOLOGY Unit-5.pptxWEB TECHNOLOGY Unit-5.pptx
WEB TECHNOLOGY Unit-5.pptx
 
Ajax
AjaxAjax
Ajax
 
Ajax & Reverse Ajax Presenation
Ajax & Reverse Ajax PresenationAjax & Reverse Ajax Presenation
Ajax & Reverse Ajax Presenation
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
Ajax
AjaxAjax
Ajax
 
AJAX
AJAXAJAX
AJAX
 
Ajax
AjaxAjax
Ajax
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
Ajax
Ajax Ajax
Ajax
 
AJAX.pptx
AJAX.pptxAJAX.pptx
AJAX.pptx
 

More from TSUBHASHRI (6)

Php
PhpPhp
Php
 
Php
PhpPhp
Php
 
Php
PhpPhp
Php
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Linuxppt
LinuxpptLinuxppt
Linuxppt
 
Mysql
MysqlMysql
Mysql
 

Recently uploaded

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

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
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...
 
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
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 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...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

Ajax

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. XML HTTP REQUEST OBJECT (Contd...) CREATING XML HTTP REQUEST OBJECT : We can create an instance of the XMLHttpRequest in most of the modern popular browsers, and in the old versions of the browsers we need to create an object of ActiveXObject. var xmlobj=new XMLHttpRequest (); var activeobj=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); We need to create an XMLHttpRequest, after that we will use few important functions like: (1) onreadystatechange property : After submitting the request to the server, we need to store the response from the server. onreadystatechange property stores the response from the function which process the server.
  • 12. XML HTTP REQUEST OBJECT (Contd...) (2) Readystate property : eadystate property holds the state of the server response, every time readystate property change , onreadystatechange function executes. Possible values and their meaning are given below: STATE REQUEST 0 Not initialized 1 Has been set up 2 Has been sent 3 In process 4 Is complete
  • 13. XML HTTP REQUEST OBJECT (Contd...) (3) Response text property: The data sent back from the server is stored and retrieved later with the help of responseText property.
  • 14. AJAX EXAMPLE In the following example we will see how to display server IP address dynamically with the help of AJAX, HTML, & PHP. SimpleAjax.html <html> <body> <script type=&quot;text/javascript&quot; > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();
  • 15. AJAX EXAMPLE(Contd..) } else { xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open(&quot;GET&quot;,&quot;SimpleAjax.php&quot;,true); xmlhttp.send(null); } </script> Time:<input type=&quot;text&quot; name=&quot;time&quot;/>
  • 16. AJAX EXAMPLE(Contd..) <form name=&quot;timeform&quot; > Name:<input type=&quot;text&quot; name=&quot;Name&quot; onkeyup=&quot;ajaxfunction()&quot;; /> <br/> </form> </body> </html> SimpleAjax.php <?php echo ($SERVER_ADDR); ?>
  • 17. AJAX EXAMPLE(Contd..) SimpleAjax.html <html> <body> <script type=&quot;text/javascript&quot; > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.onreadystatechange=function() {
  • 18. AJAX EXAMPLE(Contd..) if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open(&quot;GET&quot;,&quot;SimpleAjax.php&quot;,true); xmlhttp.send(null); } </script> <form name=&quot;timeform&quot; > Name:<input type=&quot;text&quot; name=&quot;Name&quot; onkeyup=&quot;ajaxfunction()&quot;; /> <br/> Time:<input type=&quot;text&quot; name=&quot;time&quot;/> </form> </body> </html>