Create the HTML we will be using. I will show the whole code and then break it down so you can see what each thing does. Let's start. Create a new html file called index.html.
HTML Code:
<html>
<head>
<title>AJAX Demo</title>
<script src='getnv.js'></script>
</head>
<body>
<div id='menu'>
<ul>
<li><a onClick='check_content("page.php?id=index")'>Home</a></li>
<li><a onClick='check_content("page.php?id=portal")'>Portal</a></li>
</ul>
</div>
<div id='content'>Content stuffs.</div>
</body>
</html>
That is our code for the main HTML. Simple, no? Let's break it up and explain: HTML Code:
<html>
<head>
<title>AJAX Demo</title>
<script src='getnv.js'></script>
</head>
Here we see regular declaration of HTML elemnts and tags, aswell as including our javascript file which makes this whole thing work. The javascript file is absolutely necessary, or else this will not work.
Next: HTML Code:
<body>
<div id='menu'>
<ul>
<li><a onClick='check_content("page.php?id=index")'>Home</a></li>
<li><a onClick='check_content("page.php?id=portal")'>Portal</a></li>
</ul>
</div>
Starting the body tag. Here we see our menu in a div called menu, inside is some HTML you may have never seen before, so let me explain:
<ul> - This is the opening tag for Unordered List. Using the unordered part we can set the list so that the list is in no particular order, so that it is possible to add AJAX re-arranging of menu items.
<li> - This adds an item to the unordered list we created. This can be changed using AJAX and such.
So hopefully you understand. Now for the link code you saw, which had no href in it. That's because it is not needed. Using an onClick, you can execute the javascript needed to change the content div:
check_content("page.php?id=index - the function check_content is a function we will create which checks if the content exists, then sends it to the content div.
Next: HTML Code:
<div id='content'>Content stuffs.</div>
</body>
</html>
This is the content div. This will change, and the "Content stuffs." you see will dissapear when the content is loaded. We also close all open tags here.
So that wraps up the HTML. It's very simple and easy to understand. Now on to the javascript:
Javascripting
So here's the guts of the code. This is what makes it work. Let's begin by adding the standard code to start AJAX. Create a new file called getnv.js
HTML Code:
function makeObject(){
var x;
if (window.ActiveXObject) {
x = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
x = new XMLHttpRequest();
}
return x;
}
var request = makeObject();
If you don't get that, read up on it on Google.
HTML Code:
var the_content;
function check_content(the_content){
request.open('get', the_content);
request.onreadystatechange = parseCheck_content;
request.send('');
}
function parseCheck_content(){
if(request.readyState == 1){
document.getElementById('content').innerHTML = 'Loading...';
}
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('content').innerHTML = answer;
}
}
This is what changes the content div. Let's break it up: Code:
var the_content;
This creates a variable called the_content, which will hold what is specified in the check_content we had in the onClick we made earlier.
HTML Code:
function check_content(the_content){
request.open('get', the_content);
request.onreadystatechange = parseCheck_content;
request.send('');
}
This is our function check_content. What it does is opens the_content (which will be our page.php?id= file), then when it's loaded, it parses our next function which does the actual div changing. HTML Code:
function parseCheck_content(){
if(request.readyState == 1){
Create the function and check if the readyState is currently loading.
HTML Code:
document.getElementById('content').innerHTML = '<span style="background-color:red;color:#fff;">Loading...</span>';
}
This changed the "Content" div to say "Loading..." while the page is loading, and ends our if.
HTML Code:
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('content').innerHTML = answer;
}
}
This checks to see if our readyState is complete. If it is, then it loads the contents of our file we are loading, then changed the content div to what it loaded. This also ends the if and our function AND our javascript file.
PHP
Make a new simple PHP file called page.php.
PHP Code:
$id = $_GET;
if ($id == 'index')
{
echo "This is the INDEX file";
} else if ($id == 'portal')
{
echo "This is the PORTAL file";
} else
{
echo "No page with that ID exists.";
}
This gets the ID, then checks what the id equals. Then echos what page it is.
For your file, you would use includes instead of echoing to add your main and portal files.
So there you have it. Frameless DIV navigation with AJAX.
Should you have any questions/comments/suggestions, feel free to PM me
