Tutoriel PHP Ajax avec exemple

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

Qu'est-ce qu'Ajax ?

AJAX le formulaire complet est asynchrone Javascénario & XML. Il s'agit d'une technologie qui réduit les interactions entre le serveur et le client. Elle y parvient en mettant à jour uniquement une partie d'une page Web plutôt que la page entière. Les interactions asynchrones sont initiées par JavaScript. Le but d'AJAX est d'échanger de petites quantités de données avec le serveur sans actualiser la page.

Javascénario est un langage de script côté client. Il est exécuté côté client par les navigateurs Web prenant en charge JavaScénario.JavaLe code de script ne fonctionne que dans les navigateurs dotés JavaScript 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 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 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 en fonction de la valeur d'une autre liste déroulante
  • 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 une zone de texte dans laquelle 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 le JavaLa fonction de script affiche le nom à chaque fois qu'une touche est saisie dans la zone de texte. 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;

?>

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,

  • "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. 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 ayez enregistré le fichier index.php dans phututs/ajax, accédez à URL http://localhost/phptuts/ajax/index.php

Test de notre application PHP Ajax

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

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 Asynchrone Javascénario 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, Operaet Safari utilise XMLHttpRequest.

Résumez cet article avec :