Scribd
Upload
79 views7 pages

PHP With AJAX

AJAX allows for asynchronous communication between the client and server to update parts of a web page without reloading the entire page. An example is provided where a user starts typing a name in a form, and AJAX is used to request matching name suggestions from the server and display them without refreshing the page. The server code contains an array of names that is searched to return matching hints based on the characters entered by the user.

Uploaded by

Gul Sher
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
79 views7 pages

PHP With AJAX

AJAX allows for asynchronous communication between the client and server to update parts of a web page without reloading the entire page. An example is provided where a user starts typing a name in a form, and AJAX is used to request matching name suggestions from the server and display them without refreshing the page. The server code contains an array of names that is searched to return matching hints based on the characters entered by the user.

Uploaded by

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

Php with AJAX

AJAX
• AJAX stands for Asynchronous JavaScript and
XML. AJAX is a new technique for creating
better, faster, and more interactive web
applications with the help of XML, HTML, CSS
and Java Script.
• Conventional web application transmit
information to and from the sever using
synchronous requests. This means you fill out a
form, hit submit, and get directed to a new page
with new information from the server.
Example
• Client side html
<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>
Example
• Server Side Html
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
Example
• // 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;
?>

You might also like