ASP AJAX
AJAX consiste à mettre à jour des parties d'une page Web, sans recharger la page entière.
Qu'est-ce qu'AJAX ?
AJAX = JavaScript et XML asynchrones.
AJAX est une technique de création de pages Web rapides et dynamiques.
AJAX permet aux pages Web d'être mises à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web, sans recharger toute la page.
Les pages Web classiques (qui n'utilisent pas AJAX) doivent recharger la page entière si le contenu devait changer.
Exemples d'applications utilisant AJAX : onglets Google Maps, Gmail, Youtube et Facebook.
Comment fonctionne AJAX
AJAX est basé sur les normes Internet
AJAX est basé sur les normes Internet et utilise une combinaison de :
- Objet XMLHttpRequest (pour échanger des données de manière asynchrone avec un serveur)
- JavaScript/DOM (pour afficher/interagir avec les informations)
- CSS (pour styliser les données)
- XML (souvent utilisé comme format de transfert de données)
Les applications AJAX sont indépendantes du navigateur et de la plate-forme !
Google suggère
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.
Commencez à utiliser AJAX dès aujourd'hui
Dans notre tutoriel ASP, nous montrerons comment AJAX peut mettre à jour des parties d'une page Web, sans recharger la page entière. Le script serveur sera écrit en ASP.
Si vous voulez en savoir plus sur AJAX, visitez notre tutoriel AJAX .
Exemple d'ASP AJAX
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 :
Exemple
Start typing a name in the input field below:
Suggestions:
Exemple expliqué
Dans l'exemple ci-dessus, lorsqu'un utilisateur saisit un caractère dans le champ de saisie, une fonction appelée "showHint()" est exécutée.
La fonction est déclenchée par l'événement onkeyup.
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 (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.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>
Explication du code :
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.
Toutefois, si le champ de saisie n'est pas vide, procédez comme suit :
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyez la demande vers un fichier ASP (gethint.asp) sur le serveur
- Notez que le paramètre q est ajouté gethint.asp?q="+str
- La variable str contient le contenu du champ de saisie
Le fichier ASP - "gethint.asp"
Le fichier ASP vérifie un tableau de noms et renvoie le ou les noms correspondants au 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
%>
AJAX peut être utilisé pour une communication interactive avec une base de données.
Exemple de base de données AJAX
L'exemple suivant montre comment une page Web peut récupérer des informations à partir d'une base de données avec AJAX :
Exemple
Exemple expliqué - La page HTML
Lorsqu'un utilisateur sélectionne un client dans la liste déroulante ci-dessus, une fonction appelée "showCustomer()" est exécutée. La fonction est déclenchée par l'événement "onchange":
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
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 (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
Explication du code source :
Si aucun client n'est sélectionné (str.length==0), la fonction efface le contenu de l'espace réservé txtHint et quitte la fonction.
Si un client est sélectionné, la fonction showCustomer() exécute ce qui suit :
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyer la demande vers un fichier sur le serveur
- Notez qu'un paramètre (q) est ajouté à l'URL (avec le contenu de la liste déroulante)
Le fichier ASP
La page sur le serveur appelée par le JavaScript ci-dessus est un fichier ASP appelé "getcustomer.asp".
Le code source de "getcustomer.asp" exécute une requête sur une base de données et renvoie le résultat dans un tableau HTML :
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>