You are on page 1of 19

AJAX

:
 AJAX is an acronym for Asynchronous JavaScript And XML.  AJAX is not a programming language. But simply a development technique for creating interactive web applications and for creating fast and dynamic web pages.   Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.  AJAX applications are browser- and platform-independent  Examples of applications using AJAX:

Google Maps, Gmail, YouTube and Face book tabs.

but it is a combination of many technologies.TECHNOLOGY BEHIND AJAX : Ajax is not a single technology. These technologies are supported by modern web browsers.  JavaScript: (JavaScript/DOM (to display/interact with the information)  Asynchronous Call to the Server (XMLHttpRequest object (to exchange data asynchronously with a server))  XML (often used as the format for transferring data) .

.  XML:  XML may be used to receive the data returned from the web server.  Asynchronous Call to the Server  Most of the Ajax application used the XMLHttpRequest object to send the request to the web server.  JavaScript is used very heavily to provide the dynamic behavior to the application. These calls are Asynchronous and there is no need to wait for the response to come back. JavaScript   AJAX uses JavaScript to send and receive data between a web browser and a web server DHTML and CSS is used to show the output to the user. User can do the normal work without any problem. JavaScript can be used to process the XML data returned from the web server easily.

the Ajax engine is initialized and loaded. The Ajax engine can also be set to continuously refresh the page content without refreshing the whole page.HOW AJAX WORKS ? When user first visits the page. Initialization of Ajax engine: When the page is initially loaded. . the Ajax engine is also initialized. The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server. AJAX LIFE CYCLE User Visit to the page: User visits the URL by typing URL in browser or clicking a link from some other page. From that point of time user interacts with Ajax engine to interact with the web server.

Ajax engine receives the response from the server.Event Processing Loop:  Browser event may instruct the Ajax engine to send request to server and receive the response data. . Then it calls the JavaScript call back functions.JavaScript request call back functions is used to update the browser. DHTML and css is used to update the browser display.  Browser (View) update .  Server response .

it’s very easy to learn Ajax  Ajax can be used to develop web applications that can update the page data continuously without refreshing the whole page . Ajax is based on JavaScript and existing technologies like XML. Etc.BENEFITS OF AJAX :  Ajax can be used for creating rich. CSS. So. and DHTML. web-based applications that look and works like a desktop application  Ajax is easy to learn.

XMLHTTPRequest Object • This is a server side object is used by JavaScript in client side. • It is used to exchange data with the server in a format of a plain text . xml documents. • It requests small bits of information from the server instead of whole pages. . • A java Script can communicate directly with the server using XMLHTTPRequest object • It uses Asynchronous data transfer (HTTP request) between the browser and the web server.

There are about three types of properties are there 1.XMLHTTPRequest Properties • When using XMLHTTPRequest object to communicate between client and the server properties of this objects are working. readyState 3. responceText . Onreadystatechange 2.

onreadystatechange Property After a request to the server. we need a function that can receive the data that is returned by the server The onreadystatechange property stores the function that will process the response from a server .

Readystate Property •The readyState property holds the status of the server’s response. . the onreadystatechange function will be executed. •Each time the readyState changes.

The request has been set up. The request is in process. The request has been sent. .Status of readystate Property State Property 0 1 2 3 4 The request is not initialized. The request is complete.

responseText Properties •The data sent back from the server can be retrieved with the responseText property .

true).Sending a request to the server To send off a request to the server. The open() method takes three arguments GET or POST URL of the server script Asynchronous request The send() method sends the request to the server xmlHttp. we need the open() method and the send() method. xmlHttp.url.open("GET". .send().

getElementById("txtHint"). return. Opera.XMLHttpRequest) {// code for IE7+. } .SAMPLE PROGRAM FOR AJAX WITH PHP ajax. Chrome.html <html> <head> <script type="text/javascript"> function User(str) { if (str=="") { document. Firefox. Safari xmlhttp=new XMLHttpRequest().innerHTML="". } if (window.

onreadystatechange=function() { if (xmlhttp.re sponseText.getElementById("txtHint"). } } xmlhttp.XMLHTTP")."ajax. IE5 xmlhttp=new ActiveXObject("Microsoft.else {// code for IE6.true).innerHTML=xmlhttp. } xmlhttp.status==200) { document.readyState==4 && xmlhttp.send(). xmlhttp. } </script></head> .open("GET".php?q="+str.

<body> <form> <select name="users" onchange="User(this.value)"> <option value="">Select a person:</option> <option value="1">Rani</option> <option value="2">Sundar</option> <option value="3">Tamilselvan</option> <option value="4">Thamarai</option> </select> </form> .

$con).$q. 'abc123'). $con = mysql_connect('localhost'. } mysql_select_db("ajax_demo"."'". $result = mysql_query($sql).php <?php $q=$_GET["q"]. . mysql_error()). 'peter'. if (!$con) { die('Could not connect: ' .ajax. $sql="SELECT * FROM user WHERE id = '".

echo "</tr>". mysql_close($con). "</td>". ?> . echo "<td>" . } echo "</table>". $row[‘address'] . echo "<td>" . while($row = mysql_fetch_array($result)) { echo "<tr>". echo "<td>" . $row['Job'] .echo "<table border='1'> <tr> <th>Firstname</th><th>Lastname</th> <th>Age</th> <th>Address</th> <th>Job</th></tr>". "</td>". $row['LastName'] . echo "<td>" . echo "<td>" . "</td>". "</td>". $row['FirstName'] . "</td>". $row['Age'] .