Hvis du vil bygge en Ferrari, bør du begynde at lære en hel masse om mekanik, længe før du vil påbegynde bygningen ;o)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Eksempel -
http://www.eksperten.dk/spm/888717</title><script type="text/javascript">
// XMLHttpRequest wrapper:
http://dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.phpvar sAX="MSXML2.XMLHTTP.6.0 MSXML2.XMLHTTP.3.0 Msxml2.XMLHTTP Microsoft.XMLHTTP";
(function(){var x=window.XMLHttpRequest;if(!x){var o=s=null,a=sAX.split(" ");for(var i=0,j=a.length;i<j;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}}window.XMLHttpRequest=x?x:o?function(){return new ActiveXObject(s)}:null;o=null;sAX=undefined})();
// Ajax funktion
function myAjaxRequest(sUrl, oVars, fnHandler) {
var oHttp = new XMLHttpRequest();
oHttp.open("post", sUrl, true);
oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
oHttp.onreadystatechange = function(){
if (oHttp.readyState<4) return;
fnHandler(oHttp.responseText);
oHttp = null;
};
var x, sQ, aQuery = [];
for (x in oVars) aQuery.push( encodeURIComponent(x) + "=" + encodeURIComponent(oVars[x]) );
sQ = aQuery.length>0 ? aQuery.join("&") : null;
oHttp.send(sQ);
}
function getUsers() {
// Tøm TBODY'en, hvis der er rækker i den
while (oDispl.firstChild) oDispl.removeChild(oDispl.firstChild);
// Opret en variabel, som serverscriptet kan genkende
// og bruge til at vælge at gøre det ønskede
var oVars = {"contxt": "getUsers"};
// Send en Ajax request
myAjaxRequest("response.php", oVars, fillDisplay);
}
// Callback funktion, som fylder rækker i TBODY'en
function fillDisplay(sResponse) {
// Opret et JS-object udfra JSON-strengen fra serveren
var oResp = eval("(" + sResponse + ")");
// Udfør handlinger ved evt. fejl
if (!oResp) return alert("Some unforeseen shit hit the fan!");
if (oResp.error) return alert(oResp.error);
// Indsæt data med DOM
var oClone = aTD = null, oFrag = document.createDocumentFragment();
for (var i=0,j=oResp.rows.length; i<j; i++) {
oClone = oTempl.cloneNode(true);
oClone.setAttribute("userID", oResp.rows[i].id);
aTD = oClone.getElementsByTagName("td");
aTD[0].firstChild.nodeValue = oResp.rows[i].u_name;
aTD[1].firstChild.nodeValue = oResp.rows[i].u_sex;
aTD[2].firstChild.nodeValue = oResp.rows[i].u_birth;
oClone.style.background = i%2==0 ? "#fff" : "#f0f0f0";
oFrag.appendChild(oClone);
}
oDispl.appendChild(oFrag);
oResp = null;
}
// Testfunktion, som alert'er et eller andet ved rækken
function rowClick(oTR) {
alert(oTR.getAttribute("userID"))
}
var oDispl = oTempl = null;
window.onload = function(){
oDispl = document.getElementById("userDisplay");
oTempl = oDispl.getElementsByTagName("tr")[0];
oDispl.removeChild(oTempl);
}
</script>
</head>
<body>
<p><button onclick="getUsers()">Hent brugere</button></p>
<table>
<thead>
<tr>
<th>Navn</th>
<th>Køn</th>
<th>Fødeår</th>
</tr>
</thead>
<tbody id="userDisplay">
<tr onclick="rowClick(this)">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
Det er dog stadig temmelig urealistisk at ville bruge Ajax uden at kunne JavaScript ... uanset, hvor lille en ting man vil bruge det til =)
