ajax minimal

Le minimum à connaitre pour faire des requêtes avec ajax et php.

Test du navigateur

xhr.js

function getXHR() {
    var xhr = null;
    // identifier la méthode de requette du navigateur
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest(); 
        }
    } else { // echec 
        alert("Votre navigateur ne supporte pas l'AJAX");
        return null;
    }

    return xhr;
}

Méthode GET

get.html

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>test AJAX</title>
        <script type="text/javascript" src="xhr.js"></script>
        <script type="text/javascript">
        function request(callback) {
            var xhr = getXHR();
            // capturer l'état de retour
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr.responseText);
                }
            };

            // variables à passer en arguments dans l'url de open()
            var var1 = encodeURIComponent("valeur var1");
            var var2 = encodeURIComponent("valeur var2");

            // open(sMethod, sUrl, bAsync)
            xhr.open("GET", "get.php?variable1=" + var1 + "&variable2= " + var2, true);
            xhr.send(null);
        }
        function readData(data) {
            if (data == "OK") {
                alert("C'est parfait");
            } else {
                alert("C'est boggé");
            }
            alert(data);
        }
        request(readData);
        </script>

    </head>
    <body>
    </body>
 </html>

get.php

<?php
// Utilisation d'un header pour spécifier le type de contenu de la page et donc du retour
header("Content-Type: text/plain"); 

$v1 = (isset($_GET["variable1"])) ? $_GET["variable1"] : NULL;
$v2 = (isset($_GET["variable2"])) ? $_GET["variable2"] : NULL;

if ($v1 && $v2) echo "OK"; // text/plain de retour
else echo "Pas OK"; // text/plain de retour

?>

Méthode POST

post.html

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>test AJAX</title>
        <script type="text/javascript" src="xhr.js"></script>
        <script type="text/javascript">
        function request(callback, data) { // data = string
            var xhr = getXHR();
            // capturer l'état de retour
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr.responseText);
                }
            };
            // syntaxe de la fonction open() => open(stringMethod, stringUrl, booleenAsync)
            xhr.open("POST", "post.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // contrairement à get, les variables sont passées en argument de send()
            if(data === null) data = "variable1=1&variable2=2";
            xhr.send(data);
        }

        function readData(data) {
            //alert(data);
            document.getElementById("datajax").innerHTML = data;
        }
        // request(readData);
        </script>

    </head>
    <body>
        <a href="#" onclick="request(readData, null);">clic ici</a> 
        ou si tu préfère 
        <a href="#" onclick="request(readData, 'variable1=20&variable2=30');">clic là</a>
        <div id="datajax"></div>
    </body>
 </html>

post.php

<?php
// Utilisation d'un header pour spécifier le type de contenu de la page et donc du retour
header("Content-Type: text/plain"); 

// on prendra quand même soins de verifier que les variables soient bien du type attendu
$data = $_POST["variable1"] + $_POST["variable2"];

// text/plain de retour
echo '<span style="color:red";> Salut l\'ami, tes variables  valent '.$data.'!</span>'; 

?>

Méthode XML

xml.html

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>test AJAX</title>
        <script type="text/javascript" src="xhr.js"></script>
        <script type="text/javascript">
        <!-- 
        function request(callback) {
            var xhr = getXHR();
            // capturer l'état de retour
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    //!!! attention on a ici xhr.responseXML car on traite du xml 
                    callback(xhr.responseXML);
                }
            };

            xhr.open("GET", "xml.xml", true);
            xhr.send(null);
        }

        function readData(data) {
            var elements = data.getElementsByTagName("fiche_film");
            var ul = document.createElement("ul"), li, titre;

            for (var i=0; i<elements.length; i++) {
                li = document.createElement("li");
                titre = document.createTextNode(elements[i].getAttribute("name"));

                li.appendChild(titre);
                ul.appendChild(li);
            }

            document.getElementById("output").appendChild(ul);
        }
        //-->
        </script>

    </head>
    <body>
    <p>
        <button onclick="request(readData);">Lire le fichier XML</button>
        <div id="output"></div>
    </p>
    </body>
 </html>

xml.xml

<?xml version="1.0" encoding="utf-8"?>
<root>
    <fiche_film name="Rendez-vous au tas de sable" />
    <fiche_film name="Le premier jour du reste de ta vie" />
    <fiche_film name="Odette toulemonde" />
    <fiche_film name="Thelma et Louise" />
    <fiche_film name="La clinique de l'amour" />
</root>
22-Jun-2019
^