Tutoriel PHP Ajax avec exemple

Qu'est-ce qu'Ajax ?

AJAX la forme complète est Asynchonnête JavaScript & XML. C'est une technologie qui réduit les interactions entre le serveur et le client. Pour ce faire, il met à jour uniquement une partie d'une page Web plutôt que la page entière.syncLes interactions chronologiques sont initiées par JavaScript. Le but d'AJAX est d'échanger de petites quantités de données avec le serveur sans actualisation de page.

JavaScript est un langage de script côté client. Il est exécuté côté client par les navigateurs Web prenant en charge JavaScript. Le code JavaScript ne fonctionne que dans les navigateurs sur lesquels JavaScript est activé.

XML est l'acronyme de Extensible Markup Language. Il est utilisé pour coder des messages dans des formats lisibles par l'homme et par la machine. C'est comme HTML mais vous permet de créer vos balises personnalisées. Pour plus details sur XML, voir l'article sur XML

Pourquoi utiliser AJAX ?

  • Il permet de développer des applications Web interactives riches, tout comme les applications de bureau.
  • La validation peut être effectuée lorsque l'utilisateur remplit un formulaire sans le soumettre. Ceci peut être réalisé en utilisant la saisie semi-automatique. Les mots saisis par l'utilisateur sont soumis au serveur pour traitement. Le serveur répond avec des mots-clés qui correspondent à ce que l'utilisateur a saisi.
  • Il peut être utilisé pour remplir une liste déroulante box en fonction de la valeur d'une autre liste déroulante box
  • Les données peuvent être récupérées du serveur et seule une certaine partie d'une page mise à jour sans charger la page entière. Ceci est très utile pour les parties de pages Web qui chargent des éléments tels que
  • Tweets
  • Commentaires
  • Utilisateurs visitant le site, etc.

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 aura un texte box que les utilisateurs saisiront les noms du framework.

Nous utiliserons ensuite mvc AJAX pour rechercher une correspondance puis 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 la fonction JavaScript showName chaque fois qu'une clé est saisie dans le textebox.Cette fonctionnalité est appelée 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,

  • "if (str.length == 0)" vérifiez la longueur de la chaîne. S'il vaut 0, alors 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, FireFox utilisez XMLHttpRequest. Ce code garantira que notre application fonctionne à la fois dans IE 5 et 6 et dans d'autres versions élevées d'IE et des navigateurs.
  • « xmlhttp.onreadystatechange=function… » vérifie si l'interaction AJAX est terminée et si l'état est 200, puis met à jour l'étendue txtName avec les résultats renvoyés.

Étape 4) Tester notre application PHP Ajax

En supposant que vous avez enregistré le fichier index.php Dans phututs/ajax, accédez à l'URL http://localhost/phptuts/ajax/index.php

Test de notre application PHP Ajax

Tapez la lettre C dans le texte box Vous obtiendrez le suiviwing résultats.

Test de notre application PHP Ajax

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

Résumé

  • AJAX est l'acronyme de Asynchonnête JavaScript et XML
  • AJAX est une technologie utilisée pour créer des applications d'interaction riches qui réduisent les interactions entre le client et le serveur en mettant à jour uniquement certaines parties de la page Web.
  • Internet Explorer versions 5 et 6 utilisent ActiveXObject pour implémenter les opérations AJAX.
  • Internet Explorer version 7 et supérieure et les navigateurs Chrome, Firefox, Opera et Safari utilisent XMLHttpRequest.