Tutoriel PHP Ajax avec exemple

Par : Fiona Brun Fiona Brun
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Ajax en PHP permet à une page web d'échanger de petites quantités de données avec le serveur et de mettre à jour une partie de la page sans rechargement complet. Ce tutoriel présente la création d'une recherche en direct, en expliquant l'approche classique XMLHttpRequest et l'alternative moderne Fetch API.

  • (I.e. Qu'est-ce qu'Ajax ? Ajax, asynchrone JavaScript et XML permettent de mettre à jour une partie d'une page en échangeant des données avec le serveur sans rechargement complet.
  • | Pourquoi l'utiliser : Ajax permet de bénéficier de fonctionnalités riches, similaires à celles des applications de bureau, telles que la saisie semi-automatique, la validation en direct et les listes déroulantes dépendantes.
  • ️ Client et serveur : JavaLe script s'exécute dans le navigateur et appelle un script PHP, qui renvoie uniquement les données nécessaires à la mise à jour de la page.
  • 🔍 Recherche en direct: Un gestionnaire d'événement onkeyup envoie chaque frappe au clavier à un script PHP qui renvoie instantanément les noms des frameworks correspondants.
  • (I.e. Requête XMLHttp : L'approche classique crée un objet XMLHttpRequest et lit responseText une fois la requête terminée.
  • (I.e. API Fetch : Le code moderne remplace XMLHttpRequest par la fonction fetch basée sur les promesses pour des requêtes plus propres et plus lisibles.
  • 🤖 Assistance IA : Les outils d'IA peuvent convertir l'ancien code XMLHttpRequest en fetch ou axios et aider à déboguer les requêtes Ajax défaillantes.
En savoir plus

PHP Ajax

Qu'est-ce qu'Ajax ?

AJAX signifie Asynchrone Javascénario XML est une technologie qui réduit les interactions entre le serveur et le client. Elle y parvient en mettant à jour uniquement une partie de la page web au lieu de la page entière. Les interactions asynchrones sont initiées par JavaScript. L'objectif d'AJAX est d'échanger de petites quantités de données avec le serveur sans rechargement de la page.

Javascénario est un langage de script côté client. Il est exécuté côté client par les navigateurs web qui le prennent en charge. JavaScénario. JavaLe code de script ne fonctionne que dans les navigateurs dotés JavaScript activé.

XML XML est l'acronyme de Extensible Markup Language (langage de balisage extensible). Il est utilisé pour encoder des messages dans des formats lisibles par l'homme et par la machine. Il est similaire à HTML, mais permet de créer ses propres balises personnalisées. Pour plus de détails sur XML, consultez l'article sur… XML.

Pourquoi utiliser AJAX ?

  • Il permet de développerping Des applications web riches et interactives, tout comme les applications de bureau.
  • La validation peut être effectuée pendant que l'utilisateur remplit un formulaire, sans le soumettre. Ceci est possible grâce à la saisie semi-automatique. Les mots saisis par l'utilisateur sont envoyés au serveur pour traitement, et le serveur renvoie des mots-clés correspondants.
  • Il peut être utilisé pour remplir une liste déroulante en fonction de la valeur d'une autre liste déroulante.
  • Les données peuvent être récupérées depuis le serveur et seule une partie de la page peut être mise à jour sans avoir à recharger la page entière. Ceci est particulièrement utile pour les sections de page web qui chargent des éléments tels que :
    • Tweets
    • Commentaires
    • Utilisateurs visitant le site et autres données en temps réel similaires.

Comment créer une application PHP Ajax

Nous allons créer une application simple qui permet aux utilisateurs de rechercher des frameworks PHP MVC populaires.

Notre application comportera une zone de texte où les utilisateurs saisiront les noms des frameworks.

Nous utiliserons ensuite AJAX pour rechercher une correspondance, puis nous afficherons le nom complet du framework juste en dessous du formulaire de recherche.

Étape 1) Création de la page d'index

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

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

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

ICI,

  • "onkeyup="showName(this.value)"" exécute le JavaLa fonction de script showName s'exécute à chaque fois qu'une touche est saisie dans la zone de texte. Cette fonctionnalité s'appelle la saisie semi-automatique.

Étape 2) Création de la page des frameworks

frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

ARTICLES LIÉS

Étape 3) Création du script JS

auto_complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

ICI,

  • La condition « if (str.length == 0) » vérifie la longueur de la chaîne. Si elle est égale à 0, le reste du script n'est pas exécuté.
  • « if (window.XMLHttpRequest)… » Les versions 5 et 6 d'Internet Explorer utilisent ActiveXObject pour l'implémentation AJAX. D'autres versions et navigateurs tels que Chrome et Firefox Utilisez XMLHttpRequest. Ce code garantit le bon fonctionnement de notre application sous Internet Explorer 5 et 6, ainsi que sous les navigateurs modernes.
  • « xmlhttp.onreadystatechange=function… » vérifie si l’interaction AJAX est terminée et si le statut est 200, puis met à jour la balise span txtName avec les résultats renvoyés.

Étape 4) Tester notre application PHP Ajax

En supposant que vous ayez enregistré le fichier index.php dans phptuts/ajax, accédez à URL http://localhost/phptuts/ajax/index.php

Test de notre application PHP Ajax

Saisissez la lettre C dans la zone de texte. Vous obtiendrez les résultats suivants.

Test de notre application PHP Ajax

L'exemple ci-dessus illustre le concept d'AJAX et comment il peut nous aider à créer des applications riches et interactives.

AJAX moderne avec l'API Fetch

L'objet XMLHttpRequest ci-dessus fonctionne toujours, mais sa version ActiveXObject pour les anciennes versions d'Internet Explorer n'est plus nécessaire. Les navigateurs modernes proposent l'API Fetch, basée sur les promesses, qui effectue la même requête avec beaucoup moins de code.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Cette version remplit la même fonction : elle envoie le texte saisi à frameworks.php et place la réponse dans l’élément span txtName. Elle utilise également encodeURIComponent pour échapper correctement l’entrée, et sa chaîne de promesses est facilement extensible avec une gestion des erreurs via un bloc catch.

FAQ

Une requête synchrone bloque le navigateur jusqu'à la réponse du serveur, figeant ainsi la page. Une requête asynchrone s'exécute en arrière-plan ; la page reste donc réactive et se met à jour dès réception des données. Ajax utilise le modèle asynchrone.

Avec `fetch`, transmettez un deuxième argument définissant la méthode de la requête POST et un corps, puis lisez `$_POST` en PHP. Avec `XMLHttpRequest`, appelez `open('POST', url)`, définissez l'en-tête `Content-Type` et envoyez les données encodées.

CORS (Cross-Origin Resource Sharing) bloque les requêtes du navigateur vers un domaine différent, sauf si le serveur envoie l'en-tête Access-Control-Allow-Origin approprié. Ajoutez cet en-tête côté PHP ou appelez une fonction de même origine. URL réparer.

Oui. Collez le code XMLHttpRequest, et l'IA peut le réécrire en utilisant l'API fetch basée sur les promesses ou axios, ajouter la gestion des erreurs et conserver le même comportement. Testez le résultat, car la gestion des réponses diffère légèrement.

Oui. Partagez le code de requête et la console du navigateur ou l'erreur réseau, et l'IA pourra détecter une erreur. URL, un blocage CORS, un paramètre manquant ou une erreur serveur, puis suggérez la solution à essayer.

Résumez cet article avec :