If you intend to use HTML and CSS, you'll need some Javascript knowledge.
I use a Javascript function to create my AJAX objects, then use another to make the request and receive the server response.
Here's what I use for "get" request methods:
<script type="text/javascript">
// CONTENT DIV
var contentdiv = document.getElementById('contentdiv');
// AJAX OBJECT
function ajaxobject(){
var request = false;
try {
request = new XMLHttpRequest();
}
catch(error1){
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(error2){
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(error3){
request = false;
}
}
}
return request;
}
// AJAX REQUEST - GET METHOD
function ajaxrequest(url,ajaxobject){
ajaxobject.open("get",url,true);
ajaxobject.onreadystatechange = function(){
if(ajaxobject.readyState == 4){
if(ajaxobject.status == 200){
contentdiv.innerHTML = ajaxobject.responseText;
}
}
}
ajaxobject.send(null);
}
var ajax = new ajaxobject();
ajaxrequest("pagename.php?id=123", ajax);
</script>
<div id="contentdiv"></div>
So, you can see above, your content div is empty and will be populated by your ajax request and insert the response text as innerHTML.
You'll need to create a wrapper method for the ajaxrequest() to trigger when the contentdiv receives content.
Also, the pagename.php can be pagename.html or whatever language you want - but it must be able to parse the "get" variables....the variables appended at the end of the filename:
?id=123
Your request page can use html, php, asp, jsp, or whatever. And it will simply need to return back whatever data you desire. Whether it be a database, static html, or generated by some other means, you need to decide how that request page will return back data.
The simplest way is to just put text in an empty html page. The ajaxrequest() function will grab that text, and insert it into the contentdiv.
Best regards,
- S
