ASSIGNMENT NO. 4: AJAX
Set A
1. Write AJAX program to read contact.dat file and print the contents of the file in a tabular format when the user clicks on print button. Contact.dat file should contain srno, name, residence number, mobile number, Address. [Enter at least 3 record in contact.dat file]
Solution:-
HTML file :
<html>
<head>
<style>
span
{
font-size: 25px;
}
table
{
color: blueviolet; ;
}
</style>
<script type="text/javascript" >
function print()
{
var ob=false;
ob=new XMLHttpRequest();
ob.open("GET","slip14_Q2.php?");//emailid="+eid);
ob.send();
ob.onreadystatechange=function()
{
if(ob.readyState==4 && ob.status==200)
{
document.getElementById("i").innerHTML=ob.responseText;
}
}
}
</script>
</head>
<body>
<center>
<h3>Display the contents of a contact.dat file </h3>
<br><input type="button" value=Print onclick="print()" >
<span id="i"></span>
</center>
</body>
</html>
Dat file : contact.dat
1 Isha 65768798 98765432 Daughter
2 Megha 65235689 87654329 Mother
PHP file :
<?php
$fp = fopen('contact.dat','r');
echo "<table border=1>";
echo "<tr><th>Sr. No.</th><th>Name</th><th>Residence No.</th><th>Mob. no.</th><th>Relation</th></tr>";
while($row = fscanf($fp,"%s %s %s %s %s"))
{
echo "<tr>";
foreach($row as $r)
{
echo "<td>$r</td>";
}
echo "</tr>";
}
echo "</table>";
fclose($fp);
?
2. Write AJAX program where the user is requested to write his or her name in a text box, and the server keeps sending back responses while the user is typing. If the user name is not entered then the message displayed will be, “Stranger, please tell me your name!”. If the name is Rohit, Virat, Dhoni, Ashwin or Harbhajan , the server responds with “Hello, master <user name>!”. If the name is anything else, the message will be “<user name>, I don’t know you!”.
Solution:-
<!DOCTYPE html>
<html>
<head>
<title>Live Name Check</title>
<script>
function checkName() {
var name = document.getElementById("nameInput").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "check.php?name=" + name, true);
xhr.send();
}
</script>
</head>
<body>
<input type="text" id="nameInput" onkeyup="checkName()">
<div id="response"></div>
</body>
</html>
check.php
<?php
$name = $_GET["name"];
$specialNames = array("Rohit", "Virat", "Dhoni", "Ashwin", "Harbhajan");
if (empty($name)) {
echo "Stranger, please tell me your name!";
} else if (in_array($name, $specialNames)) {
echo "Hello, master " . $name . "!";
} else {
echo $name . ", I don't know you!";
}
?>
Set B
1. Create TEACHER table as follows TEACHER(tno, tname, qualification, salary). Write Ajax program to select a teachers name and print the selected teachers details.
Solution:-
getTeacherDetails.html
<html>
<head>
<script>
function showTeacher(str) {
var xhttp;
if (str == "") {
document.getElementById("teacherDetails").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("teacherDetails").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getTeacherDetails.php?name="+str, true);
xhttp.send();
}
</script>
</head>
<body>
<form>
<select name="teachers" onchange="showTeacher(this.value)">
<option value="">Select a teacher:</option>
<?php
$con = mysqli_connect("localhost","my_user","my_password","my_db");
$sql = "SELECT tname FROM teacher";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['tname'] ."'>" . $row['tname'] ."</option>";
}
mysqli_close($con);
?>
</select>
</form>
<br>
<div id="teacherDetails"><b>Details will be listed here.</b></div>
</body>
</html>
//PHP Script getTeacherDetails.php
<?php
$name = $_REQUEST['name'];
$con = mysqli_connect("localhost","my_user","my_password","my_db");
$sql = "SELECT * FROM teacher WHERE tname = '$name'";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
echo "<b>Teacher Number:</b> " . $row['tno'] . "<br>";
echo "<b>Name:</b> " . $row['tname'] . "<br>";
echo "<b>Qualification:</b> " . $row['qualification'] . "<br>";
echo "<b>Salary:</b> " . $row['salary'] . "<br>";
}
mysqli_close($con);
?>
Database
Create database college
Create table teacher(tno int primary key,tname varchar(20),qualificationvarchar(10),salary int);
Insert 3 records
2. CUSTOMER (cno, cname, city) and ORDER(ono, odate, shipping address)2. Write Ajax program to print Order details by selecting a Customer’s name. Create table Customer and Order as follows with 1 : M cardinality CUSTOMER (cno, cname, city) and ORDER(ono, odate, shipping address)
Solution:-
Create
Table customer(cno int primary key,cname varchar(20),city varchar(20));
Create
Table order(cno int references customer(cno),ono primary key,odate date,shipadd
varchar(20));
<?php
$cname=$_POST['cname'];
$con=pg_connect("host=localhost
dbname=minal user=root") or die("could not connect");
$qry="select
cname,city from customer,order where customer.cno=order.cno and
cname=$cname"; $rs=pg_query($con,$qry) or die("Unable to execute
query");
if($rs!=null)
{ echo"<table border=0>";
echo
"<tr><td>Customer
Name</td><td>City</td></tr>";
while($row=pg_fetch_row($rs))
{ echo "<tr>";
echo
"<td>".$row[0]."</td>";
echo
"<td>".$row[1]."</td>";
echo "</tr>"; }
echo
"</table>";
} else
echo "No records found";
pg_close($con);
?>
Set C
1. Write Ajax program to fetch suggestions when is user is typing in a textbox. (eg like google suggestions. Hint create array of suggestions and matching string will be displayed)
Solution:-
<html>
<head>
<script type="text/javascript">
function suggest()
{
var arr = ["apple","banana","mango","orange","strawberry","grapes"];
var suggest = "";
var input = document.getElementById("txt1").value;
for(i=0;i<arr.length;i++)
{
if(arr[i].substring(0,input.length).toLowerCase() == input.toLowerCase())
{
suggest = suggest+" "+arr[i];
}
}
document.getElementById("txt2").innerHTML = suggest;
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeyup="suggest();">
<p>Suggestions: <span id="txt2"></span></p>
</body>
</html>
2. Write Ajax program to get book details from XML file when user select a book name. Create XML file for storing details of book(title, author, year, price).
Solution:-
BookInfo.xml
<?xml version="1.0" encoding="utf-8"?>
<BookList>
<Book>
<Title>The Great Gatsby</Title>
<Author>F. Scott Fitzgerald</Author>
<Year>1925</Year>
<Price>$7.99</Price>
</Book>
<Book>
<Title>To Kill a Mockingbird</Title>
<Author>Harper Lee</Author>
<Year>1960</Year>
<Price>$8.99</Price>
</Book>
<Book>
<Title>The Catcher in the Rye</Title>
<Author>J.D. Salinger</Author>
<Year>1951</Year>
<Price>$9.99</Price>
</Book>
</BookList>
Html file :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
function getBookDetails(bookName) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var book = xmlDoc.getElementsByTagName("Book");
for (var i = 0; i < book.length; i++) {
if (book[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue == bookName) {
alert("Author: " + book[i].getElementsByTagName("Author")[0].childNodes[0].nodeValue + "\n"
+
"Year: " + book[i].getElementsByTagName("Year")[0].childNodes[0].nodeValue + "\n" +
"Price: " + book[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue);
}
}
}
};
xhttp.open("GET", "BookInfo.xml", true);
xhttp.send();
}
// Call the getBookDetails function
getBookDetails("The Catcher in the Rye");
</script>
</body>
</html>