Exemple Ajax

← Retour aux Labs

Cette page contient un exemple concret d'utilisation d'Ajax. Trois boutons permettent de changer l'image affichée sans recharger toute la page.

Code Source

HTML

<script src="ajax.js"></script>

<button onclick="changeImage(1)">Image 1</button>
<button onclick="changeImage(2)">Image 2</button>
<button onclick="changeImage(3)">Image 3</button>

<img id="ajaxImage" src="images/image2.jpg" alt=""/>

<select id="imageSelect" onchange="changeImageFromSelect()">
    <option value="1">Image 1</option>
    <option value="2" selected>Image 2</option>
    <option value="3">Image 3</option>
</select>

JavaScript (ajax.js)

/**
 * Création de l'objet XMLHttpRequest
 */
function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        // Firefox et autres navigateurs modernes
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // Internet Explorer
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    } else {
        alert("Votre navigateur ne supporte pas XMLHTTPRequest...");
        xhr = false;
    }
    return xhr;
}

/**
 * Changer l'image via les boutons
 */
function changeImage(idImage) {
    var xhr = getXhr();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('ajaxImage').src = xhr.responseText;
        }
    }
    
    xhr.open("POST", "ajax.php", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("idImage=" + idImage);
    
    // Mettre à jour la liste
    document.getElementById('imageSelect').selectedIndex = idImage - 1;
}

/**
 * Changer l'image via la liste déroulante
 */
function changeImageFromSelect() {
    var select = document.getElementById('imageSelect');
    var idImage = select.options[select.selectedIndex].value;
    
    var xhr = getXhr();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('ajaxImage').src = xhr.responseText;
        }
    }
    
    xhr.open("POST", "ajax.php", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("idImage=" + idImage);
}

PHP (ajax.php)

<?php
if (isset($_POST["idImage"])) {
    switch ($_POST["idImage"]) {
        case "1":
            echo "images/ajax/reduit1.jpg";
            break;
        case "2":
            echo "images/ajax/reduit2.jpg";
            break;
        case "3":
            echo "images/ajax/reduit3.jpg";
            break;
        default:
            echo "images/ajax/reduit2.jpg";
    }
}
?>

Explication

L'exemple montre comment utiliser Ajax pour charger du contenu dynamiquement sans recharger la page :

1. Création de l'objet XMLHttpRequest : Compatible avec tous les navigateurs
2. Envoi de la requête : POST vers le serveur avec l'ID de l'image
3. Réception de la réponse : Le serveur renvoie le chemin de l'image
4. Mise à jour du DOM : L'attribut src de l'image est modifié

Seule l'image est rechargée, pas toute la page !