Scribd
Upload
18 views

Module 3

The document provides examples of AJAX applications that enable live communication between a web page and a server as a user types in an input field. It includes HTML and PHP code for two files: AJAXex.html, which sends user input to the server and displays the response, and gethint.php, which suggests names based on user input. The examples demonstrate how to implement real-time data fetching using AJAX techniques.

Uploaded by

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

Module 3

The document provides examples of AJAX applications that enable live communication between a web page and a server as a user types in an input field. It includes HTML and PHP code for two files: AJAXex.html, which sends user input to the server and displays the response, and gethint.php, which suggests names based on user input. The examples demonstrate how to implement real-time data fetching using AJAX techniques.

Uploaded by

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

Module No:03 Date: 21-01-2025

a) Develop AJAX application to demonstrate how a web page can communicate with a web server
while a user type characters in an input field.

FILE: AJAXex.html

<html lang="en">
<head>
<title>AJAX communication Example</title>
</head>
<body>
<h1>AJAX Live Communication With Server</h1>
<input type="text" id="input-field" placeholder="Type something...">
<div id="response">server response will appear here...</div>
<script>
document.getElementById('input-field').addEventListener('keyup',function(){
const userInput=this.value;

const xhr=new XMLHttpRequest();


xhr.open('GET','server.php?text='+encodeURIComponent(userInput),true);

xhr.onload=function(){
if(xhr.status===200){
document.getElementById('response').innerHTML=xhr.responseText;
}
};
xhr.send();
});
</script>
</body>
</html>

FILE: server.php

<?php
$text=isset($_GET['text'])?$_GET['text']:'';
if(!empty($text))
{
echo "YOU TYPED:".htmlspecialchars($text);
}
else
{
echo "please type something...";
}
?>

Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05I1


Module No:03 Date: 21-01-2025

OUTPUT:

FILE: AJAXfetch.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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML=this.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 action="">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">

Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05I1


Module No:03 Date: 21-01-2025

</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

FILE: gethint.php

<?php
//Array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gundu";
$a[]="Henry";
$a[]="Ian";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tom";
$a[]="Unnie";
$a[]="Violet";
$a[]="Lisa";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wendy";
$a[]="Vicky";
//fetch q parameter from URL
$q = $_REQUEST["q"];
$hint = "";

Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05I1


Module No:03 Date: 21-01-2025

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;
}
}
}
}
echo $hint === "" ? ";No suggestions" : $hint;
?>

OUTPUT:

Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05I1

You might also like