Das Beispiel, das ich gegeben habe, ist eine Anwendung, bei der sich ein Firmenbenutzer registriert. Bei der Registrierung wird geprüft, ob der Benutzername und der Firmenname verfügbar sind. Die vorherige Methode bestand darin, eine Schaltfläche daneben hinzuzufügen, auf „Überprüfen“ zu klicken und eine Anfrage zu senden an den Server senden und dann warten ... der Server gibt Informationen zurück und setzt den Vorgang fort.
Wenn wir die AJAX-Technologie zum Implementieren der oben genannten Vorgänge verwenden, müssen wir nicht darauf warten, dass der Server Informationen zurückgibt. Wenn der Benutzer den Benutzernamen oder den Firmennamen eingibt und das Eingabetextfeld den Fokus verliert, wird automatisch eine Anfrage gesendet Der Server und der Benutzer führen weiterhin die folgenden Vorgänge aus. Es ist nicht erforderlich, auf „Überprüfen“ zu klicken oder darauf zu warten, dass der Server Informationen zurückgibt. Die Überprüfung und der Benutzervorgang erfolgen asynchron und können gleichzeitig ausgeführt werden. Wenn die Serverinformationen zurückgegeben werden, werden die zurückgegebenen Informationen automatisch an der entsprechenden Stelle auf der Seite angezeigt, ohne dass die Seite aktualisiert wird, was einem teilweisen Aktualisierungseffekt entspricht. Schauen wir uns den Code unten an.
Der vollständige Code der HTML-Seite lautet wie folgt:
Das Folgende ist ein zitiertes Fragment:
1＜ %@page language="java" contentType="text/html;charset=GBK"%＞
2＜script language="javascript" type="text/javascript">
3＜!--
4/**//**Ajax gestartet von Alpha 31.12.2005*/
5
6 var http = getHTTPObject();
7
8 Funktion handleHttpResponse(){
9 if(http.readyState == 4){
10 if(http.status == 200){
11 var xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }sonst{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
einundzwanzig }
22 sonst{
23 warning("Die von Ihnen angeforderte Seite ist abnormal, was sich auf das Durchsuchen der Informationen auf dieser Seite auswirken kann!");
24 Warnung(http.status);
25}
26}
27}
28
29 Funktion handleHttpResponse1(){
30 if(http.readyState == 4){
31 if(http.status == 200){
32 var xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }sonst{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
43 sonst{
44 warning("Die von Ihnen angeforderte Seite ist abnormal, was sich auf das Durchsuchen der Informationen auf dieser Seite auswirken kann!");
45 Warnung(http.status);
46 }
47 }
48 }
49
50 Funktion chkUser(){
51 var url = "/chkUserAndCom";
52 var name = 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 Rückkehr;
58 }
59 Funktion chkComNm(){
60 var url = "/chkUserAndCom";
61 var name = document.getElementById("comNm").value;
62 url += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.send(null);
66 Rückkehr;
67 }
68
69 // Diese Funktion kann das von uns benötigte XMLHttpRequest-Objekt erstellen
70 Funktion getHTTPObject(){
71 var xmlhttp = false;
72 if(window.XMLHttpRequest){
73 xmlhttp = new XMLHttpRequest();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
78 sonst{
79 versuchen{
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }catch(e){
82 versuchen{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }catch(E){
85 xmlhttp = false;
86}
87 }
88}
89 return xmlhttp;
90}
91/**//**Ajax endet*/
92
93//Erkennungsformular
94Funktion 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 = "Leider muss das Passwort aus englischen Buchstaben, Zahlen oder Unterstrichen bestehen und die Länge beträgt 5~20!";
102 }
103 sonst
104 {
105 document.getElementById("password").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110Funktion chkconfirmPassword()
111{
112 var m=document.form1;
113 if (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 = "Leider stimmt das Passwort nicht mit dem wiederholten Passwort überein!";
118 }
119 sonst
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126Funktions-Checkfield()
127{
128 var m=document.form1;
129 if(m.userName.value.length==0)
130 {
131 warning("Entschuldigung, der Benutzername muss aus englischen Buchstaben, Zahlen oder Unterstrichen bestehen und die Länge beträgt 5 bis 20.");
132 m.userName.focus();
133 return false;
134}
135 if(m.password.value.length==0)
136 {
137 warning("Leider muss das Passwort aus englischen Buchstaben, Zahlen oder Unterstrichen bestehen und die Länge beträgt 5 bis 20.");
138 m.password.focus();
139 return false;
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143 warning("Leider stimmt das Passwort nicht mit dem wiederholten Passwort überein!");
144 m.confirmPassword.focus();
145 return false;
146 }
147 if(m.comNm.value.length==0)
148 {
149 Alert("Der Firmenname darf leider nicht leer sein!!");
150 m.comNm.focus();
151 return false;
152 }
153 m.submit();
154}
155
156//-->
157＜/Skript＞
158＜body topmargin="0">
159＜form name="form1" method="post" action="/Control?act=Register"＞
160＜Tabellenbreite="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Ajax-Demoprogramm＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Unternehmensregistrierung durch Alpha＜/td＞＜/tr＞
163＜/Tisch＞
164
165＜HR＞
166 ＜table width="400" border="0" cellpadding="1" cellspacing="1" align="center" ＞
167 ＜tr＞
168 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
169 ＜td＞Benutzerkonto:＜/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="red"＞*＜/font＞＜/td＞
177 ＜td＞Firmenname:＜/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="red"＞*＜/font＞＜/td＞
186 ＜td＞Benutzerpasswort: ＜/td＞
187 ＜td＞＜input type="password" name="password" 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="red"＞*＜/font＞＜/td＞
193 ＜td＞Passwort bestätigen: ＜/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 ＜/Tisch＞
199
200
Verwenden Sie JavaScript, um die XmlHttpRequest-Klasse zu erstellen. Nach dem Senden einer HTTP-Anfrage an den Server besteht der nächste Schritt darin, zu entscheiden, was nach Erhalt der Antwort vom Server zu tun ist. Dazu muss dem HTTP-Anforderungsobjekt mitgeteilt werden, welche JavaScript-Funktion zur Verarbeitung der Antwort verwendet werden soll.
Sie können das Attribut onreadystatechange des Objektswie folgt auf den Namen der zu verwendenden JavaScript-Funktion setzen:
Erstellt nach onreadystatechange.Wir rufen request.open() auf – es öffnet den Socket-Kanal mit dem Server und verwendet dabei ein HTTP-Verb (GET oder POST) als ersten Parameter und die URL des Datenanbieters als zweiten Parameter. Der letzte Parameter von request.open() ist auf true gesetzt – er zeigt die asynchrone Natur der Anfrage an. Beachten Sie, dass die Anfrage noch nicht übermittelt wurde. Mit dem Aufruf von request.send() beginnt die Übermittlung – dadurch werden alle notwendigen Nutzdaten für den POST bereitgestellt. Bei der Verwendung asynchroner Anfragen müssen wir die Eigenschaft „request.onreadystatechanged“ verwenden, um die Rückruffunktion der Anfrage zuzuweisen. (Wenn die Anfrage synchron ist, sollten wir in der Lage sein, die Ergebnisse sofort nach dem Aufruf von request.send zu verarbeiten, aber wir können den Benutzer auch blockieren, bis die Anfrage abgeschlossen ist.)
Wenn Sie sich die URL des Datenanbieters ansehen, url = „/chkUserAndCom“, Das Servlet lautet wie folgt:
Das Folgende ist ein Referenzfragment:
1/**//*
2 * Erstellt am 31.12.2005
3*
4 * TODO Um die Vorlage für diese generierte Datei zu ändern, gehen Sie zu
5 * Fenster – Einstellungen – Java – Codestil – Codevorlagen
6*/
7Paket com.event;
8
9import javax.servlet.ServletException;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.beans.EBaseInfo;
14
15/** *//**
16 * @author Alpha 2005-12-31
17*
18 * ＜P＞Ajax-Demonstration ---Überprüfung des Unternehmensbenutzernamens und des Unternehmensnamens während der Unternehmensregistrierung＜/P＞
19*
20 * TODO Um die Vorlage für diesen generierten Typkommentar zu ändern, gehen Sie zu
21 * Fenster – Einstellungen – Java – Codestil – Codevorlagen
zweiundzwanzig */
23öffentliche Klasse CheckUserAndComNm {
24 private String msgStr = "";
25 protected void doGet(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
26 löst eine ServletException aus
27 {
28
29 EComBaseInfo info=new EComBaseInfo();
30 String oprate=request.getParameter("oprate")).trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("password");
33 String comName=request.getParameter("comName");
34
35 Versuche
36 {
37 if(oprate.equals("chkUser"))
38 {
39 Antwort.setContentType("text/html;charset=GB2312");
40 if(userName.length()<5||userName.length()>20)
41 {
42 msgStr = „Entschuldigung, der Benutzername muss aus Buchstaben, Zahlen oder Unterstrichen bestehen und die Länge beträgt 5–20 Zeichen!“;
43}
44 sonst
45 {
46 boolean bTmp=info.findUser(userName); //Überprüfen Sie, ob der Benutzername in der Datenbank vorhanden ist
47 if(bTmp)
48 msgStr = „Dieser Benutzername existiert leider bereits. Bitte ändern Sie den Benutzernamen, um ihn zu registrieren!“;
49 sonst
50 msgStr ="";
51 }
52 Antwort.getWriter().write(msgStr);
53}
54 else if(oprate.equals("chkCom"))
55 {
56 Antwort.setContentType("text/html;charset=GB2312");
57 if(comName.length()<6||comName.length()>100)
58 {
59 msgStr = „Der Firmenname ist leider 6–100 Zeichen lang (ohne Leerzeichen innerhalb der Zeichen)!“;
60 }
61 sonst
62 {
63 boolean bTmp=info.findCom(comName); //Überprüfen Sie, ob der Firmenname in der Datenbank vorhanden ist
64 if(bTmp)
65 msgStr = „Dieser Firmenname existiert leider bereits. Bitte ändern Sie den Firmennamen, um ihn zu registrieren!“;
66 sonst
67 msgStr ="";
68 }
69 Antwort.getWriter().write(msgStr);
70
71 }
72 }
73 Fang (Ausnahme ex)
74 {
75 }
76 endlich
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 protected void doPost(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
83 löst eine ServletException aus
84 {
85 doGet(Anfrage,Antwort);
86}
87}
88
Zusammenfassung der AJAX-Technologie
1. AJAX (Asynchronous JavaScript and XML) ist eine Programmiertechnologie, die Java-Technologie, XML und JavaScript kombiniert. Sie ermöglicht die Erstellung von Webanwendungen auf Basis der Java-Technologie und bricht mit der Konvention, Seiten neu zu laden.
2. AJAX, Asynchronous JavaScript and XML, ist eine Methode zur Entwicklung von Webanwendungen, die clientseitige Skripts verwendet, um Daten mit dem Webserver auszutauschen. Auf diese Weise kann die Webseite dynamisch aktualisiert werden, ohne den Interaktionsprozess zu unterbrechen und erneut zu bearbeiten. Mit AJAX können Sie eine direkte, hochverfügbare, umfangreichere und dynamischere Web-Benutzeroberfläche erstellen, die nativen Desktop-Anwendungen nahe kommt.
3. Für Mozilla.Netscape, Safari, Firefox und andere Browser lautet die Methode zum Erstellen von XmlHttpRequest wie folgt:
Xmlhttp_request=
new XmlHttpRequest();
4. IE und andere Browser zum Erstellen von XmlHttpRequest wie folgt:
ActiveXObject("Microsoft.XmlHTTP") 5. Xmlhttp_request.open(
'GET', URL, true); Xmlhttp_request.send(null);
Gemäß der HTTP-Spezifikation wird dieser Parameter groß geschrieben; andernfalls können einige Browser (z. B. Firefox) die Anfrage möglicherweise nicht verarbeiten. Der zweite Parameter ist die URL der angeforderten Seite. Der dritte Parameter legt fest, ob sich die Anfrage im asynchronen Modus befindet. Bei TRUE setzt die JavaScript-Funktion die Ausführung fort, ohne auf eine Antwort vom Server zu warten. Dies ist das „A“ in „AJAX“.
Wenn die AJAX-Technologie gut genutzt wird, wird sie unseren Webseiten viele benutzerfreundliche Effekte verleihen und den Benutzern ein besseres Gefühl vermitteln. AJAX ist eine gute Sache.