In Progress Tutoral: Basic Ajax Page Loading Tutoral

[Mentor]

This is a new tutorial ive started writing, so i decided to post it here to see if i could get any feedback on it, parts ive missed out, not covered well enough, stuff thats unclear etc etc. Any feedback on it would be useful, as id like to improve it a little before putting it on to thybag tutorial system properly.

Thanks
bag
_____________________________


Ajax page loading (Sometimes referred to as an ajax navigation) is the method by which you can load a new content or even new pages in to an aria on a website without needing to refresh the current page. Advantages of this are that in many cases loading only the bits you need will save bandwidth, as well as allow transitions between pages to seem smoother like web 2.0 apps. A second advantage is like iframe's information and active elements in the surrounding page wont be changed or altered, or need to be remember while a user navigates the site.

Ajax page loading can be done in a variety of ways, from the simple method covered in this tutorial to far more advanced systems which allow users to maintain things like the back button functionality, favorites and allow links to specific pages. In this tutorial im just going to cover the former, a basic general purpose page loading function which will allow pages to be changed via ajax. I may later do a more advanced tutorial covering methods used for more advanced ajax page loading.

The full code to the function is shown below along with additional comments, which for sum will be all thats needed to understand how it works.

<script>
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);
         //send data
         xmlhttp.onreadystatechange = function(){
                 //Check page is completed and there were no problems.
                 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                        //Write data returned to page
                        document.getElementById(usediv).innerHTML = xmlhttp.responseText;
                 }
         }
         xmlhttp.open("GET", page);
         xmlhttp.send(null);
         //Stop any link loading normaly
         return false;
}
</script>

The function can be called in the page in a variety of ways, and requires two parameters in order to work.The first prameter is "page" this is the document location of the html/php/ect file you want to be placed in to your current webpage, for example "http://somesite.com/page2.htm". The second parameter"usediv" is the ID of the div you want the content to be placed in to.

So if you had on your page a div with the id "page_content" and you wanted the contents of page2.htm placed inside it you would call the function with:

<a href="mypage.htm" onclick="return LoadPage('page2.htm','page_content');">
or
<a href="javascript: LoadPage('page2.htm','page_content');">



Code break down

function LoadPage(page,usediv) {

Begin function

// Set up request varible
 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}

This sets up the XMLHttpRequest object and stores it in the variable xmlhttp. Two methods are tried by the above code so it will work in IE which requires a different method to other browsers.

//Show page is loading
document.getElementById(usediv).innerHTML = 'Loading Page...';

This part simply fills the div with the content "page loading", while the rest of the script is run. This will show the user something is happening if the page takes a while to load.

//scroll to top
scroll(0,0);

This part is pretty self explanatory and simply scrolls the browser back to the top of the page.

//send data
         xmlhttp.onreadystatechange = function(){
                 //Check page is completed and there were no problems.
                 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                        //Write data returned to page
                        document.getElementById(usediv).innerHTML = xmlhttp.responseText;
                 }
         }

This is the most important part of the script which actually deals with the response from the xmlHTTP request.
Once the request is made, the onreadystatechange value will change depending on what stage of loading the page being requested is at. Every time this happens a function is called, which checks to see if the ready state is 4 (meaning the page is fully loaded) and the status is 200 (there were no errors). If this is true, the contents of the loaded page stored in xmlhttp.responseText; is placed as the chosen divs content.
Thus completing the page load.

xmlhttp.open("GET", page);

This part actually sends the get request to the relevant page so as to load it, it can also be used to send a post request, which is useful for form data as an exsample.

xmlhttp.send(null);

Even though no data needs to sent, some browsers will not initiate the request unless something is. So this is required for cross browser compatibility.

//Stop any link loading normally
return false;

This part is only useful if the function is called in the onClick even of a link, as it stops the browser loading the page in the normal href value. This can be useful as users without javascript and search engines will still be able to view the pages content via the normal link. While users with javascript still get the full benefit of the ajax page load.

}

And finally end the function.

[Luckyrare]

Very nice and interesting

[hadouken!]

Very good. Plus rep when my rep points come through X

[Florx]

Well done! Very useful. [+rep]

Can you use AJAX in forms to post data?

[Heinous]

Well done! Very useful. [+rep]

Can you use AJAX in forms to post data?

Yes, but somewhat more complicated.

[Mr.OSH]

I had a quick read over it and it seems fairly easy to understand and a great tutorial. Well Done Carl + rep.

[Invent]

Yes, but somewhat more complicated.

Not that much more complicated, as you could just use GET requests instead of POST's.

[hadouken!]

That was complicated

[Heinous]

Not that much more complicated, as you could just use GET requests instead of POST's.

I was actually going to mention that, lol.

Though, that's still sending a GET request.

[Mentor]

Well done! Very useful. [+rep]

Can you use AJAX in forms to post data?

Indeed you can, would you like me to do a tutoral on it, in basic terms only difference is you replace get with post and instead of sending null send a load of values via that