ASP - AJAX et ASP

AJAX est utilisé pour créer des applications plus dynamiques.

Exemple AJAX ASP

L'exemple suivant montre comment le site web communique avec le serveur lorsque l'utilisateur tape des caractères dans la zone de saisie :

Exemple

Veuillez saisir des lettres (A - Z) dans la zone de saisie ci-dessous :

Nom :

Conseil :

Essayez le code source vous-même

Explication de l'exemple - Page HTML

Lorsque l'utilisateur tape des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" est exécutée. Cette fonction est déclenchée par l'événement "onkeyup":

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// Code pour IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
sinon
  {// 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;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Entrez des caractères anglais dans la boîte de saisie, s'il vous plaît :</b></p>
<form>
Prénom: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Explication du code source :

Si la boîte de saisie est vide (str.length==0), la fonction videra le contenu du placeholder txtHint et sortira de la fonction.

Si la boîte de saisie n'est pas vide, showHint() exécutera les étapes suivantes :

  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter lorsque la réponse du serveur est prête
  • Envoyer une requête au fichier sur le serveur
  • Veuillez noter les paramètres ajoutés à la fin de l'URL (q) (contenant le contenu de la boîte de saisie)

Fichier ASP

Cette page de serveur appelée par JavaScript s'appelle le fichier ASP "gethint.asp".

"Le code source de gethint.asp vérifie l'array de noms, puis renvoie le nom correspondant au navigateur :"

<%
response.expires=-1
dim a(30)
'Remplir le tableau avec des noms
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
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)="Ophelia"
a(15)="Petunia"
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)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'Obtenez le paramètre q à partir de l'URL
q=ucase(request.querystring("q"))
'Si la longueur q>0, recherchez toutes les suggestions dans le tableau
si len(q)>0 alors
  hint=""
  pour i=1 à 30
    si q=ucase(mid(a(i),1,len(q))) alors
      si hint="" alors
        hint=a(i)
      sinon
        hint=hint & " , " & a(i)
      fin si
    fin si
  next
fin si
'Si aucune suggestion n'est trouvée, affichez "no suggestion"
'ou affichez les valeurs correctes
si hint="" alors
  response.write("no suggestion")
sinon
  response.write(hint)
fin si
%>

Explication du code source :

Si JavaScript envoie tout texte (c'est-à-dire que strlen($q) est supérieur à 0), cela se produira :

  • Rechercher les noms correspondant aux caractères provenant de JavaScript
  • Si aucune correspondance n'est trouvée, configurer la chaîne de réponse à "no suggestion"
  • Si l'on trouve un ou plusieurs noms correspondants, configurer la chaîne de réponse avec tous les noms
  • Envoyer la réponse à la zone de remplacement "txtHint"