Tutoriel de base AJAX

Exemple AJAX PHP

Dans ce chapitre, nous allons démontrer comment envoyer une requête AJAX à un fichier PHP et comment récupérer le contenu du fichier PHP.

Exemple AJAX PHP1

Le prochain exemple montre comment le site web communique avec le serveur et récupère le contenu du fichier PHP :

Exécuter le code

Explication de l'exemple :

Dans l'exemple ci-dessus, l'événement fetchDoc() exécute une fonction onclick.

Voici le code HTML :

　　<button type="button" onclick="fetchDoc()">Fetch Content</button>
　　<div id="output"></div>
　　
　　<script>
　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_time.php", true);
　　httpRequest.send();
　　}
　　</script>

Voici le code PHP (ajax_time.php) :

　　<?php
　　echo date("d/m/Y, h:i:s A");
　　?>

Exemple AJAX PHP2

Le prochain exemple montre comment le site web communique avec le serveur web lorsque l'utilisateur tape des caractères dans le champ de saisie :

Débuter l'entrée du pays dans le champ de saisie suivant/Nom de la région :

Pays :

Avis et suggestions :

Exécuter le code

Explication de l'exemple :

Dans l'exemple ci-dessus, lorsque l'utilisateur tape des caractères dans le champ de saisie, l'événement showHint() exécute la fonction onkeyup.

Voici le code HTML :

　　<!DOCTYPE html>
　　<html>
　　
　　<div>
　　<p>Débuter l'entrée du pays dans le champ de saisie suivant/Nom de la région :/p>
　　<p>Pays: <input type="text" onkeyup="showHint(this.value)"></p>
　　<p>Conseil: <span id="result"></span></p>
　　</div>
　　
　　<script>
　　var elem = document.getElementById("result");
　　function showHint(name) {
　　if (name.length === 0) {}}
　　　elem.innerHTML = "";
　　　return;
　　} else {
　　　var httpRequest = new XMLHttpRequest();
　　　httpRequest.onreadystatechange = function() {
　　　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　elem.innerHTML = this.responseText;
　　　　　}
　　　};
　　　httpRequest.open("GET", "ajax_hint.php?q="　+　name, true);
　　　httpRequest.send();
　　}
　　}
　　</script>
　　
　　
　　</html>

Ceci est le code PHP (ajax_hint.php) :

　　<?php
　　
　　//　Tableau des noms de pays
　　$countries = array("Afghanistan", "Albanie", "Algérie", "Samoa américaine", "Andorre",...);
　　//　Obtient le paramètre q de l'URL
　　$q = $_REQUEST["q"];
　　
　　$hint = "";
　　
　　//　Si $q est différent des suggestions de l'array, itère sur toutes les suggestions de l'array ""
　　if ($q !== "") {
　　　　$q = strtolower($q);
　　　　$len = strlen($q);
　　　　foreach($countries as $name) {
　　　　if (stristr($q, substr($name, 0, $len))) {
　　　　　　if ($hint === "") {
　　　　　　　　$hint = $name;
　　　　　　} else {
　　　　　　　　$hint .= ", $name";
　　　　　　}
　　　　}
　　　　}
　　}
　　
　　//Si aucune suggestion n'est trouvée ou si la valeur correcte est affichée, "no suggestion" est renvoyé
　　echo $hint === "" ? "no suggestion" : $hint;
　　
　　?>

Pour une liste complète des noms de pays, voirhttps://gist.github.com/DHS/1340150

Réponse AJAX