Here's one I have written -
PHP:
function call(data,id,process,wait){
var request=false;
try{request = new XMLHttpRequest()}
catch(error){
try{request = ActiveXObject("Microsoft.XMLHttp")}
catch(error){return true}
}
if(request){
var b=document.getElementById(id);
request.open("post",data,true);
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.setRequestHeader('If-Modified-Since','thr,06 apr 2007 00:00:00 GMT');
request.onreadystatechange=function(){
if(request.readyState==1){
b.innerHTML=wait;
}
if(request.readyState==4 && request.status==200){
document.getElementById(id).innerHTML=request.responseText;
delete request;
request=null;
}
}
request.send(process);
}
}
Right now this is a function that is called in like this-
onlclick="call('path/to/file/you/want/to/call','id where you want to load the page into','var=b','Text to display to the user while the page loads');"
var=b is the post data you want to send.
On the page you are calling if you just echo out
echo $_POST['var']; b would be outputted. To add more post variables just add the & sign followed by the varaible name followed by what you want it to equal.
If you prefer get varaibles to pass just add them to the end of the path name. So for example if you had this ~
<button type="submit" onclick="call('inc/ajax.php?a=a','document.getElementById('form')','b=b&c=c','Your details are being sent, please wait for conformation......');"">Send</button>
Once the button was clicked the element with the id of form would be changed and would display Your details are being sent, please wait for conformation......
If the file is being referanced properly and you write
echo" a=".$_GET['a']." b=".$_POST['b']." c=".$_POST['c'];
as the contents of ajax.php located in the same directory as this js funstion then ~
The form id inner contents would then be changed to ~
a=a b=b c=c
This can then be used as many times as you want.
I have also optimized it by deleting a request if the button is clicked more than once, this helps to speed up the process if the user is inpatient and clicks the button multiple times thus helping to minimalize browser freezes if the user is on a slow connection and having shed loads of calls all going on at once.
The query can be optimized further by having it cached the first time making all substitant AJAXian querys load faster, however I have not bothered going this far on this one as I use advanced preformance optimization techniques that do not require this, I can add it if you would like however.
Hope it helps and is what you are looking for.
Jaz
Key ~
Red - JavaScript.
Blue - Hypertext Preprocessor
Purple - Extensible Hypertext Markup Language