Scribd
Upload
13 views4 pages

22761A05E0 (Module3)

The document provides examples of AJAX applications that demonstrate real-time communication between a web page and a server. It includes HTML and PHP code for an input field that sends user input to the server and displays the response, as well as a suggestion feature that offers name hints based on user input. The examples illustrate how to implement AJAX functionality using XMLHttpRequest for dynamic content updates without reloading the page.

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 DOCX, PDF, TXT or read online on Scribd
13 views4 pages

22761A05E0 (Module3)

The document provides examples of AJAX applications that demonstrate real-time communication between a web page and a server. It includes HTML and PHP code for an input field that sends user input to the server and displays the response, as well as a suggestion feature that offers name hints based on user input. The examples illustrate how to implement AJAX functionality using XMLHttpRequest for dynamic content updates without reloading the page.

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 DOCX, 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:22761A05E0


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:22761A05E0


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:22761A05E0


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:22761A05E0

You might also like