Der er ikke noget, der er svært, hvis man kan - men man skal som udgangspunkt være ret stærk i bl.a. JS og DOM. Ajax er ikke noget, du lærer på en weekend =)
Til en begyndelse skal du ikke formatere data som HTML på serveren. De skal formateres som JSON (JavaScript Object Notation) eller XML. Om JSON:
http://json.org- og en lille artikel, jeg har skrevet om JS-arrays og -objects kan måske også hjælpe på forståelsen:
http://www.eksperten.dk/guide/227Jeg har ingen idé om, hvad det helt præcist er, du skal gøre - og agter heller ikke at gøre det for dig - men jeg kan vise dig et lille eksempel på principperne.
Hvis vi forudsætter, vi har en DB-tabel med brugere, som vi gerne vil vise i et HTML-dokument, kunne det gøres noget i stil med dette:
<!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 med JSON -
http://www.eksperten.dk/spm/868810</title><style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 0.85em verdana, tahoma, sans-serif;
}
</style>
<script type="text/javascript">
// XMLHttpRequest wrapper -
http://www.dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.php(function(){if(window.XMLHttpRequest)return;var o=null,s,a=["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];for(var i=0,j=a.length;i<j;s=a[i],i++){try{if(o=new ActiveXObject(s))break}catch(e){}}window.XMLHttpRequest=o?function(){return new ActiveXObject(s)}:null;o=null})();
function showUsers() {
var oHttp = new XMLHttpRequest();
var aQuery = [];
// Tag de par af argumenter, funktionen blev kaldt med
// - og læg dem som kodede parametre i arrayet:
for (var i=0,j=arguments.length; i<j; i+=2) {
aQuery.push( encodeURIComponent(arguments[i]) +"="+ encodeURIComponent(arguments[i+1]) );
}
// Åben forbindelsen
oHttp.open("post", "response.php", true);
// Sæt en Content-Type header på requesten
oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
// Kald insertUsers, når der er data
oHttp.readystatechange = function() {
if (oHttp.readyState<4) return;
insertUsers(oHttp.responseText);
oHttp = null;
}
// Send requsten
oHttp.send( aQuery.join("&") );
}
function insertUsers(sResp) {
// Opret et JS-object udfra JSON-strengen
var oResp = eval("("+sResp+")");
// Tjek for evt. serverfejl
if (oResp.error) return alert("Der opstod en fejl: " + oResp.error);
var oRow, aTd;
// Gå users-arrayet igennem
for (var i=0,j=oResp.users.length; i<j; i++) {
// Opret en række ved at klone vores template
oRow = oRowTempl.cloneNode(true);
// Sæt en id på rækken
oRow.setAttribute("id", "userID_"+oResp.users[i].id);
// Find rækkens celler
aTd = oRow.getElementsByTagName("td");
// Udskift indholdet i cellerne i rækken
aTd[0].firstChild.nodeValue = oResp.users[i].u_name;
aTd[1].firstChild.nodeValue = oResp.users[i].sex;
aTd[2].firstChild.nodeValue = oResp.users[i].birth;
aTd[3].firstChild.nodeValue = oResp.users[i].address;
// Indsæt rækken
oUserBody.appendChild(oRow);
}
}
// Bare en test funktion på onclick på rækkerne
function foo(oRow) {
alert(oRow.getAttribute("id"))
}
var oUserBody = oRowTempl = null;
window.onload = function() {
oUserBody = document.getElementById("userBody");
// Opret en template af rækken i tbody-elementet 'userBody'.
// Den skal senere klones og indsættes i 'userBody'.
oRowTempl = oUserBody.getElementsByTagName("tr")[0];
oUserBody.removeChild(oRowTempl);
}
</script>
</head>
<body>
<p><button onclick="showUsers('context', 'getUsers')">Show</button></p>
<table>
<thead>
<tr>
<th>Navn</th>
<th>Køn</th>
<th>Fødselsdag</th>
<th>Adresse</th>
</tr>
</thead>
<tbody id="userBody">
<tr onclick="foo(this)">
<td>navn</td>
<td>køn</td>
<td>fødselsdag</td>
<td>adresse</td>
</tr>
</tbody>
</table>
</body>
</html>
Hvor response.php ser sådan ud (MySQL-koden er skrevet som pseudokode. Personligt ville jeg bruge mysqli, men det er ikke væsentligt for forståelsen af princippet):
<?php
// Opret et tomt objekt, som vil indeholde returdata
$oJson = new stdClass();
/*
Funktion, der henter brugere fra DB og lægger dem
som et array af objekter på returobjektet $oJson
*/
function getUsers() {
global $oJson;
$oJson->users = array();
// Udfør en query og hent de ønskede felter
$result = [MYSQL_SELECT_QUERY - `id`, `u_name`, `address`, `sex`, `birth`];
// Hent rækker som objekter (f.eks. med mysql_fetch_object)
while ($row = [MYSQL_FETCH_OBJECT_FROM_QUERY]) {
$oJson->users[] = $row;
}
}
// Tjek, om der er sat en 'context'
if (isset($_POST["context"])) {
// Vælg handling udfra 'context'
switch ($_POST["context"]) {
case "getUsers":
getUsers();
break;
default:
$oJson->error = "Unknown context: '".$_POST["context"]."'";
}
}
else $oJson->error = "No context found";
// Dan en streng repræsentation af JSON-objektet
$sJson = json_encode($oJson);
// Sæt passende headers og udskriv JSON-strengen
header("Content-Type: application/json; charset=utf-8");
header("Content-Length: ".strlen($sJson));
print $sJson;
?>
