Nouveaux attributs de formulaire et input
AJAX est une technologie qui permet la mise à jour de certaines parties d'une page web, sans avoir à recharger la page entière.
AJAX est une technologie qui permet la mise à jour de certaines parties d'une page web, sans avoir à recharger la page entière.
Qu'est-ce qu'AJAX ?
Dans notre tutoriel PHP, nous allons démontrer comment AJAX peut mettre à jour des parties d'une page Web, sans recharger la page entière. Le script du serveur sera écrit en PHP
AJAX = Asynchronous JavaScript and XML.
AJAX est une technique permettant de créer des pages Web rapides et dynamiques.
AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant de petites quantités de données avec le serveur en coulisse. Cela signifie qu'il est possible de mettre à jour certaines parties d'une page web sans recharger la page entière.
Les pages web classiques (qui n'utilisent pas AJAX) doivent être rechargées tout entière si le contenu est modifié.
Exemples d'applications utilisant AJAX : Google Maps, Gmail, Youtube et les onglets de Facebook.
AJAX est basé sur les normes Internet
AJAX est basé sur les normes Internet et il utilise une combinaison de :
• l'objet XMLHttpRequest qui permet d’échanger des données de manière asynchrone avec un serveur
• JavaScript et DOM pour afficher et interagir avec les informations
• CSS pour styliser les données
• XML qui est souvent utilisé comme format de transfert des données.
Les applications AJAX sont indépendantes du navigateur et de la plate-forme !
AJAX a été rendu populaire en 2005 par Google, avec Google Suggest.
Google Suggest utilise AJAX pour créer une interface web très dynamique : Lorsque vous commencez à taper dans le champ de recherche de Google, un JavaScript envoie les lettres à un serveur et le serveur renvoie une liste de suggestions.
Dans notre tutoriel PHP, nous allons démontrer comment AJAX peut mettre à jour des parties d'une page Web, sans recharger la page entière. Le script du serveur sera écrit en PHP.
Si vous souhaitez en savoir plus sur AJAX, consultez notre tutoriel AJAX.
AJAX est utilisé pour créer des applications plus interactives.
L'exemple suivant montre comment une page Web peut communiquer avec un serveur Web pendant qu'un utilisateur tape des caractères dans un champ de saisie : L'exemple expliqué
Dans l'exemple ci-dessus, lorsqu'un utilisateur tape un caractère dans le champ de saisie, une fonction appelée "showHint()" est exécutée. Cette fonction est déclenchée par l'événement onkeyup.
Voici le code HTML :
Exemple : Copier le code
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{// pour IE5 et IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("texte").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","obteniIndice.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3> Commencez à taper un nom d'animal dans le champ de saisie suivant:
</h3>
<form action="">
Nom de l'animal recherché: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="texte"></span></p>
</body>
</html>
Tout d'abord, vérifiez si le champ de saisie est vide (str.length == 0). Si c'est le cas, effacez le contenu de l'espace réservé txtHint et quittez la fonction.
Cependant, si le champ de saisie n'est pas vide, procédez comme suit :
Créez un objet XMLHttpRequest.
Créez la fonction qui sera exécutée lorsque la réponse du serveur sera prête.
Envoyez la requête à un fichier PHP (obteniIndice.php) sur le serveur.
Remarquez que le paramètre q est ajouté à l'url (obteniIndice.php?q="+str)
Et la variable str contient le contenu du champ de saisie.
Le fichier PHP - " obteniIndice.php"
Le fichier PHP vérifie un tableau de noms d'animaux , et renvoie le ou les noms correspondants au navigateur :
voici le code du fichier " obteniIndice.php"
Exemple : Copier le code
<?php
// Tableau avec des noms d'animaux
$a[]="Addax";$a[]="Abeille";$a[]="Agouti";$a[]="Âne de Somalie";$a[]="Antilope cheval";$a[]="Antilope d'Amérique";$a[]="Anoa";$a[]="Argali";$a[]="Aye-aye";
$a[]="Baleine à bosse";$a[]="Belette";$a[]="Bélouga";$a[]="Bison d'Amérique";$a[]="Blaireau";$a[]="Bouquetin des Alpes";$a[]="Buffle";
$a[]="Cabiai";$a[]="Cachalot";$a[]="Campagnol";$a[]="Capucin";$a[]="Capybara";$a[]="Caracal";$a[]="Carcajou";$a[]="Caribou";$a[]="Castor";$a[]="Cerf de Virginie";$a[]="Chacal";$a[]="Chacal doré";$a[]="Chameau de Bactriane";$a[]="Chamois";$a[]="Chat pêcheur";$a[]="Chaus";$a[]="Chauve-souris brune";$a[]="Chauve-souris vampire";$a[]="Cheval de Przewalskii";$a[]="Chèvre";$a[]="Chien des prairies";$a[]="Chien viverrin";$a[]="Chimpanzé";$a[]="Chinchilla";$a[]="Coati";$a[]="Coendu";$a[]="Condylure";$a[]="Couguar";$a[]="Couscous";$a[]="Coyote";$a[]="Cynoptère";
$a[]="Daim";$a[]="Daman";$a[]="Dauphin commun";$a[]="Dauphin de Gill";$a[]="Dauphin du Gange";$a[]="Dendrolague";$a[]="Dhole";$a[]="Diable de Tasmanie";$a[]="Dingo";
$a[]="échidné";$a[]="écureuil gris";$a[]="écureuil géant de l'Inde";$a[]="écureuil noir";$a[]="écureuil roux";$a[]="éléphant d'Afrique";$a[]="éléphant d'Asie";$a[]="éléphant de mer";
$a[]="Fausse orque";$a[]="Fennec";$a[]="Fossa";$a[]="Furet";
$a[]="Gautre à poches";$a[]="Gazelle";$a[]="Gelada";$a[]="Genette";$a[]="Gerbille";$a[]="Gerenuk";$a[]="Gibbon";$a[]="Girafe";$a[]="Gnou";$a[]="Goral";$a[]="Gorille";$a[]="Grizzli";$a[]="Guanaco";$a[]="Guépard";
$a[]="Hamster";$a[]="Hamster doré";$a[]="Hélogale";$a[]="Hérisson";$a[]="Hermine";$a[]="Hétérocéphale";$a[]="Hippopotame amphibie";$a[]="Hippopotam nain";$a[]="Hippotrague noir";$a[]="Hydropote";$a[]="Hyène";$a[]="Hyène rayée";
$a[]="Indri";
$a[]="Jaguar";$a[]="Jaguarondi";
$a[]="Kangourou gris";$a[]="Kangourou roux";$a[]="Kinkajou";$a[]="Koala";
$a[]="Lama";$a[]="Lamantin";$a[]="Lapin des volcans";$a[]="Lémur";$a[]="Lémur Vari";$a[]="Léopard des neiges";$a[]="Lièvre d'Amérique";$a[]="Lièvre sauteur";$a[]="Lion";$a[]="Loir";$a[]="Loris grêle";$a[]="Loup à crinière";$a[]="Loup commun";$a[]="Loup d'Abyssinie";$a[]="Loup de Tasmanie";$a[]="Loup roux";$a[]="Loutre";$a[]="Loutre des rivières";$a[]="Lycaon";$a[]="Lynx";
$a[]="Macaque";$a[]="Macroscélidé";$a[]="Mandrill";$a[]="Mangouste";$a[]="Mara";$a[]="Marguay";$a[]="Markhor";$a[]="Marmotte";$a[]="Marmotte commune";$a[]="Marmotte de Vancouver";$a[]="Marsouin";$a[]="Martre";$a[]="Microcèbe";$a[]="Morse";$a[]="Moufette";$a[]="Mouflon d'Amérique";$a[]="Mouton";$a[]="Mulot sylvestre";$a[]="Muntjac";$a[]="Musaraigne aquatique";$a[]="Muscardin";
$a[]="Nandinie";$a[]="Narval";$a[]="Nasique";$a[]="Nilgau";$a[]="Noctule commune";
$a[]="Ocelot";$a[]="Okapi";$a[]="Oncille";$a[]="Opossum";$a[]="Orang-Outan";$a[]="Oreillard roux";$a[]="Orignal";$a[]="Ornithorynque";$a[]="Orque";$a[]="Oryctérope";$a[]="Oryx";$a[]="Otarie";$a[]="Otocyon";$a[]="Oreotrague";$a[]="Ouistiti argenté";$a[]="Ouistiti pygmée";$a[]="Ourebi";$a[]="Ours brun";$a[]="Ours lippu";$a[]="Ours malais";$a[]="Ours polaire";
$a[]="Panda géant";$a[]="Pangolin";$a[]="Panthère";$a[]="Paresseux";$a[]="Pécari";$a[]="Petit panda";$a[]="Phacochère";$a[]="Phalanger pygmé";$a[]="Phalanger volant";$a[]="Phoque";$a[]="Phoque commun";$a[]="Phoque du Groenland";$a[]="Pika";$a[]="Pinche";$a[]="Pipistrelle";$a[]="Polatouche";$a[]="Porc";$a[]="Porc-épic";$a[]="Porte-musc";$a[]="Pronghorn";$a[]="Propithèque de Verreaux";$a[]="Protèle";$a[]="Puma";
$a[]="Ragondin";$a[]="Rat des moissons";$a[]="Rat kangourou";$a[]="Rat musqué";$a[]="Rat surmulot";$a[]="Raton laveur";$a[]="Renard arctique";$a[]="Renard gris";$a[]="Renard roux";$a[]="Rhinocéros blanc";$a[]="Rhinocéros de l'Inde";$a[]="Rorqual";$a[]="Roussette";
$a[]="Saimiri";$a[]="Sajou";$a[]="Sanglier";$a[]="Senex de Centurio";$a[]="Serval";$a[]="Singe à gorge blanche";$a[]="Singe écureuil";$a[]="Singe hurleur";$a[]="Sitatunga";$a[]="Solénodonte";$a[]="Souffleur";$a[]="Suricate";
$a[]="Tamarin";$a[]="Tamanoir";$a[]="Tamia de Sibérie";$a[]="Tamia rayé";$a[]="Tanrec";$a[]="Tapir";$a[]="Tarsier";$a[]="Tarsier occidental";$a[]="Tatou";$a[]="Taupe";$a[]="Tigre";$a[]="Tigre blanc";$a[]="Tigre de Sibérie";
$a[]="Viscache";
$a[]="Wallaby";$a[]="Wombat";
$a[]="Xérus";
$a[]="Yack";$a[]="Zèbre";$a[]="Zébu";$a[]="Zibeline";$a[]="Zorille";
//ajout de paramétre q à l'URL
$q=$_GET["q"];
//affichage de tout si q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
//affichage si q=0
if ($hint == "")
{
$response="pas de seggestion";
}
else
{
$response=$hint;
}
//La response
echo $response;
?>
|
Cours precedent: Exemple AJAX PHP |
Sommaire de : Le langage JavaScript |
Cours suivant: ajax base de données |