AJAX XML
Apprenez à charger des données XML avec AJAX depuis un script PHP et à les afficher sans rechargement complet. Exemple avec XMLHttpRequest et le DOM.
Ce chapitre montre comment charger des données XML depuis un script PHP via AJAX et les afficher sur une page sans rechargement complet. Vous allez créer un point de terminaison PHP qui génère du XML, le récupérer dans le navigateur avec XMLHttpRequest, analyser la réponse avec le DOM et injecter le résultat dans la page.
Si vous débutez sur ce sujet, commencez par les chapitres Introduction à AJAX et AJAX avec PHP.
Qu'est-ce qu'AJAX ?
AJAX (Asynchronous JavaScript and XML) est une technique qui permet au navigateur d'échanger des données avec le serveur en arrière-plan et de ne mettre à jour qu'une partie de la page, au lieu de recharger tout le document. Le navigateur effectue une requête HTTP depuis JavaScript, reçoit une réponse et l'utilise pour modifier le DOM. Cela réduit la latence perçue et la charge du serveur.
Qu'est-ce que XML ?
XML (Extensible Markup Language) est un format texte permettant de stocker et de transporter des données structurées à l'aide de balises imbriquées. Il est lisible par l'humain et auto-descriptif, ce qui en fait un format de transport pratique entre un serveur PHP et le navigateur. Lorsqu'un serveur envoie du XML avec un en-tête Content-Type: text/xml, le navigateur l'analyse automatiquement et l'expose sous forme d'arborescence DOM via la propriété responseXML de la requête.
Pourquoi utiliser PHP, AJAX et XML ensemble ?
Dans ce modèle, PHP interroge une source de données (une base de données ou un fichier) et émet un document XML, le navigateur demande ce document via AJAX, et JavaScript transforme les nœuds XML en HTML. Le résultat est une page qui met à jour une zone de contenu à la demande. Bien que XML fonctionne, la plupart des applications modernes envoient désormais du JSON car JavaScript peut l'analyser nativement — voir la remarque dans la conclusion.
Comment utiliser PHP, AJAX et XML ensemble
Pour utiliser PHP, AJAX et XML ensemble, vous devez suivre ces étapes :
- Créer un script PHP qui récupère des données depuis une base de données ou un fichier.
- Utiliser AJAX pour appeler le script PHP et récupérer les données.
- Analyser la réponse XML en JavaScript, la convertir en éléments HTML et l'afficher sur la page web.
Étape 1 : Créer un script PHP
La première étape consiste à créer un script PHP qui récupère des données depuis une base de données ou un fichier. Ce script sera responsable de la récupération des données qui seront affichées sur la page web.
Voici un exemple de script PHP qui récupère des données depuis une base de données :
Exemple de script PHP récupérant des données depuis une base de données
<?php
// Connect to database
$con = mysqli_connect("localhost","username","password","database");
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
// Retrieve data from database
// Note: Ensure the database contains a table named 'table' with columns: title, description, price
// Note: In production, use prepared statements to prevent SQL injection
$result = mysqli_query($con,"SELECT * FROM table");
// Set content type to XML
header('Content-Type: text/xml');
echo '<?xml version="1.0"?>';
echo '<items>';
// Loop through the results and add them to XML
while($row = mysqli_fetch_array($result)) {
echo '<item>';
echo '<title>' . htmlspecialchars($row['title']) . '</title>';
echo '<description>' . htmlspecialchars($row['description']) . '</description>';
echo '<price>' . htmlspecialchars($row['price']) . '</price>';
echo '</item>';
}
echo '</items>';
?>Remarque : En production, remplacez les identifiants codés en dur par des variables d'environnement et ajoutez une gestion des erreurs pour les connexions à la base de données.
Étape 2 : Utiliser AJAX pour appeler le script PHP
L'étape suivante consiste à utiliser AJAX pour appeler le script PHP et récupérer les données. Assurez-vous d'abord que votre page HTML contient un élément conteneur où les données récupérées seront injectées :
<div id="data-container"></div>Voici un exemple de script AJAX qui appelle le script PHP créé à l'étape 1 :
Exemple d'utilisation d'AJAX pour appeler un script PHP et récupérer les données
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var xmlDoc = this.responseXML;
var items = xmlDoc.getElementsByTagName("item");
var container = document.getElementById("data-container");
container.innerHTML = ""; // Clear previous data
for (var i = 0; i < items.length; i++) {
var title = items[i].getElementsByTagName("title")[0].textContent;
var desc = items[i].getElementsByTagName("description")[0].textContent;
var price = items[i].getElementsByTagName("price")[0].textContent;
var div = document.createElement("div");
div.className = "item";
div.innerHTML = "<h3>" + title + "</h3><p>" + desc + "</p><span>" + price + "</span>";
container.appendChild(div);
}
} else {
console.error("Request failed with status: " + this.status);
var container = document.getElementById("data-container");
container.innerHTML = "<p>Error loading data.</p>";
}
}
};
xmlhttp.open("GET", "getdata.php", true);
xmlhttp.send();Remarque : Assurez-vous que le script PHP ne génère aucun espace blanc ni BOM avant la déclaration XML, car cela provoquerait le retour de null par this.responseXML. Si nécessaire, ajoutez ob_clean(); au début du fichier PHP. Si votre script PHP est hébergé sur un domaine différent, assurez-vous que le serveur envoie les en-têtes CORS appropriés (par ex. Access-Control-Allow-Origin: *).
Étape 3 : Formater les données et les afficher sur la page web
Le navigateur expose la réponse XML sous forme d'arborescence DOM via this.responseXML, donc le JavaScript de l'étape 2 effectue déjà l'analyse : getElementsByTagName("item") renvoie les nœuds <item>, et textContent lit la valeur de chaque enfant. Pour une réponse serveur typique, le XML produit par le script PHP de l'étape 1 ressemble à ceci :
Exemple de formatage et d'affichage de données XML
<items>
<item>
<title>Item 1</title>
<description>This is the description of item 1.</description>
<price>$10.00</price>
</item>
<item>
<title>Item 2</title>
<description>This is the description of item 2.</description>
<price>$20.00</price>
</item>
<item>
<title>Item 3</title>
<description>This is the description of item 3.</description>
<price>$30.00</price>
</item>
</items>Après l'analyse, JavaScript crée des éléments HTML standard (comme <div>, <h3> et <span>) qui peuvent ensuite être stylisés avec CSS. Voici un exemple de CSS correspondant à la structure HTML générée :
Exemple de CSS pour styliser les données affichées
.item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.item h3 { margin: 0 0 5px; }
.item span { color: #2a9d8f; font-weight: bold; }Conclusion
L'utilisation conjointe de PHP, AJAX et XML permet aux développeurs de créer des pages web dynamiques qui mettent à jour un contenu spécifique sans rechargement complet. En suivant les étapes ci-dessus, vous pouvez mettre en œuvre ce modèle pour améliorer l'expérience utilisateur et réduire la charge du serveur.
Remarque : Bien que ce tutoriel utilise XML et XMLHttpRequest à des fins pédagogiques, les applications web modernes préfèrent généralement JSON et l'API fetch pour les échanges de données AJAX en raison de la prise en charge native par JavaScript et de la syntaxe plus simple. Consultez json_encode() pour produire du JSON depuis PHP.
Chapitres associés
- Introduction à AJAX — les bases de
XMLHttpRequestet le cycle de vie des requêtes. - AJAX et PHP — appeler des scripts PHP depuis le navigateur.
- AJAX et base de données — récupérer des lignes de base de données via AJAX.
- PHP SimpleXML — analyser du XML côté serveur avec PHP.