AJAX-ASP


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

Exemple AJAX ASP

L'exemple suivant montrera comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie :

Exemple

Commencez à saisir un nom dans le champ de saisie ci-dessous :

Suggestions :


Explication des exemples - page HTML

Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera 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="";
revenir ;
>
if (window.XMLHttpRequest)
{//code pour IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=nouveau XMLHttpRequest();
>
autre
{//code pour IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
>
xmlhttp.onreadystatechange=function()
{
si (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>Commencez à saisir un nom dans le champ de saisie ci-dessous :</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 zone de saisie est vide (str.length==0), cette fonction effacera le contenu de l'espace réservé txtHint et quittera la fonction.

Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes :

  • Créer un objet XMLHttpRequest

  • Créer une fonction exécutée lorsque la réponse du serveur est prête

  • Envoie une requête à un fichier sur le serveur

  • Veuillez noter le paramètre (q) ajouté à la fin de l'URL (y compris le contenu de la zone de saisie)

Fichier ASP

La page du serveur appelée ci-dessus via JavaScript est un fichier ASP nommé "getint.asp" .

Le code source dans "gethint.asp" vérifie le tableau de noms et renvoie le nom correspondant au navigateur :

<%
response.expires=-1
dim a(30)
'Remplissez 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)="Violet"
a(26)= " Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'obtenir le paramètre q à partir de l'URL
q=ucase(request.querystring("q"))

'rechercher 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 allusion="" alors
                                  Indice=a(i)
                          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
%>

Explication : Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), ceci se produit :

  1. Trouver des noms qui correspondent aux caractères envoyés par JavaScript

  2. Si aucune correspondance n'est trouvée, définissez la chaîne de réponse sur "aucune suggestion"

  3. Si un ou plusieurs noms correspondants sont trouvés, utilisez tous les noms Définir la chaîne de réponse

  4. Envoyer la réponse à l'espace réservé "txtHint"