466 Part II: Developing an Ajax Library^
much easier. All we need to do here to make the history work is call init() on page load,
define a function for it to call to reset the page, and add a small history object to each request.<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 9 : Architecture - Hello History </title>
<script type="text/javascript" src="http://ajaxref.com/ch9/ajaxtcr.js"></script>
<script type="text/javascript">
function sendRequest(name)
{
var payload = "name=" + name;
var url = "http://ajaxref.com/ch9/hello.php";
var options = { method: "GET",
payload: payload,
history: {id: name, title:"Hello to " + name},
onSuccess: showResponse};
AjaxTCR.comm.sendRequest(url, options);
return false;
}
function showResponse(response)
{
$id("responseOutput").innerHTML = "Request #" + response.requestID + ": " +
response. responseText;
}
function resetPage() { $id("responseOutput").innerHTML = ""; }AjaxTCR.util.event.addWindowLoadEvent(function () { AjaxTCR.history
.init(resetPage);};
</script>
</head>
<body>
<h1>Hello Historical World</h1>
<a href="#" onclick="return sendRequest('Larry')">Say Hi to Larry</a><br />
<a href="#" onclick="return sendRequest('Curly')">Say Hi to Curly</a><br />
<a href="#" onclick="return sendRequest('Moe')" >Say Hi to Moe</a><br />
<br />
<div id="responseOutput"> </div>
</body>
</html>You can try this example at http://ajaxref.com/ch9/hellohistory.html, and its action is
shown in Figure 9-11.NNOT EOTE If you try this example in Internet Explorer, you might notice a funny double-clicking-like
sound—that is the iframe hack letting you know it is lurking about.To further explore history in the basic sense, you might like to use the History Explorer
example found at http://ajaxref.com/ch9/historyexplorer.html and shown in Figure 9-12.