Bonjour,

AJAX est le moyen d'effectuer des requêtes HTTP vers le serveur sans recharger la page. Cela permet de mettre à jour des données de manière transparente au visiteur.

L'archive suivante contient un exemple d'utilisation d'AJAX. La solution n'est certainement pas la plus optimale, ni exempte d'erreurs de conception ou autres trucs de ce genre. Elle est donc distribuée "tel quel" sans garanti de fonctionnement parfait.

Vous devez avoir PHP5 avec l'extension mysqli installés sur votre serveur pour faire fonctionner l'exemple. De plus, l'extension DOM ne doit pas être désactivée puisqu'elle est utilisée.

Testé sous: Firefox 1.5 beta2 et Internet Explorer 6

http://pub.generationphp.net/ajax.zip

config.inc.php

<?php
$db = array(
	'server' => 'localhost',
	'user' => 'database',
	'passwd' => '',
	'name' => 'test'
);
?>

index.php

<?php
require './config.inc.php';

$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);

if (0 !== mysqli_connect_errno()) {
	exit('Could not connect to database: ' . mysqli_connect_error());
}

// Regions initiales
$sql = 'SELECT region_id, region_name FROM regions';
?>

<script type="text/javascript" src="regions.js"></script>

<form action="submit.php" method="post" id="form">

<p>Sélectionnez une région:
	<select name="regions" id="regions" onchange="updateDepartements(this.value)">
	<?php
	if (FALSE !== ($res = $mysqli->query($sql))) {

		while ($row = $res->fetch_assoc()) {
			printf('<option value="%s">%s</option>', $row['region_id'],  $row['region_name']);
		}
		$res->close();
	}
	?>
	</select>
</p>

<p>Sélectionnez un département:
	<select name="departements" id="departements"></select>
</p>

<p><input type="submit" value="Soumettre" />

</form>

rpc.php

<?php
if (TRUE === isset($_GET['region'])) {
	$region = intval($_GET['region']);
} else {
	exit;
}

require './config.inc.php';

$mysqli = new mysqli($db['server'], $db['user'], $db['passwd'], $db['name']);

if (0 !== mysqli_connect_errno()) {
	exit('Could not connect to database: ' . mysqli_connect_error());
}

header('Content-Type: text/xml; charset=UTF-8');

$dom = new DOMDocument('1.0', 'utf-8');
$message = $dom->createElement('message');
$message = $dom->appendChild($message);

$sql = 'SELECT departement_id, departement_name ' .
       'FROM departements ' .
       'WHERE region_id=' . $region;

if (FALSE !== ($res = $mysqli->query($sql))) {

	while ($row = $res->fetch_assoc()) {
		$departement = $dom->createElement('departement', utf8_encode($row['departement_name']));
		$departement = $message->appendChild($departement);
		$departement->setAttribute('id', $row['departement_id']);
	}
	$res->close();
}

echo $dom->saveXML();
?>

regions.js

var ajax;

try {
	ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
	try {
		ajax = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e) {
		if (typeof XMLHttpRequest!='undefined') {
			ajax = new XMLHttpRequest();
		}
	}
}

function updateDepartements(region) {
	ajax.open('get', 'rpc.php?region=' + region);
	ajax.onreadystatechange = handleResponse;
	ajax.send(null);
}

function handleResponse() {

	if(ajax.readyState == 4) {

		var data = ajax.responseXML.getElementsByTagName('departement');

		document.getElementById('departements').innerHTML = '';
		for(var i=0;i<data.length;i++) {

			var option = document.createElement('option');
			option.setAttribute('value',data[i].getAttribute("id"));
			option.appendChild(document.createTextNode(data[i].firstChild.nodeValue));
			document.getElementById('departements').appendChild(option);
		}
	}
}

function initForm() {
	document.getElementById('regions').selectedIndex = 0;
	updateDepartements(document.getElementById('regions').value);
}

if (window.addEventListener) {
	window.addEventListener("load", initForm, false); 
} else if (window.attachEvent){ 
	window.attachEvent("onload", initForm); 
}

test.sql