Basic HTML swap with AJAX

Lets get our beloved html for our llama site. Open the index.html page and add a class to our navigation links. Then lets add a link to our javascript file. Go ahead and create the new file called script.js and save it into the right folder.

On our script page, we add our initAll() function. In that function we will loop through all the links on the page looking for links that have a class name of "getpage" Then we attach an onclick handler that runs the getData program.

window.onload = initAll; function initAll() { var allLinks = document.getElementsByTagName("A"); for (i=0; i<allLinks.length; i++) { if (allLinks[i].className == "getpage") { allLinks[i].onclick = getData; } } } Copy and paste this into the script.js file.

Then we have to set up our httpRequest object. This function is exactly the same as before. It really does not change. You can just copy and paste it.

function getRequest() { try { req = new XMLHttpRequest(); } catch(err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(err3) { req = false; } } } return req; } This is the next function for the script.js file.

Then comes the getData() function which uses the request we set up and is checking the server for changes in its state. This function calls the useResponse function. function getData() { req = getRequest(); var url = this.href; req.onreadystatechange = useResponse; req.open("GET", url, true); req.send(null); return false; }

The useResponse function is the function that actually replaces the text in the maincontent div on the page. Essentially, we are going to use our AJAX engine to replace the content of the #maincontent div on the fly without even reloading the page.

function useResponse() { if(req.readyState == 4) { if(req.status == 200) { document.getElementById("maincontent").innerHTML = req.responseText; } } else { document.getElementById("maincontent").innerHTML = ' '; } }

For each of our other pages in the site, we need to remove everything from the file except the content of the main content div, including the opening and closing tags for the element. We only want the guts. I have put comments in the pages telling you what to remove. The code above is going to replace the contents of that div with the response text inside the the request object.

Finally, when the page first loads, it will load content normally found inside that maincontent div as usual. But now that we have wiped that content out and replaced it with the content from other pages, we need to have a way to put it back. To do this, I included a file called home.html, which contains the content from the maincontent div of the index.html file. Link to that file in the navigation instead. Now when you click the home link, it will replace the content in the div with the home page content. NOTE: We are done with this, but to test it, it must run from a server! The request status stuff we wrote with javascript needs a response from an actual server. We can use MAMP, XAMPP or WAMP to run it locally, or we can put it on an actual web server.