[Script] Ajax Page Load

Ok, theres been a few people asking for this lately so i thought id provide a script ive written. What an ajax load normaly is, is a method where an xmlhttp request is made via javascript and the content of a page is dynamically loaded in to a div of your choice.
Currently im going to provide a very basic script, which just takes a page and displays the contents in a div, via ajax.
I may later add an advanced version which will support additional function, to work with a php navigation meaning search engines can still crawl the content, the back button and favorites still works.

Basic script

Features:
> Shows page is loading
> dynamically loads page to a div.

Code:

---

<script>
//Set up variables
var xmlhttp ;
var thediv;
function LoadPage(page,usediv) {
        // Set up request varible
        try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
        //Show page is loading
        document.getElementById(usediv).innerHTML = 'Loading Page...';
        //scroll to top
        scroll(0,0);
        //Store div in use
        thediv = usediv;
        //send data
        xmlhttp.onreadystatechange = ShowPage;
        xmlhttp.open("GET", page);
        xmlhttp.send(null);
        //Stop any link loading normaly
        return false;
}
function ShowPage(){
        //Check page is completed and there were no problems.
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                //Write data returned to page
                document.getElementById(thediv).innerHTML = xmlhttp.responseText;
        }
}
</script>

---

This function can now be called via creating a link like this.

<a href="mypage.htm" onclick="return LoadPage('mypage.htm','mydiv');">

The above would place the contents of "mypage.htm" in to a div with the id "mydiv" such as could be written '<div id="mydiv"></div>'

The parts of the link in bold being what need editing.

I wrote the script on the go so its completely untested but should hopefully work. If it doesnt post back with the problem and ill sort it out for you.

Edit: phew noticed just in time, id forgotten to store the div id in the function independents variable, which would have stopped it from working, should be fixed now.

Very Usefull and very kind :) +REP if i can :)

Great now watch all the habbo site change from iframes to this, thats why no one was giving it out, but it's your code you can do what you want with it, + rep anyway.

Quote:

---

Originally Posted by redtom

Great now watch all the habbo site change from iframes to this, thats why no one was giving it out, but it's your code you can do what you want with it, + rep anyway.

---

Whats wrong with them doing that o.0 The scripts simplistic anyway, its not even close to being functionally equivalent to a proper ajax loading system (such as i wrote for thybag) it cant really do anything above or beyond what an Iframe can, it just looks a bit better.

REP+ I was going to post the tutorial written on DynamicDrive, but someone was saying somthing about fnasites will be ripping it.So i left it, nice one though :)

Nice thanks +rep
can I ask you, how do you do that "not using firefox" thing on your site?
Thanks

Why not just use a simple preg_match function checking for say MSIE against $_SERVER['HTTP_USER_AGENT'] for internet explorer?

If your host supports it:

http://us.php.net/manual/en/function.get-browser.php

Quote:

---

Originally Posted by 01101101entor

Ok, theres been a few people asking for this lately so i thought id provide a script ive written. What an ajax load normaly is, is a method where an xmlhttp request is made via javascript and the content of a page is dynamically loaded in to a div of your choice.
Currently im going to provide a very basic script, which just takes a page and displays the contents in a div, via ajax.
I may later add an advanced version which will support additional function, to work with a php navigation meaning search engines can still crawl the content, the back button and favorites still works.

Basic script

Features:
> Shows page is loading
> dynamically loads page to a div.

Code:

---

<script>
//Set up variables
var xmlhttp ;
var thediv;
function LoadPage(page,usediv) {
        // Set up request varible
        try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
        //Show page is loading
        document.getElementById(usediv).innerHTML = 'Loading Page...';
        //scroll to top
        scroll(0,0);
        //Store div in use
        thediv = usediv;
        //send data
        xmlhttp.onreadystatechange = ShowPage;
        xmlhttp.open("GET", page);
        xmlhttp.send(null);
        //Stop any link loading normaly
        return false;
}
function ShowPage(){
        //Check page is completed and there were no problems.
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                //Write data returned to page
                document.getElementById(thediv).innerHTML = xmlhttp.responseText;
        }
}
</script>

---

This function can now be called via creating a link like this.

<a href="mypage.htm" onclick="return LoadPage('mypage.htm','mydiv');">

The above would place the contents of "mypage.htm" in to a div with the id "mydiv" such as could be written '<div id="mydiv"></div>'

The parts of the link in bold being what need editing.

I wrote the script on the go so its completely untested but should hopefully work. If it doesnt post back with the problem and ill sort it out for you.

Edit: phew noticed just in time, id forgotten to store the div id in the function independents variable, which would have stopped it from working, should be fixed now.

---

Thanks for that Carl, this could come in useful at some point. + rep. Well done. :)

Why did you just quote the whole post? And Carl, thanks for explaining every line to me in MSN lol.