Ajax
•Download as PPT, PDF•
1 like•1,077 views
Ajax allows for more interactive web applications by retrieving small amounts of data from the server asynchronously without reloading the entire page. It uses a combination of technologies like JavaScript, XML, CSS, and the XMLHttpRequest object to update parts of a web page dynamically. This provides a more seamless user experience compared to traditional page reloads.
![[object Object],[object Object],INTRODUCTION](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Ajax
Recently uploaded
Recently uploaded (20)
Ajax
- 1. AJAX
- 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("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.
- 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="text/javascript" > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();
- 15. AJAX EXAMPLE(Contd..) } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open("GET","SimpleAjax.php",true); xmlhttp.send(null); } </script> Time:<input type="text" name="time"/>
- 16. AJAX EXAMPLE(Contd..) <form name="timeform" > Name:<input type="text" name="Name" onkeyup="ajaxfunction()"; /> <br/> </form> </body> </html> SimpleAjax.php <?php echo ($SERVER_ADDR); ?>
- 17. AJAX EXAMPLE(Contd..) SimpleAjax.html <html> <body> <script type="text/javascript" > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() {
- 18. AJAX EXAMPLE(Contd..) if(xmlhttp.readyState==4) { document.timeform.time.value=xmlhttp.responseText; } } xmlhttp.open("GET","SimpleAjax.php",true); xmlhttp.send(null); } </script> <form name="timeform" > Name:<input type="text" name="Name" onkeyup="ajaxfunction()"; /> <br/> Time:<input type="text" name="time"/> </form> </body> </html>
- 19. THANK YOU