ajax example...

[interpim]

OK... im having trouble interpreting the tutorials I have read. 

 

Could someone point me to a tutorial, or show me and example of a page with a single image element which that image can be changed based on what is in a folder...

 

for example... i have an image css box.  the image in that box can be changed by either of 2 buttons, one is a forward and the other is a back. 

 

All I want to do is cycle through the images in that directory.

 

Any help is appreciated.  I know PHP, and am weak on Javascript. 

[F1Fan]

What tutorials have you tried? Also, you're not going to find a tutorial for exactly what you want. If you know PHP, you can easily learn JS. Then, once you know JS and AJAX, you can figure out how to do what you're trying to accomplish.

[interpim]

I've tried the Ajax Tutorials on W3 Schools...

 

the problem i think i am running into is, I don't understand how to pass data back and forth from client to server.

 

I can build a function in php to do what i need.  How do I pass data from the javascript clientside to the php script?  do i need a seperate php file for each function? or can I build several functions in php on 1 file, and call them by name with the javascript?

[F1Fan]

OK, here's your standard HTTP object creation script in JS:

function getHTTPObject() {
    var xmlhttp;
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            xmlhttp = false;
        }
    }
    return xmlhttp;
}
var http = getHTTPObject();

 

Then, here's a function that sends information to a PHP page and processes the results as more JS:

function ajaxFunction(somevar){
http.open('GET', 'ajax.php?somevar='+somevar, true);
http.send(null);
http.onreadystatechange=function(){
	if(http.readyState==4){
		eval(http.responseText); // this will try to execute the returned code from ajax.php as more JavaScript
	}
}
}

Or, you can print out data returned from ajax.php as HTML:

function ajaxFunction(somevar){
http.open('GET', 'ajax.php?somevar='+somevar, true);
http.send(null);
http.onreadystatechange=function(){
	if(http.readyState==4){
		document.getElementById('somediv').innerHTML = http.responseText; // this will put the returned code from ajax.php into a div with id "somediv"
	}
}
}