Mine Is, NO Array NO Frames
1st: From A Page, Load Page Only
Add this code to your head tag
<script type="text/javascript">
//To include a page, invoke ajaxinclude("afile.htm") in the BODY of page
//Included file MUST be from the same domain as the page displaying it.
var rootdomain="http://"+window.location.hostname
function ajaxinclude(url) {
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.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}
</script>
Once Thats Done, Add This Peace Of Code Where You Want It To Load
<script type="text/javascript">
ajaxinclude("afile.htm")
</script>
if you want it to load like http://programmersheaven.com,
Put This Code
<script type="text/javascript">
ajaxinclude(rootdomain+"/includes/afile.htm")
</script>
rootdomain+ Means, it will load your domain name
If You Want It To Be, Went somebody clicked this and will load
OnClick="ajaxinclude("afile.htm")
2nd: From A Page, Load The Page Text Only
Put This Bunch Of Code To Your Head Tag
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
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)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, 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>
Once Thats Done, Either Choose A Code:
Normal link:
<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>
<div id="contentarea"></div>
Or , Normally load this code
<script type="text/javascript">
ajaxpage('test.htm', 'rightcolumn') //load "test.htm" into "rightcolumn" DIV
</script>
Load absolute URL link:
<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a>
<div id="contentarea"></div>
Using a drop down menu to load the links:
<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)
}
</script>
<form>
<select id="ajaxmenu" size="1">
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
<input type="button" onClick="ajaxcombo('ajaxmenu', 'contentarea')" value="Go" />
</form>
If you need the drop down menu to load absolute URLs on your site, just modify the "ajaxpage()" function in the above code to:
ajaxpage(rootdomain+"/"+selectobj.options[selectobj.selectedIndex].value, loadarea)
Finally, and if that wasn't enough, if you wish the drop down menu to load a file simply by selecting it from the menu (versus clicking on the "Go" button, change the entire form above to:
<form>
<select id="ajaxmenu" size="1" onChange="ajaxcombo('ajaxmenu', 'contentarea')">
<option value="">Select A file to load</option>
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
</form>
Load page and external CSS /JavaScript link:
<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>
Syntax of loadobjs():
Note that function loadobjs() can invoke any number of CSS and external JavaScript files that you need. For example:
loadobjs('external.css') //load one CSS file
loadobjs('external.css', 'external2.css', 'feature.js') //load 2 CSS files & 1 JS file
loadobjs('feature.js', 'feature2.js', 'feature3.js') //load 3 JS files
