Chapter 15: Introducing Ajax

Previewing Links with Ajax

See it run: Previewing Links with Ajax

Script 15.8

This HTML builds the page for the preview example.

Script 15.9

This CSS styles the preview pop-up.

Script 15.10

This is the JavaScript that allows the server request and sets the appearance of the pop-up.

window.onload = initAll;
var xhr = false;
var xPos, yPos;

function initAll() {
	var allLinks = document.getElementsByTagName("a");

for (var i=0; i< allLinks.length; i++) {
		allLinks[i].onmouseover = showPreview;
	}
}

function showPreview(evt) {
	getPreview(evt);
	return false;
}

function hidePreview() {
	document.getElementById("previewWin").style.visibility = "hidden";
}

if (xhr) {
		xhr.onreadystatechange = showContents;
		xhr.open("GET", url, true);
		xhr.send(null);
	}
	else {
		alert("Sorry, but I couldn't create an XMLHttpRequest");
	}
}

function showContents() {
	var prevWin = document.getElementById("previewWin");
	
	if (xhr.readyState == 4) {
		prevWin.innerHTML = (xhr.status == 200) ? xhr.responseText : "There was a problem with the request " + xhr.status;
		prevWin.style.top = parseInt(yPos)+2 + "px";
		prevWin.style.left = parseInt(xPos)+2 + "px";
		prevWin.style.visibility = "visible";
		prevWin.onmouseout = hidePreview;
	}
}

Contents:

Previewing Links with Ajax

Script 15.8

Script 15.9

Script 15.10