What you need is an event to fire.
<span onclick="AJAXCall('http://kcwaldo.blogspot.com/2008/10/simple-sql-select-statement.html','&Action=test','myspan')"> Click me</span>
<div id='myspan'>
Return information goes here.
</div>
Below is the script needed to run the event.
<script>
var hURL = '';
var hParamValues = '';
var hAc = '';
var hParamValuesa = '';
function handleHttpResponse()
{
if (http.readyState == 4)
{
if (http.responseText.indexOf('invalid') == -1)
{
document.getElementById(ActiveContainer).innerHTML = http.responseText;
isWorking = false;
//This is the queue.
if (hURL != '' && hParamValues != hParamValuesa){
AJAXCall(hURL,hParamValues,hAc);
hParamValuesa = hParamValues;
}
}
}
}
//url = url you are to get the data from
//paramvalues = are posted to the url. If you need querystring values then include //them in the URL.
//ac = the active container that the data returned will be pasted into. probably a //div or td or span
function AJAXCall(url,paramvalues,ac)
{
try
{
if (!isWorking && http)
{
if (ac == ''){return false;}
ActiveContainer = ac
document.getElementById(ActiveContainer).innerHTML = '';
http.open("Post", url, true);
http.onreadystatechange = handleHttpResponse;
isWorking = true;
http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
http.send(paramvalues);
}
else{
hParamValues = paramvalues;
hURL = url;
hAc = ac;
return false;
}
return true;
}
catch (e)
{
return false;
}
}
//This function creates a HTTP Object. It works in any browser, so far at least.
function getHTTPObject()
{
var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer
//alert(e.description);
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
//alert(e.description);
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//alert(e.description);
//alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
var ActiveContainer = '';
var isWorking = false;
var http = getHTTPObject();
</script>
Something the function above will do is to Queue up a second call so that. This is so if you have a list of links that you are showing a picture for it will make the first and last call but very few in between. Without the queue you can get very clunky behavior.
Please leave me a comment if you find this useful or something wrong.
