Outline · [ Standard ] · Linear+ Getting Started with AJAX, Javascript + PHP

Good tutorial for learning ajax guys ;)

That's one excellent tutorial Rexy, Ajax is becomign more and more popular - thanks :)

Great tutorial, first it wasn't very clear for me what and how but now it is!!

NVM this...

Nice tut. I am beginning to understand a lot more now. I Really appreciate it!!!

Very nice!

Im still new in AJAX and i gots a quick question that is probly a simple one.

I have an ajax frame on an index(home) page.. how would i make the ajax frame automatically show a html page when the page (index) is loaded?

This is my main script-

CODE

<!--



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
}
}
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_callJS(jsStr) { //v2.0
 return eval(jsStr)
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
//-->

lets say i name a AJAX frame "homearea"
im calling through a button link (testing.html) like this

CODE

java script:ajaxpage('testing.html', 'homearea');

the thing is.. i dont know how to make the ajax frame automatically show the index page when the website is loaded.

What do you mean by ajax "frame"? Are you using framesets or iframes? Cuz that isn't necessary...

I see the important part of the code here:

CODE

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
}

Now what you'd want to do is include the script and make an empty <div> element with id="loadstuff" ... And a link somewhat like this: <a href="#" onclick="java script:loadpage('file_name_to_include.html','loadstuff');">Load content yo</a>... Could be wrong.

I don't think thats what he meant ,just.xTc.

He wants to know how to load a default page.

just add this at the start of your java script:

CODE

ajaxpage('index.html', 'homearea');

so when the script gets loaded the index page loads, when you click another link it should overwrite it

sweet thnx guys, ill test this out when i get a break at work :)

i think i tried something similar to what unrated put but most likely i did it in the wrong spot.... or didnt do it and just thought i did lol

Wicked Modz, May 17 2007, 05:44 PM:
sry for the double post, but just letting you know it works now XD

AJAX is fun lol