In this tutorial you will learn about the AJAX In Action and its application with practical example.
This section will give you clear picture of the exact steps of AJAX operation.
Steps of AJAX Operation
- A client event occurs
- An XMLHttpRequest object is created
- The XMLHttpRequest object is set up.
- The XMLHttpRequest object makes an asynchronous request to the Webserver.
- Webserver returns the response.
- The XMLHttpRequest object calls the callback() function and processes the result.
- The HTML DOM is updated
Working Example of AJAX:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript"> var xmlhttp=""; function createObject(){ try{ // Opera 8.0+, Firefox, Safari xmlhttp= new XMLHttpRequest(); }catch (e){ // Internet Explorer Browsers try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); }catch (e) { try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ alert("Browser not supports AJAX!"); return false; } } } //return xmlhttp; } createObject(); function test(){ xmlhttp.open("GET","result.php",true); xmlhttp.send(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("result_div").innerHTML=xmlhttp.responseText; } } } </script> </head> <body> <a href="javascript:void(0);" onclick="test();">Click Here</a> <div id="result_div"></div> </body> </html> |
Here is the “result.php”
|
1 2 3 |
<?php echo "Ajax Result"; ?> |
