Last Updated: July 27, 2016
·
2.421K
· hollymwallace

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>

2 Responses
Add your response

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 ·

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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside