PHP - AJAX et PHP

AJAX (Asynchronous JavaScript and XML) est une technologie utilisée pour échanger des données avec le serveur sans rafraîchir la page entière.

AJAX est une technologie qui peut mettre à jour des parties d'une page web sans avoir besoin de recharger la page entière. Il échange des données avec le serveur en arrière-plan et peut mettre à jour une partie du contenu de la page web.

AJAX permet aux pages web de mettre à jour dynamiquement des parties du contenu, offrant une expérience utilisateur plus rapide.

AJAX utilise généralement l'objet XMLHttpRequest pour communiquer avec le serveur en arrière-plan, bien qu'il puisse également utiliser des méthodes modernes telles que l'API fetch.

Pour plus de contenu, vous pouvez vous référer à :Tutoriel AJAX

Comment fonctionne AJAX

  • Envoyer la requête: L'utilisateur déclenche une requête AJAX d'une manière ou d'une autre (comme en cliquant sur un bouton).
  • Créer la requête: JavaScript crée un objet XMLHttpRequest pour communiquer avec le serveur.
  • Envoi de la requête: Envoyer une requête au serveur via l'objet XMLHttpRequest.
  • Traitement côté serveur: Après avoir reçu la requête, le serveur traite les données.
  • Renvoi de la réponse: Le serveur renvoie le résultat du traitement au client.
  • Mise à jour de la page: Après que JavaScript a reçu la réponse du serveur, il met à jour la partie correspondante de la page web.

Étapes pour utiliser AJAX en PHP

1. Frontend :JavaScript lance la requête AJAX.

Utiliser XMLHttpRequest ou fetch pour envoyer une requête au serveur PHP.

2. Backend :PHP reçoit et traite la requête.

PHP récupère les données de la requête AJAX et renvoie le résultat.

3. Frontend :Traiter les données renvoyées par PHP.

Utiliser JavaScript pour analyser et afficher les données de réponse reçues de PHP.

Utilisation d'AJAX en PHP

1. Créez le HTML et le JavaScript: Tout d'abord, vous avez besoin d'une page HTML et d'un code JavaScript pour envoyer des requêtes AJAX.

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple AJAX</title>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "your_php_file.php?param=value", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">Envoyer une requête AJAX</button>
    <div id="result"></div>
</body>
</html>

2. Écrivez le script PHP :Côté serveur, vous avez besoin d'un fichier PHP pour traiter la requête et renvoyer les données.

Exemple

<?php
if (isset($_GET['param'])) {
    // Gérer les paramètres de requête
    $param = $_GET['param'];
    // Effectuer quelques opérations...
    // Renvoyer la réponse
    echo "Paramètre reçu : " . $param;
}
?>

3. Envoyer la requête :Lorsque l'utilisateur clique sur le bouton, la fonction JavaScript sendRequest est appelée. Elle crée un objet XMLHttpRequest et envoie la requête au serveur.

