Derniers tutoriels de développement web
 

AJAX ASP Exemple


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


AJAX ASP Exemple

L'exemple suivant montrera comment une page Web peut communiquer avec un serveur Web tandis qu'un des caractères de type d'utilisateur dans un champ de saisie:

Exemple

Start typing a name in the input field below:

First name:

Suggestions:



Exemple Explained

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 le onkeyup événement.

Voici le code HTML:

Exemple

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        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>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Essayez - le vous - même »

Code de l'explication:

Tout d' abord, vérifier si le champ de saisie est vide (str.length == 0) . Si elle est, effacer le contenu du txtHint espace réservé et quitter la fonction.

Toutefois, si le champ de saisie ne soit pas vide, procédez comme suit:

  • Créer un XMLHttpRequest objet
  • Créer la fonction à exécuter lorsque la réponse du serveur est prêt
  • Envoyer la demande hors d'un fichier ASP (gethint.asp) sur le serveur
  • Notez que q paramètre est ajouté gethint.asp?q="+str
  • La variable str maintient le contenu du champ d'entrée

Le fichier ASP - "gethint.asp"

Le fichier ASP vérifie un tableau de noms, et renvoie le correspondant name(s) dans le navigateur:

<%
response.expires=-1
dim a(30)
'Fill up array with names
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"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>