Bedarfsgesteuerte Validierung mit XHR

Die Idee ist, den Benutzernamen/das Kennwort zu überprüfen, sobald der Benutzer die Daten in das Eingabefeld des Browsers eingibt. Die folgenden Codeschnipsel zeigen, wie Sie dies mit dem XMLHttpRequest(XHR)-Objekt tun können. Die XHR (oder so genannte AJAX) hilft Ihnen dabei, ohne dass die Webseite neu geladen werden muss, nachdem Sie auf den Server zugegriffen haben. Nun, Sie können dazu bekannte JavaScript-Bibliotheken wie Prototype, dwr oder Dojo verwenden. Die Verwendung dieser Bibliotheken verringert auch die Größe des Codes. Aber... wenn Sie wissen möchten, wie dies wirklich mit XHR direkt gemacht wird, dann lesen Sie weiter... :-)

Wir möchten etwas Ähnliches wie das unten gezeigte Bild machen:

Beteiligte Schritte:

1. Erstellen Sie die UI-Webseite mit den Formulareingaben darin.
2. Schreiben Sie einen jsp/servlet/asp oder einen beliebigen serverseitigen Code, der nach der Überprüfung des eingegebenen Benutzernamens eine XML-Antwort zurücksenden kann
3. Schreiben Sie XHR-basierten Javascript-Code auf der UI-Webseite, um den Server durch Übergabe des Benutzernamens aufzurufen, und zeigen Sie dann die Serverantwort an.

Die Quelldateien mit dem Javascript-Code, der Beispiel-HTML-Seite und dem JSP können Sie über diesen Link herunterladen . Lassen Sie uns sehen, wie es geht...

1. Das Erstellen einer Webseite mit einem Formular-Eingabefeld ist ziemlich einfach, lassen Sie es uns überspringen.
2. Serverseitiger Code zum Prüfen und Senden einer XML-Antwort. (Der serverseitige Code übernimmt den eingegebenen Benutzernamen aus der XHR, gleicht den Namen mit der Datenbank ab und sendet eine XML-Antwort zurück. Die XML-Antwort für einen gültigen Benutzernamen sieht wie folgt aus [xml]True [/xml] und die XML-Antwort für einen ungültigen Benutzernamen wird wie folgt aussehen [xml] False [/xml]
3. Der Javascript-Code, der die XHR-Objekte initialisiert, die serverseitige Seite mit dem Benutzernamen als inputQueryString aufruft, die Antwort liest und diese dann auf der Webseite anzeigt, wird unten gezeigt. (Dieses Skript wird sowohl für die Anmeldeseite als auch für die Registrierungsseite wiederverwendet) [js] 1 // Diese beiden globalen Variablen helfen bei der Wiederverwendung der Funktion validateUsername_XHR 2 var errMsg1 = " ^{*Benutzername}existiert nicht." 3 var errMsg2 = " ^*Usernamealready taken, try another." 4 5 // Initialisieren Sie das onChange-Ereignis der Eingabefelder, um das XHR-Objekt für die Verarbeitung der Validierungslogik aufzurufen. 6 // Sehen Sie sich an, wie single call_validate und validateUsername_XHR für die Überprüfung der Überprüfung des Benutzernamens bei der Anmeldung und Registrierung verwendet wurde. 7 setInit = function(benutzername_login, benutzername_reg) { 8 username_login.onchange = function(event) { 9 callValidate(username_login.value, errMsg1, "False", "login_msg"); 10 }; 11 username_reg.onchange = function(event) { 12 callValidate(username_reg.value, errMsg2, "True", "reg_msg"); 13 }; 14 } 15 16 // Diese separate Aufruffunktion ist nützlich, um animierte Verarbeitungsbilder bei XHR-Aufrufen anzuzeigen. 17 // Wenn Sie wissen möchten, wie Sie ein 'verarbeitendes' Gif-Bild anzeigen können, lesen Sie meinen Blog-Beitrag hier 18 // Dies kann auch als Precheck-Funktion verwendet werden, um zu entscheiden, ob Sie XHR aufrufen oder nicht. 19 function callValidate(username, errMsg, status, err_msg_id) { 20 if (Benutzername != "") 21 if (benutzername.length > 0) { 22 document.getElementById(err_msg_id).innerHTML = " Prüfen...."; 23 validateUsername_XHR(username, errMsg, status, err_msg_id); 24 } 25 } 26 27 // Ruft das XHR-Objekt ab, lädt und parst das XML aus dem Antwortobjekt 28 // status=False prüft, ob der Benutzername zum Zwecke der Anmeldung existiert oder nicht 29 // status=True prüft, ob der Benutzername für eine neue Registrierung gültig ist 30 //Setzt die Fehlermeldung abhängig vom Status 31 function validateUsername_XHR(username, errMsg, status, err_msg_id) 32 { 33 var XHRObject = getXHRObject(); 34 var url = "usernamevalidation_ajax.jsp?username=" + username; 35 XHRObject.open("POST", url, true); 36 //readystate wird 4 sein, wenn die Webseite vollständig geladen ist. 37 XHRObject.onreadystatechange = function() { 38 if (XHRObject.readyState == 4 && XHRObject.responseText) { 39 if (XHRObject.responseText.charAt(0) == "<") { 40 try { 41 //parsen Sie das Antwort-Xml-Dom und ermitteln Sie den Wert des Knotens "username" 42 //es wäre klüger, auch das Fehlerattribut zu überprüfen. 43 var response = XHRObject.responseXML.getElementsByTagName("username")[0].firstChild.nodeValue; 44 if (response == status) document.getElementById(err_msg_id).innerHTML = errMsg; 45 else document.getElementById(err_msg_id).innerHTML = ""; 46 } 47 catch(e) { 48 document.getElementById(err_msg_id).innerHTML = ""; 49 } 50 } 51 sonst { 52 eval(XHRObject.responseText) 53 } 54 } 55 } 56 ; 57 XHRObject.send(null); 58 } 59 60 //Holen Sie den XMLHttpRequest von einem browserspezifischen Objekt. 61 function getXHRObject() { 62 var XHRobj = null; 63 versuchen { 64 //Ältere IE's 65 XHRObj = new ActiveXObject("Msxml2.XMLHTTP") 66 } catch(e) { 67 versuchen { 68 //Neue IE's 69 XHRObj = new ActiveXObject("Microsoft.XMLHTTP") 70 } catch(oc) { 71 XHRObj = null 72 } 73 } 74 if (!XHRObj && typeof XMLHttpRequest != "undefined") { 75 //Mozila/Safari 76 XHRObj = new XMLHttpRequest() 77 } 78 return XHRObj; 79 } 80 81 [/js]

Anmerkung:

• Die Antwort des Servers kann auch Text oder XHTML sein. Es hängt alles davon ab, wie genau Sie die Antwort mit Hilfe von Javascript analysieren wollen.
• Wenn Sie Anfänger sind und diese Rich-Internet-Anwendungen (AJAX) nutzen möchten, dann sollten Sie mit ausgereiften Javascript-Bibliotheken wie DWR/DOJO/Prototype/TIBCO UI usw. beginnen. Diese Bibliotheken haben bereits eine Menge Funktionen für Sie eingebaut.