Qu'est-ce que l'Ajax?
La forme complète d' AJAX est JavaScript et XML asynchrone. C'est une technologie qui réduit les interactions entre le serveur et le client. Il le fait en ne mettant à jour qu'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 actualisation de la page.
JavaScript est un langage de script côté client. Il est exécuté côté client par les navigateurs Web qui prennent 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 encoder les messages dans des formats lisibles par l'homme et par la machine. C'est comme du 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é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 entré.
- 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 à partir du serveur et seule une certaine partie d'une page est mise à jour sans charger la page entière. Ceci est très utile pour les parties de page Web qui chargent des éléments tels que
- Tweets
- Commens
- 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 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
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
ICI,
-
«Onkeyup =" showName (this.value) "» exécute la fonction JavaScript showName chaque fois qu'une touche est saisie dans la zone de texte.
Cette fonction s'appelle la saisie semi-automatique
Étape 2) Création de la page des frameworks
frameworks.php
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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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érifie la longueur de la chaîne. S'il vaut 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, FireFox utilisent 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 de navigateurs.
- «Xmlhttp.onreadystatechange = function…» vérifie si l'interaction AJAX est terminée et que le statut est 200 puis met à jour l'étendue txtName avec les résultats renvoyés.
Étape 4) Test de notre application PHP Ajax
En supposant que vous ayez enregistré le fichier index.php Dans phututs / ajax, accédez à l'URL http: //localhost/phptuts/ajax/index.php
Tapez la lettre C dans la zone de texte Vous obtiendrez les résultats suivants.
L'exemple ci-dessus 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 JavaScript asynchrone 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 ne mettant à jour que des parties de la page Web.
- Internet Explorer version 5 et 6 utilise 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.