Der er en hel del at lære omkring Ajax i forhold til, hvad en E-tråd kan rumme, men helt skrabet kan du skrive dette i HTML-filen:
<script type="text/javascript">
function getBrand() {
var oXHR = new XMLHttpRequest(),
nr = document.pnr.stel.value.substring(0,3),
sQuery = "context=get_brand&nr="+encodeURIComponent(nr);
oXHR.open("post", "
http://domain.dk/response.php", true);
oXHR.setRequestHeader("Content-Type: application/x-www-form-urlencoded; charset=utf-8");
oXHR.onreadystatechange = function() {
if (this.readyState<4) return;
insertBrand(this.responseText);
}
oXHR.send(sQuery);
}
function insertBrand(sJson) {
var obj = null;
try {
obj = JSON.parse(sJson);
}
catch(e){};
if (obj) {
if (obj.error) {
alert(obj.error);
return;
}
alert(obj.brand);
}
}
</script>
- og i
response.php kan du skrive:
<?php
/* Different functions for different tasks */
function getBrand() {
$res = [MYSQL_QUERY SELECT WHERE ? = $_POST['nr']];
return $res;
}
/* *************** Functions End ***************** */
header('Content-Type: application/json; charset=utf-8');
$json = new stdClass();
if (!empty($_POST)) {
if (isset($_POST['context'])) {
switch ($_POST['context']) {
case 'get_brand':
$json->brand = getBrand();
break;
default:
$json->error = '';
}
}
else $json->error = 'No context ID found.';
}
else $json->error = 'No POST variables found.';
$sJson = json_encode($json);
header('Content-Length: '.strlen($sJson));
echo $sJson;
?>
Så kan du selv føje flere cases til switch'en med tilhørende funktioner. Desuden kan du selv udbygge fejlhåndteringen, så evt. MySQL-fejl også kan aflæses på klienten, hvis du ønsker.
I det hele taget er dette som sagt et yderst skrabet eksempel. God Ajax kræver, du er
rigtig god i HTML, JavaScript, DOM, CSS og et serversprog.
