Scribd
Upload
62 views

How AJAX Works

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to the server in the background and update portions of the page with the response. This creates a more interactive experience for the user. AJAX is commonly used by major websites like Google Maps, Gmail, YouTube, and Facebook to asynchronously retrieve data and update sections of the page without refreshing.

Uploaded by

SalmanSid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

How AJAX Works

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to the server in the background and update portions of the page with the response. This creates a more interactive experience for the user. AJAX is commonly used by major websites like Google Maps, Gmail, YouTube, and Facebook to asynchronously retrieve data and update sections of the page without refreshing.

Uploaded by

SalmanSid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

What is AJAX?

-> AJAX stands for Asynchronous JavaScript and XML. AJAX is a technique for
creating fast and dynamic web pages.

-> 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.
Classic web pages, (which do not use AJAX) must reload the entire page if the
content should change. Examples of applications using AJAX: Google Maps,
Gmail, YouTube, and Facebook.

-> AJAX is used to create more interactive applications. AJAX is a developers


dream, because you can:

--- Update a web page without reloading it


--- Request data from a server - after the page has loaded
--- Receive data from a server - after the page has loaded
--- Send data to a server - in the background

How AJAX Works

-> AJAX is based on internet standards, and uses a combination of:

 XMLHttpRequest object (to retrieve data from a web server)


 JavaScript/DOM (to display/use the data)
AJAX PHP Example
The following example will demonstrate how a web page can communicate with
a web server while a user type characters in an input field:

<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>


<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

readyState Holds the status of the XMLHttpRequest.


0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found"

The PHP File - "gethint.php"

<?php
// Array with names
$a[] = "Abhi";
$a[] = "Bobby";
$a[] = "siri";
$a[] = "keerthi";
$a[] = "sailu";
$a[] = "akki";

// get the q parameter from URL


$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""


if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct values


echo $hint === "" ? "no suggestion" : $hint;
?>
AJAX Database Example
The following example will demonstrate how a web page can fetch information
from a database with AJAX:

<html>
<head>
<script>
function showUser(str)
{
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();

}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Abhinav</option>
<option value="2">Alekhya</option>
<option value="3">Siri</option>
<option value="4">Sailu</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

--------------------------------------------------------------------
<!—source code for getuser.php -->

<?php

$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','nit');

$sql="SELECT * FROM user WHERE id = '".$q."'";


$result = mysqli_query($con,$sql);

echo "<table border=1>


<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['city'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
-------------------------------------------------------------------
Explanation: When the query is sent from the JavaScript to the PHP file, the
following happens:
1. PHP opens a connection to a MySQL server
2. The correct person is found
3. An HTML table is created, filled with data, and sent back to the "txtHint"
placeholder

You might also like