Communication from the server to the client sometimes is broken up that absolutely nothing is loaded to the webpage. It is a very easy concept most of the time since you will just load your XMLHttpRequest properly. However, the problem usually occurs when as simple as XML and HTTP cannot even recognize the request from XMLHttpRequest.
One of the tricks to ensure the program will properly load is to wrap the whole function in an AJAX loader. There are a lot of codes and samples out there but for today’s blog, we will take a look at a very popular script developed by Eddie Traversa.
What makes this loader remarkable is its simplicity anyone who has experience in Ajax and JavaScript will recognize how to customize the code immediately and complete the loader. This has been specifically built for XML and HTTP because it can easily handle these types of files. When your website transmits data asynchronously, XMLHttpRequest handles that stream of information but with the loader, you can make this work out even more.
There are just three steps to complete this function. Remember they can be customized according to your design specifications.
First is to load this code to your webpage’s header:
<HEAD>
<style type=”text/css”>
<!–
#contentLYR {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 200px;
top: 200px;
}
–>
</style>
<script type=”text/javascript”>
<!—Begin
function ajaxLoader(url,id) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
}
if (x) {
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
el = document.getElementById(id);
el.innerHTML = x.responseText;
}
}
x.open(”GET”, url, true);
x.send(null);
}
}
//–>
</script>
</HEAD>
Note that the header has already specified to whatever browser that you will have. Instead of additional headers you can even use this as your primary header since it is already complete in itself.
Next is to load this code in the event handler to trigger the server to load the file:
<BODY onload=”ajaxLoader(’demo.xml’,'contentLYR’)”>
Of course, you can change the ‘demo.xml’ with any file that you have or even a little bit of an html content. Remember to place this in the BODY of your code or else nothing will work.
Lastly, place this code in the body of the html file:
<div id=”contentLYR”>
</div>
Your webpage will basically recognize that something exists somewhere and that they’ll have to load it as part of their webpage.
In summary, what you just did in to trigger the Ajax loader is inform the webpage that an asynchronous function is coming up. Then you load the xml file on the event handler so that it could communicate with the XMLHttpRequest when need. Lastly, a simple HTML code will fetch the file and load it in the webpage.
As you can see, the Ajax loader is very easy to use and customize. Credit is due to Eddie Traversa for providing us this code that could upgrade the performance of any Ajax based site.
AJAX Load XML File Script Authored by Eddie Traversa is featured on Dynamic Drive (http://www.dynamicdrive.com/)
