AJAX ASP/PHP
AJAX est utilisé pour créer des applications plus dynamiques.
Exemple AJAX ASP/PHP
L'exemple suivant vous montrera comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie : Veuillez saisir les lettres (A à Z) dans la zone de saisie ci-dessous :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>Exécuter l'instance»
Cliquez le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Analyse d'instance - fonction showHint()
Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, il exécutera la fonction "showHint()". Cette fonction est déclenchée par l'événement "onkeyup" :
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code pour IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint"). innerHTML= xmlhttp.responseText;
jpg >}
Analyse du code source :
Si la zone de saisie est vide (str.length==0), cette fonction efface le contenu de l'espace réservé txtHint et quitte la fonction.
Si la zone de saisie n'est pas vide, la fonction showHint() effectue les tâches suivantes :
Crée un objet XMLHttpRequest
Quand le serveur Exécute la fonction lorsque la réponse est prête
Envoye la requête au fichier sur le serveur
Notez que nous avons ajouté un paramètre q à l'URL (avec Contenu de la zone de saisie)
Page Serveur AJAX - ASP et PHP
La page serveur appelée par le JavaScript ci-dessus est un fichier ASP nommé "gethint. asp".
Ci-dessous, nous créons deux versions du fichier serveur, l'une écrite en ASP et l'autre en PHP.
Le code source dans le fichier ASP
"gethint.asp" vérifie un tableau de noms et renvoie le nom correspondant au navigateur :
response.expires=-1
dim a(30)
'Remplir le tableau avec des noms
a(1)="Anna"
a (2)="Bretagne"
a(3)="Cendrillon"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona "
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a( 11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophélie"
a(15)="Pétunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20 )="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violette"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29) ="Wenche"
a(30)="Vicky"
'récupère le paramètre q à partir de l'URL
q=ucase(request.querystring("q"))
'recherche tous les indices du tableau si la longueur de q>0
if len(q)>0 alors
indice=""
pour i=1 à 30
si q=ucase(mid(a(i),1,len(q))) alors
si indice="" alors
indice=a(i)
d'autre
indice=indice & " , " & a(i)
terminer si
terminer si
suivant
end if
'Aucune suggestion" si aucun indice n'a été trouvé
'ou affiche les valeurs correctes
if hunt="" then
réponse.write("aucune suggestion")
else
réponse.write(hint)
end if
%>
// Remplir le tableau avec des noms
$a[]="Anna";
$a[]="Brittany";
$a[]="Cendrillon";$a[] ="Diana";
$a[]="Eva";$a[]=" Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda" ;
$a[]="Nina";
$a[]="Ophélie";
$a[]="Pétunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a []="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[] ="Wenche";
$a[]="Vicky";
//obtenir le paramètre q à partir de l'URL
$q=$_GET["q"];
//recherche tous les indices du tableau si la longueur de q>0
if (strlen($q) > 0)
{
$indice="";
pour($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
si ($hint=="")
{
$indice=$a[$i];
>
d'autre
{
$indice=$indice." , ".$a[$i];
>
>
>
>
// Définir la sortie sur "aucune suggestion" si aucun indice n'a été trouvé
// ou sur les valeurs correctes
if ($hint == "")
{
$response="aucune suggestion";
>
autre
{
$response=$indice;
>
//afficher la réponse
echo $response;
?>
