L'exemple que j'ai donné est une application lorsqu'un utilisateur d'entreprise s'inscrit. Lorsque l'utilisateur s'inscrit, il vérifie si le nom d'utilisateur et le nom de l'entreprise sont disponibles. La méthode précédente consistait à ajouter un bouton à côté, à cliquer sur "Vérifier", à envoyer une demande. au serveur, puis attendez... le serveur renvoie des informations et continue l'opération.
Si nous utilisons la technologie AJAX pour mettre en œuvre les opérations ci-dessus, nous n'avons pas besoin d'attendre que le serveur renvoie des informations. Lorsque l'utilisateur saisit le nom d'utilisateur ou le nom de l'entreprise, lorsque la zone de texte de saisie perd le focus, une demande sera automatiquement envoyée à. le serveur et l'utilisateur continuera à effectuer les opérations suivantes, il n'est pas nécessaire de cliquer sur "Vérifier" ou d'attendre que le serveur renvoie des informations. La vérification et l'opération utilisateur sont asynchrones et peuvent être effectuées en même temps. Lorsque les informations du serveur sont renvoyées, les informations renvoyées seront automatiquement affichées à l'emplacement correspondant sur la page sans actualiser la page, ce qui équivaut à un effet de rafraîchissement partiel. Regardons le code ci-dessous.
Le code complet de la page HTML est le suivant :
Ce qui suit est un fragment cité :
1＜ %@page language="java" contentType="text/html;charset=GBK"%＞
2＜langage de script="javascript" type="text/javascript">
3＜!--
4/**//**Ajax lancé par Alpha 2005-12-31*/
5
6 var http = getHTTPObject();
7
8 fonctions handleHttpResponse(){
9 si(http.readyState == 4){
10 si(http.status == 200){
11 var xmlDocument = http.responseXML ;
12 si(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }autrement{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
vingt-et-un }
22 autres{
23 alert("La page que vous avez demandée est anormale, ce qui peut affecter votre navigation dans les informations de cette page !");
24 alerte(http.status);
25}
26}
27}
28
29 fonction handleHttpResponse1(){
30 si(http.readyState == 4){
31 si(http.status == 200){
32 var xmlDocument = http.responseXML ;
33 si(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }autrement{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
43 autres{
44 alert("La page que vous avez demandée est anormale, ce qui peut affecter votre navigation dans les informations de cette page !");
45 alerte (http.status);
46 }
47 }
48 }
49
50 fonction chkUser(){
51 var url = "/chkUserAndCom";
52 var nom = document.getElementById("userName").value;
53 url += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.send(null);
57 retour ;
58 }
59 fonction chkComNm(){
60 var url = "/chkUserAndCom";
61 var nom = document.getElementById("comNm").value;
62 url += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.envoyer(nul);
66 retour ;
67 }
68
69 //Cette fonction peut créer l'objet XMLHttpRequest dont nous avons besoin
70 fonction getHTTPObject(){
71 var xmlhttp = faux ;
72 si(window.XMLHttpRequest){
73 xmlhttp = nouveau XMLHttpRequest();
74 si(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
78 autres{
79 essais{
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }attraper(e){
82 essais{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }attraper(E){
85 xmlhttp = faux ;
86}
87 }
88}
89 renvoie xmlhttp ;
90}
91/**//**Fin de l'Ajax*/
92
93//Formulaire de détection
94fonction chkpassword()
95{
96 var m=document.form1;
97 if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("password").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "Désolé, le mot de passe doit être composé de lettres anglaises, de chiffres ou de traits de soulignement, et sa longueur est comprise entre 5 et 20 !";
102 }
103 d'autre
104 {
105 document.getElementById("password").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110fonction chkconfirmPassword()
111{
112 var m=document.form1;
113 si (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "Désolé, le mot de passe est incohérent avec le mot de passe répété !";
118 }
119 autres
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126champ de contrôle de fonction()
127{
128 var m=document.form1;
129 si(m.userName.value.length==0)
130 {
131 alert("Désolé, le nom d'utilisateur doit être composé de lettres anglaises, de chiffres ou de traits de soulignement, et sa longueur est comprise entre 5 et 20.");
132 m.userName.focus();
133 renvoie faux ;
134}
135 si(m.password.value.length==0)
136 {
137 alert("Désolé, le mot de passe doit être composé de lettres, de chiffres ou de traits de soulignement anglais, et sa longueur est de 5 à 20.");
138 m.password.focus();
139 renvoie faux ;
140 }
141 si (m.password.value != m.confirmPassword.value)
142 {
143 alert("Désolé, le mot de passe est incohérent avec le mot de passe répété !");
144 m.confirmPassword.focus();
145 renvoie faux ;
146 }
147 si(m.comNm.value.length==0)
148 {
149 alert("Désolé, le nom de l'entreprise ne peut pas être vide !!");
150 m.comNm.focus();
151 renvoie faux ;
152 }
153 m.submit();
154}
155
156//-->
157＜/script＞
158＜corps topmargin="0">
159＜nom du formulaire="form1" méthode="post" action="/Control?act=Register"＞
160＜largeur du tableau="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Programme de démonstration Ajax＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Enregistrement d'entreprise par Alpha＜/td＞＜/tr＞
163＜/tableau＞
164
165＜HR＞
166 ＜table width="400" border="0" cellpadding="1" cellpacing="1" align="center" ＞
167 ＜tr＞
168 ＜td＞＜font color="rouge"＞*＜/font＞＜/td＞
169 ＜td＞Compte utilisateur :＜/td＞
170 ＜td＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173 ＜/td＞
174 ＜/tr＞
175 ＜tr＞
176 ＜td＞＜font color="rouge"＞*＜/font＞＜/td＞
177 ＜td＞Nom de la société :＜/td＞
178＜td＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/td＞
183 ＜/tr＞
184 ＜tr＞
185 ＜td＞＜font color="rouge"＞*＜/font＞＜/td＞
186 ＜td＞Mot de passe utilisateur : ＜/td＞
187 ＜td＞＜input type="mot de passe" name="mot de passe" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189 ＜/td＞
190 ＜/tr＞
191 ＜tr＞
192 ＜td＞＜font color="rouge"＞*＜/font＞＜/td＞
193 ＜td＞Confirmer le mot de passe : ＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/tableau＞
199
200
Utilisez JavaScript pour créer la classe XmlHttpRequest Après avoir envoyé une requête HTTP au serveur, l'étape suivante consiste à décider ce qui doit être fait après avoir reçu la réponse du serveur. Cela nécessite d'indiquer à l'objet de requête HTTP quelle fonction JavaScript utiliser pour gérer la réponse.
Vous pouvez définir l'attribut onreadystatechange de l'objet sur lenom de la fonction JavaScript
à utiliser, comme suit :
Créé après onreadystatechange.Nous appelons request.open() - il ouvre le canal socket avec le serveur, en utilisant un verbe HTTP (GET ou POST) comme premier paramètre et l'URL du fournisseur de données comme deuxième paramètre. Le dernier paramètre de request.open() est défini sur true - il indique la nature asynchrone de la requête. Notez que la demande n’a pas encore été soumise. Avec l'appel à request.send(), la soumission commence - cela fournit toute charge utile nécessaire pour le POST. Lors de l'utilisation de requêtes asynchrones, nous devons utiliser la propriété request.onreadystatechanged pour attribuer la fonction de rappel de la requête. (Si la requête est synchrone, nous devrions pouvoir traiter les résultats immédiatement après avoir appelé request.send, mais nous pouvons également bloquer l'utilisateur jusqu'à ce que la requête soit terminée.)
En regardant l'URL du fournisseur de données, url = "/chkUserAndCom" , la servlet est la suivante :
Ce qui suit est un fragment de référence :
1/**//*
2 * Créé le 31/12/2005
3*
4 * TODO Pour modifier le modèle de ce fichier généré, allez sur
5 * Fenêtre - Préférences - Java - Style de code - Modèles de code
6*/
7package com.event ;
8
9importer javax.servlet.ServletException ;
10importer javax.servlet.http.HttpServletRequest;
11importer javax.servlet.http.HttpServletResponse ;
12
13importer com.beans.EBaseInfo;
14
15/** *//**
16 * @auteur Alpha 2005-12-31
17*
18 * ＜P＞Démonstration Ajax --- Vérification du nom d'utilisateur et du nom de l'entreprise lors de l'enregistrement de l'entreprise＜/P＞
19*
20 * TODO Pour modifier le modèle de ce commentaire de type généré, accédez à
21 * Fenêtre - Préférences - Java - Style de code - Modèles de code
vingt-deux */
23classe publique CheckUserAndComNm {
24 chaîne privée msgStr = "";
25 protected void doGet (demande HttpServletRequest, réponse HttpServletResponse)
26 lance ServletException
27 {
28
29 EComBaseInfo info=nouveau EComBaseInfo();
30 String oprate=request.getParameter("oprate").trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("mot de passe");
33 String comName=request.getParameter("comName");
34
35 essais
36 {
37 si(oprate.equals("chkUser"))
38 {
39 réponse.setContentType("text/html;charset=GB2312");
40 si(nomutilisateur.length()<5||nomutilisateur.longueur()>20)
41 {
42 msgStr = "Désolé, le nom d'utilisateur doit être composé de lettres, de chiffres ou de traits de soulignement, et sa longueur est de 5 à 20 caractères !";
43}
44 autres
45 {
46 boolean bTmp=info.findUser(userName); //Vérifie si le nom d'utilisateur existe dans la base de données
47 si(bTmp)
48 msgStr = "Désolé, ce nom d'utilisateur existe déjà, veuillez modifier le nom d'utilisateur pour vous inscrire !";
49 autres
50 msgStr ="";
51 }
52 réponse.getWriter().write(msgStr);
53}
54 sinon if(oprate.equals("chkCom"))
55 {
56 réponse.setContentType("text/html;charset=GB2312");
57 si(comName.length()<6||comName.length()>100)
58 {
59 msgStr = "Désolé, le nom de l'entreprise comporte entre 6 et 100 caractères (hors espaces entre les caractères)!";
60 }
61 autres
62 {
63 boolean bTmp=info.findCom(comName); //Vérifie si le nom de l'entreprise existe dans la base de données
64 si(bTmp)
65 msgStr = "Désolé, ce nom de société existe déjà, veuillez modifier le nom de la société pour vous inscrire !";
66 autres
67 msgStr="";
68 }
69 réponse.getWriter().write(msgStr);
70
71 }
72 }
73 captures (Exception ex)
74 {
75 }
76 enfin
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 protected void doPost (demande HttpServletRequest, réponse HttpServletResponse)
83 lance ServletException
84 {
85 doGet(demande,réponse);
86}
87}
88
Résumé de la technologie AJAX
1. AJAX (JavaScript asynchrone et XML) est une technologie de programmation qui combine la technologie Java, XML et JavaScript. Elle vous permet de créer des applications Web basées sur la technologie Java et brise la convention d'utilisation du rechargement de page.
2. AJAX, Asynchronous JavaScript and Xml, est une méthode de développement d'applications Web qui utilise des scripts côté client pour échanger des données avec le serveur Web. De cette manière, la page Web peut être mise à jour dynamiquement sans interrompre le processus d'interaction ni le rééditer. Grâce à AJAX, vous pouvez créer une interface utilisateur Web directe, hautement disponible, plus riche et plus dynamique, proche des applications de bureau natives.
3. Pour Mozilla.Netscape, Safari, Firefox et d'autres navigateurs, la méthode pour créer XmlHttpRequest est la suivante :
Xmlhttp_request=
new XmlHttpRequest();
4. IE et autres navigateurs pour créer XmlHttpRequest comme suit :
ActiveXObject("Microsoft.XmlHTTP") ;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. Le premier paramètre de open() est la méthode de requête HTTP - GET, POST ou quelle que soit la méthode prise en charge par votre serveur. Selon la spécification HTTP, ce paramètre est en majuscule ; sinon, certains navigateurs (comme Firefox) pourraient ne pas être en mesure de traiter la requête. Le deuxième paramètre est l'URL de la page demandée. Le troisième paramètre définit si la requête est en mode asynchrone. Si VRAI, la fonction JavaScript poursuivra son exécution sans attendre une réponse du serveur. C'est le "A" dans "AJAX".
Si la technologie AJAX est bien utilisée, elle ajoutera de nombreux effets conviviaux à nos pages Web et donnera aux utilisateurs une meilleure sensation. AJAX est une bonne chose.