AJAX help

How to use AJAX on a page called with AJAX

[StoutFiles]

Code for page 'Widgets':

<script type="text/javascript">
var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

function test() {
http.open("GET", "http://www.example.com/bluewidgets.php", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>

<p><a href="javascript:test()">Go to Blue Widgets.</a></p>

<div id="foo">
Welcome to Widgets!
</div>

There's the code for page 'Widgets'. It opens page 'Blue Widgets' just fine. However, why can't I continue using AJAX on this new page?

Code for page 'Blue Widgets':

<script type="text/javascript">
var http = false;

if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

function test2() {
http.open("GET", "http://www.example.com/bluewidgetsdetails.php", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo2').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>

<p><a href="javascript:test2()">Go to Blue Widget's details:</a></p>

<div id="foo2">
Welcome to Blue Widgets!
</div>

Any help?

[StoutFiles]

Nevermind, it works if I put the function for bluewidgets in widgets. Still learning.