Tutoriel PHP Ajax avec exemple

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;

?>

É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

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

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