4. Gérer la réponse :Après que le serveur a traité la requête, il renvoie le résultat au client. Le code JavaScript côté client vérifie le statut de la réponse et met à jour le contenu de la page lorsque le statut est 200 (c'est-à-dire que la requête a réussi).

Exemple AJAX PHP

L'exemple suivant montre comment une page web communique avec un serveur web lorsque l'utilisateur saisit des caractères dans un champ de saisie :

Exemple

Essayez de saisir un nom dans le champ de saisie, par exemple : Anna :

Nom :

Valeur de retour :



Explication de l'exemple - Page HTML

Lorsque l'utilisateur saisit des caractères dans le champ de saisie ci-dessus, la fonction "showHint()" est exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :

Exemple

<html>
<head>
<script>
function showHint(str)
{
        if (str.length==0)
        {
                document.getElementById("txtHint").innerHTML="";
                return;
        }
        if (window.XMLHttpRequest)
        {
// Code exécuté par les navigateurs IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        }
        else
        {      
// Code exécuté par les navigateurs IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?q="+str,true);
        xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Entrez un nom dans la zone de saisie :</b></p>
<forme>
Nom :<input type="text" onkeyup="showHint(this.value)">
</forme>
<p>Valeur de retour :<span id="txtHint"></span></p>

</body>
</html>

Explication du code source :

Si la zone de saisie est vide (str.length==0), la fonction efface le contenu de l'espace réservé txtHint et quitte la fonction.

Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes :

  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter lorsque la réponse du serveur est prête
  • Envoyer une requête au fichier sur le serveur
  • Notez le paramètre (q) ajouté à la fin de l'URL (contenant le contenu de la zone de saisie)

La page serveur appelée via JavaScript ci-dessus est un fichier PHP nommé "gethint.php".

Le code source dans "gethint.php" vérifie le tableau des noms puis renvoie le(s) nom(s) correspondant(s) au navigateur :

Exemple

<?php
// Remplissez les noms dans un tableau
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophélie";
$a[]="Pétunia";
$a[]="Amanda";
$a[]="Rachel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Ève";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

// Récupérer le paramètre q depuis l'adresse URL de la requête
$q=$_GET["q"];

// Vérifier s'il existe une valeur correspondante, si q>0
if (strlen($q) > 0)
{
        $hint="";
        for($i=0; $i<count($a); $i++)
        {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                        if ($hint=="")
                        {
                                $hint=$a[$i];
                        }
                        else
                        {
                                $hint=$hint." , ".$a[$i];
                        }
                }
        }
}

// S'il n'y a pas de valeur correspondante, définir la sortie sur "aucune suggestion"
if ($hint == "")
{
        $response="aucune suggestion";
}
else
{
        $response=$hint;
}

// Afficher la valeur de retour
echo $response;
?>

Explication : Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), alors ce qui suit se produit :

  1. Rechercher les noms correspondant aux caractères envoyés par JavaScript
  2. Si aucune correspondance n'est trouvée, définir la chaîne de réponse sur "no suggestion"
  3. Si un ou plusieurs noms correspondants sont trouvés, définir la chaîne de réponse avec tous les noms
  4. Envoyer la réponse à l'espace réservé "txtHint"

Implémentation d'AJAX avec fetch et PHP

HTML + JavaScript:

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'AJAX avec PHP</title>
</head>
<body>

<h1>Exemple AJAX</h1>
<button id="ajaxButton">Obtenir des données depuis PHP</button>
<div id="result"></div>

<script>
    document.getElementById('ajaxButton').addEventListener('click', function() {
// Envoyer la requête AJAX
        fetch('server.php', {
method: 'POST', // Utiliser une requête POST
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: "Bonjour depuis le client" })
        })
.then(response => response.json()) // Analyser comme JSON
        .then(data => {
document.getElementById('result').innerHTML = data.response; // Mettre à jour la page
        })
        .catch(error => console.error('Erreur :', error));
    });
</script>

</body>
</html>

Serveur PHP (server.php) :

Exemple

<?php
// Définir les en-têtes de réponse pour prendre en charge JSON
header('Content-Type: application/json');

// Récupérer les données d'entrée de la requête AJAX
$request = json_decode(file_get_contents("php://input"), vrai);

// Traiter les données et renvoyer une réponse
if ($request['message'] === "Bonjour depuis le client") {
    $response = array('response' => 'Bonjour depuis le serveur PHP !');
} else {
    $response = array('response' => 'Message invalide');
}

// Renvoyer le résultat au client
echo json_encode($response);
?>

Explication :

  1. Frontend: Lorsque l'utilisateur clique sur le bouton, JavaScript utilisefetch()envoyer une requête POST àserver.php, et envoie une donnée JSON.
  2. Backend: Le serveur PHP lit la requête envoyée par le client, la traite et renvoie une réponse JSON.
  3. Traitement de la réponse: Après que JavaScript reçoit la réponse du serveur PHP, il met à jour le contenu de la page.

Solutions aux problèmes inter-domaines PHP Ajax

Si vos requêtes asynchrones doivent traverser des domaines, vous pouvez consulter :Solutions aux problèmes inter-domaines PHP Ajax。

Autres extensions