by Klaus Graefensteiner
24. October 2010 11:06
Introduction
Here is another bare bones (no AJAX library or framework is being used) example of using AJAX. In this case a user would move the mouse over a picture on a web page and the mouseover event would fire an AJAX request to get the description for this particular image and display it as a caption.
Figure 1: Get picture description using AJAX
Movie
The following YouTube video shows this example in action:
Code
Html and JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cars</title>
<script type="text/javascript">
var infoDivIsVisible = false;
function displayInfo(event, info, target_div)
{
var e = new MouseEvent(event);
var target = document.getElementById(target_div);
var target_top = e.y - 20 + "px";
var target_left = e.x + 200 + "px";
target.style.visibility = "visible";
infoDivIsVisible = true;
target.style.top = target_top
target.style.left = target_left
while (target.hasChildNodes())
{
target.removeChild(target.lastChild);
}
var strongE = document.createElement("b");
var textN = document.createTextNode(info);
strongE.appendChild(textN);
target.appendChild(strongE);
//alert(image_id);
}
function hide()
{
var target = document.getElementById("information");
target.style.visibility = "hidden";
infoDivIsVisible = false;
}
function getData(event, movie_id)
{
if(infoDivIsVisible == false)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
var dataSource = "getCarInfo.php";
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
displayInfo (event, XMLHttpRequestObject.responseText, "information");
}
}
XMLHttpRequestObject.send("data=" + movie_id);
}
}
}
function MouseEvent(e)
{
if(e) {
this.e = e;
} else {
this.e = window.event;
}
if(e.pageX) {
this.x = e.pageX;
} else {
this.x = e.clientX;
}
if(e.pageY) {
this.y = e.pageY;
} else {
this.y = e.clientY;
}
if(e.target) {
this.target = e.target;
} else {
this.target = e.srcElement;
}
}
</script>
<style>
#information
{
background-color: Black;
color: White;
font-size: 32px;
position: absolute;
z-index: 100;
width: 300px;
height: 40px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="main">
<h1>Audi lineup</h1>
<table>
<tr>
<td>
<img id="Audi A4" src="A4.jpg" onmouseover='getData(event, "A4");'/>
<br></br>
<strong>Audi A4</strong>
<br></br>
<br></br>
<br></br>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img id="Audi A6" src="A6.jpg" onmouseover='getData(event, "A6");'/>
<br></br>
<strong>Audi A6</strong>
<br></br>
<br></br>
<br></br>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img id="Audi A8" src="A8.jpg" onmouseover='getData(event, "A8");'/>
<br></br>
<strong>Audi A8</strong>
<br></br>
<br></br>
<br></br>
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="information" onclick="hide();"></div>
</body>
</html>
Php
<?php
$data = $_POST['data'];
switch($data)
{
case "A4": echo "The A4 is great!"; break;
case "A6": echo "The A6 is greater!"; break;
case "A8": echo "The A8 is greatest!"; break;
default: echo "No description!";
}
?>
Download
The complete example can be downloaded here: GetCarInfoAJAX.zip
ad079ad5-34f2-4480-9adf-1074f132d357|1|5.0
Tags:
Subscribe
