Scribd
Upload
12 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
Available Formats
Download as PDF, TXT or read online on Scribd
12 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
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