Ajax in easy steps:
0. Add ajax code
You can use mini ajax from Google:
Javascript:
function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);
if(v!=null)n.push(v)}return n};
ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e)
{try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e)
{return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};
var nv=function(e){if(e.name)return encodeURIComponent(e.name)
+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};
Create page element which uses ajax to replace own content
Use mini ajax in HTML to replace content of ProdFav element with content generated by ajax.php (described below):
<div id="ProdFav">
<a href="#fav" onclick="ajax.update(urlROOT + 'ajax.php?action=ProdFavs&prod_id=' + prod_id + '&state=on', 'ProdFav'); return false;"><span class="dis">Make favorite</span></a>
</div>
Create php to serve new content
ajax.php uses action and prod_id parameters to create new content for ProdFav html element:
PHP:
echo '
<a href="#fav"
onclick="ajax.update(urlROOT + \'ajax.php?action=ProdFavs&prod_id=\' + '
.intval($_GET['prod_id'])
.' + \'&state=off\', \'ProdFav\'); return false;">
<span class="dis">Remove favorite</span>
</a>';