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="text/javascript" > function ajaxfunction() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();

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"/>

AJAX EXAMPLE(Contd..) <form name="timeform" > Name:<input type="text" name="Name" onkeyup="ajaxfunction()"; /> <br/> </form> </body> </html> SimpleAjax.php <?php echo ($SERVER_ADDR); ?>

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() {

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>

Ajax

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Ajax

Similaire à Ajax (20)

Plus de TSUBHASHRI

Plus de TSUBHASHRI (6)

Dernier

Dernier (20)

Ajax