Last Updated: July 27, 2016

Ajax Content Loader

<html>
<head>
<script>
var loadedobjects=”"
var rootdomain=”http://”+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject(“Msxml2.XMLHTTP”)
}
catch (e){
try{
page_request = new ActiveXObject(“Microsoft.XMLHTTP”)
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open(‘GET’, url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=”"
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(“.js”)!=-1){ //If object is a js file
fileref=document.createElement(‘script’)
fileref.setAttribute(“type”,”text/javascript”);
fileref.setAttribute(“src”, file);
}
else if (file.indexOf(“.css”)!=-1){ //If object is a css file
fileref=document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”);
fileref.setAttribute(“type”, “text/css”);
fileref.setAttribute(“href”, file);
}
}
if (fileref!=”"){
document.getElementsByTagName(“head”).item(0).appendChild(fileref)
loadedobjects+=file+” ” //Remember this object as being already added to page
}
}
}

</script>
</head>
<body>
<div id=”aboutText”>
<div id=”folioWrap”>
<h3>Please choose an example below.</h3>
</div>
<div></div>

<div id=”folioThumbWrap”>

<div id=”folioThumb1″><a href=”javascript:ajaxpage(‘externals/graphic/graphic1.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb1.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic2.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb2.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic3.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb3.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic18.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb18.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic4a.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb4a.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic4b.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb4b.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic4c.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb4c.png” /></a></div>
<div id=”folioThumb1″><a href=”javascript:ajaxpage(‘externals/graphic/graphic5.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb5.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic6.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb6.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic7.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb7.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic8.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb8.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic9.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb9.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic10.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb10.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic11.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb11.png” /></a></div>
<div id=”folioThumb4″><a href=”javascript:ajaxpage(‘externals/graphic/graphic12.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb12.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic13.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb13.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic14.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb14.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic15.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb15.png” /></a></div>
<div id=”folioThumb2″><a href=”javascript:ajaxpage(‘externals/graphic/graphic16.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb16.png” /></a></div>
<div id=”folioThumb3″><a href=”javascript:ajaxpage(‘externals/graphic/graphic17.html’, ‘folioWrap’);”><img src=”images/portfolio/graphic/graphicSpriteThumb17.png” /></a></div>
</div>

</div>

</div>

</div>
</body>
</html>

#ajax

#html

#javascript

Written by Holly

Say Thanks

Respond

Related protips

Latest Web UI Trend: Ajax Loading Bars

10.91K

Fixing Wordpress Comments

5.239K

Rails 4: How to partials & AJAX, dead easy

193.1K

2 Responses

Add your response

kamiphuc

I'm sorry but I can't figure it out myself that, what is the point of 'ajaxpage'?
Why should you do that? I really want to hear your side of story

over 1 year ago ·

nunull

Yap, i agree with kamiphuc. It's really hard to read this without an explanation and code-intendation. It seems you're loading multiple pages via AJAX. Maybe it would be better to load templates once, and the content as JSON if you need it. Then you could use a client-sided templating-engine like mustache.js or handlebars.js. By the way, what are those 'externals/graphic/graphic*.html'-pages looking like?

over 1 year ago ·