Ajax (asynchronousjavascriptandxml) asynchrones Javascript und XML.
Es dient dazu, die Mängel des Modells „Anfrage senden – auf Antwort warten“ in herkömmlichen Webanwendungen zu beheben (Nach dem Senden der Anfrage kann der Browser nur auf die Antwort des Servers warten. Der Benutzer kann keine anderen Vorgänge ausführen. Nachdem der Browser die gesendet hat Die Anforderung gibt die gesamte Seite auf und wartet darauf, dass der Server eine neue Seite zurückgibt. Mit anderen Worten, die Datenmenge, die zwischen dem Browser und dem Server interagiert, ist sehr groß und die Daten können nicht bei Bedarf abgerufen werden ist: Über ein im Browser integriertes Objekt (XmlHttpRequest) wird asynchron eine Anfrage an den Server gesendet.
Das sogenannte Asynchron bedeutet, dass der Browser nicht die gesamte Seite verlässt, dh er sendet keine Daten über die Formularübermittlung an den Server. Nachdem der Server die Anforderung verarbeitet hat, gibt er die Daten an das XmlHttpRequest-Objekt zurück im XmlHttpRequest kann über Javascript abgerufen werden. Verwenden Sie diese Daten dann, um die Seite zu aktualisieren. Während des gesamten Vorgangs muss der Benutzer nicht auf eine Antwort vom Server warten.
Beschreibung: Asynchrone Übertragungstechnologie von Webseiten. Eine Methode zur Kommunikation mit dem Server, ohne die gesamte Seite zu aktualisieren. Während er auf die Übertragung der Webseite wartet, kann der Benutzer weiterhin mit dem System interagieren und die Seite kann den Inhalt aktualisieren, ohne sie zu aktualisieren Eine angemessene Nutzung kann dazu führen, dass es sich für Benutzer besser und bequemer anfühlt, aber missbrauchen Sie es nicht
Synchron und asynchron
Unter Synchronisierung versteht man die Kommunikationsmethode, bei der der Sender Daten sendet und darauf wartet, dass der Empfänger eine Antwort zurücksendet, bevor er das nächste Datenpaket sendet.
Beispiel: Synchronisierung: Anfrage senden -> auf Serververarbeitung warten -> nach Verarbeitung zurückkehren. Asynchron bedeutet: Nachdem der Absender die Daten gesendet hat, wartet er nicht darauf, dass der Empfänger sie zurücksendet Antwort und sendet dann das nächste Datenpaket
Beispiel: Asynchron: Die Anfrage wird durch ein Ereignis ausgelöst -> vom Server verarbeitet (der Browser kann zu diesem Zeitpunkt noch andere Dinge tun) -> verarbeitet
Wichtiges Objekt von AjaxXMLHttpRequest
Wichtiges Javascript-Objekt, über das Anfragen an den Server gestellt werden können. Wenn mehrere Anfragen gestellt werden sollen, sind mehrere XHR-Objekte erforderlich. Das Ergebnis der Anfrage wird durch eine vordefinierte Methode verarbeitet.
So erstellen Sie ein XmlHttpRequest-Objekt
Funktion getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((typeof XMLHttpRequest) != 'undefiniert') {
//Nicht-IE-Browser
xmlHttpRequest = new XMLHttpRequest();
}anders {
//dh Browser
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return xmlHttpRequest;
}
oder
Funktion createXmlHttpRequest(){
var xmlHttpRequest = null;
if(window.ActiveXObject){
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
}
Wichtige Eigenschaften des xmlHttpRequest-Objekts.
ResponseXml: Ruft die XML-Daten der Serverantwort ab
Status: Rufen Sie den vom Server zurückgegebenen Statuscode ab (z. B. 200).
readyState: Ruft den Status der Kommunikation zwischen xmlHttpRequest und dem Server ab (0, 1, 2, 3, 4, die jeweils unterschiedliche Zustände beschreiben).
(Nicht initialisiert): Das Objekt wurde erstellt, aber nicht initialisiert (die Open-Methode wurde noch nicht aufgerufen).
(Initialisierung): Das Objekt wurde erstellt und die Sendemethode wurde noch nicht aufgerufen.
(Daten senden): Die Sendemethode wurde aufgerufen, aber der aktuelle Status und der HTTP-Header sind unbekannt
(Datenübertragung läuft): Teildaten wurden akzeptiert.
(Ende der Antwort): Zu diesem Zeitpunkt können Daten über ResponseText/ResponseXml abgerufen werden.
Ein Anwendungsbeispiel, das von einer Person implementiert wurde, die Ajax verwendet
System-Screenshot
Systembeschreibung:
Systemstrukturdiagramm
Zeigen Sie die Startseite register.jsp an
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<title>Benutzerregistrierung</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</head>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table bordercolor="gray" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">Benutzerregistrierung</font>
<font color="gray">[Modulbeschreibung: Überprüfung des Benutzernamens, Nutzungsbedingungen für asynchrone Ajax-Verarbeitung, Generierung des Bestätigungscodeservers]</font>
</td>
</tr>
<tr>
<td align="right">
Benutzername:
</td>
<td>
<input type="text" name="username" id="username" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * Der Benutzername besteht aus Buchstaben, Zahlen und Unterstrichen.</span>
</td>
</tr>
<tr>
<td align="right">
Passwort:
</td>
<td>
<input type="password" name="password" id="password">
<span style="color:orange" id="pwdMsg" > * Die Länge des Passworts beträgt 6-8 Zeichen. Aus Sicherheitsgründen sollten eindeutige Formate vermieden werden.</span>
</td>
</tr>
<tr>
<td align="right">
Passwort bestätigen:
</td>
<td>
<input type="password" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * Bestätigen Sie das Passwort, um sicherzustellen, dass Sie beim Festlegen des Passworts keinen Fehler gemacht haben</span>
</td>
</tr>
<tr>
<td align="right">
E-Mail:
</td>
<td>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * Geben Sie Ihre übliche E-Mail-Adresse ein, damit wir Sie kontaktieren können.</span>
</td>
</tr>
<tr>
<td align="right">
Bestätigungscode:
</td>
<td>
<input type="text" id="checkcode">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Bestätigungscode-->
<a href="javascript:;" onclick="getCheckcode()">Kann nicht klar sehen, ändern Sie ein anderes</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td align="right">
Nutzungsbedingungen:
</td>
<td>
<textarea rows="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input type="submit" value="AGBs zustimmen und registrieren"/>
</td>
</tr>
</table>
<div align="center">
Copyright (c) 2013 Su Ruonian ( <a href="mailto:[email protected]">Kontaktieren Sie uns:[email protected]</a> )
Alle Rechte vorbehalten.
</div>
</form>
</body>
</html>
/*
Erstellen Sie eine Methode, um das xmlHttpRequest-Objekt abzurufen
*/
Funktion getXmlHttpRequest(){
var xmlHttpRequest = null;
if((typeof XMLHttpRequest) != 'undefiniert'){
/*Nicht-IE-Browser erstellen XMLHttpRequest-Objekte*/
xmlHttpRequest = new XMLHttpRequest();
}anders{
/*IE-Browser erstellt XMLHttpRequest-Objekt*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return xmlHttpRequest;
}
/*
Antwortereignis für den Bestätigungscode
*/
Funktion getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "checkcode.do";
codeimage.src=addTimestamp(url);
}
/*
Nutzung von Ajax, um Nutzungsbedingungen zu erhalten
*/
Funktion getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
// Lösen Sie das chinesische Codierungsproblem beim Senden im Get-Modus. Verwenden Sie encodeURI(url).true, um anzugeben, dass die Anforderung asynchron gesendet wird, und addTimestamp(url) verhindert das Browser-Caching.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}anders{
//Systemfehler.
item.value="Systemfehler";
}
}anders{
//Überprüfung der Anzeige...
item.value="loading...";
}
};
xmlHttpRequest.send(null);
}
/*
Verwenden Sie zur Überprüfung die get-Methode
*/
Funktion getValidate(){
var username = document.getElementById("username");
var url = "validatename.do?username=" + username.value;
// Lösen Sie das chinesische Codierungsproblem beim Senden im Get-Modus. Verwenden Sie encodeURI(url).true, um anzugeben, dass die Anforderung asynchron gesendet wird, und addTimestamp(url) verhindert das Browser-Caching.
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
// Rufen Sie die Methode auf, um den Rückgabestatus zu überprüfen
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.send(null);
}
/*
Verwenden Sie zur Überprüfung die Post-Methode
*/
Funktion postValidate(){
var username = document.getElementById("username");
var url = "validatename.do";
// true bedeutet, dass zum Senden der Anforderung eine asynchrone Methode verwendet wird. Der Standardwert ist true und die Anforderungsmethode kann get, post, put, delete sein
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=callback;
// Wenn mehrere Parameter vorhanden sind, verwenden Sie das &-Symbol, um Schlüssel-Wert-Paare zu verknüpfen, und Escape wird zur Lösung chinesischer Probleme verwendet
xmlHttpRequest.send('username=' + escape(username.value));
}
/*
Methode zur Rückgabe des Überwachungsstatus
*/
Funktionsrückruf(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}anders{
//Systemfehler.
innerHtmlMsg("error");
}
}anders{
//Überprüfung der Anzeige...
innerHtmlMsg("checking");
}
}
/*
Fügen Sie einen Zeitstempel hinzu, um das Browser-Caching zu verhindern. Beim Browser-Caching wird nur die Get-Methode zwischengespeichert.
*/
Funktion addTimestamp(url){
if(url.indexOf("?")!=-1){
//Wenn Parameter vorhanden sind
return url+"×tamp=" + new Date().valueOf();
}anders{
//keine Parameter
return url+"?timestamp=" + new Date().valueOf();
}
}
Funktion innerHtmlMsg(message){
var checkMsg = document.getElementById("checkMsg");
if(message=='exists'){
//Benutzername existiert
checkMsg.innerHTML= "<font color='red'>* Der Benutzername existiert leider bereits.</font>";
}
if(message=='noexists'){
//Benutzername kann verwendet werden
checkMsg.innerHTML= "<font color='green'>* Herzlichen Glückwunsch, der Benutzername ist verfügbar.</font>";
}
if(message=='checking'){
//Systemprüfung
checkMsg.innerHTML= "<font color='#0099aa'>* Das System prüft Daten...</font>";
}
if(message=='error'){
//Systemfehler
checkMsg.innerHTML= "<font color='red'>Systemfehler, bitte überprüfen Sie das Netzwerk oder <a href='#'>Kontaktieren Sie uns</a></font>";
}
}
} /* Definieren Sie die Gesamtbreite und den Rahmenstil der Tabelle sowie den Stil des gesamten Textes in der Tabelle */
.links{
Schriftstärke:500;
Farbe:#708899;
padding-right:20px;
Hintergrundfarbe: #D6ECF5;
}
.inpt {
border:solid #92CEDB 1px;
Breite: 210px;
Höhe: 22px;
Rand links: 10px;
}
.rghts{
margin-top:20px;
Farbe:#708899;
Schriftgröße:12px;
}
<Servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<init-param>
<param-name>Regeldateipfad</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</servlet>
<Servlet-Mapping>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<Willkommensdateiliste>
<welcome-file>regist.jsp</welcome-file>
</welcome-file-list>
</web-app>
java.awt.Color importieren;
java.awt.Font importieren;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.HashMap;
java.util.Map importieren;
import java.util.Random;
/**
*
* @Version: 1.1
*
* @Autor: Su Ruonian<a href="mailto:[email protected]">E-Mail senden</a>
*
* @since: 1.0 Erstellungszeit: 20.01.2013 16:26:52 Uhr
*
* @Funktion: TODO
*
*/
öffentliche Klasse CheckCodeImageUtil {
private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
„7“, „8“, „9“, „A“, „B“, „C“, „D“, „E“, „F“, „G“, „H“, „I“ };
private static final int SIZE = 4; //Die Anzahl der Zeichen im Bestätigungscode
private static final int LINES = 4; //Anzahl der Interferenzleitungen
private static final int WIDTH = 110; //Bestätigungscode-Bildbreite
private static final int HEIGHT = 40; //Bestätigungscode-Bildhöhe
private static final int FONT_SIZE = 21; //Schriftgröße im Bestätigungscode
/**
* Verifizierungscode generieren
*
* @return Map<Wert des Bestätigungscodes, Bild des Bestätigungscodes>
*
*/
öffentliche statische Map<String,BufferedImage> creatCheckImage(){
//Speichern Sie die Zeichenfolge, die den wahren Wert des Bestätigungscodes generiert
StringBuffer buffer = new StringBuffer();
//Benutzerdefiniertes Bildobjekt
BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
Grafik Graphics = image.getGraphics();
Graphics.setColor(Color.WHITE);
Graphics.fillRect(0, 0, WIDTH, HEIGHT);
Zufällig random = new Random();
//Zufällige Zeichen zeichnen
for(int i=0; i<SIZE; i++){
//Ein Element aus dem definierten Zeichensatz abrufen
int rand = random.nextInt(chars.length);
Graphics.setColor(randomColor());
Graphics.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
Graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); //Speichern Sie die generierte Zeichenfolge im Puffer und vergleichen Sie sie mit dem vom Benutzer eingegebenen Wert, wenn Sie sie in Zukunft erhalten.
}
//Interferenzlinien zeichnen
for(int i=1;i<=LINES;i++){
Graphics.setColor(randomColor());
Graphics.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
if(i==LINES){
Graphics.setFont(new Font(null,Font.ITALIC,13));
Graphics.setColor(Color.GRAY);
Graphics.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), image);
Rückkehrkarte;
}
/**
* Farbe wird sofort generiert
* @zurückkehren
*/
öffentliche statische Farbe randomColor(){
Zufällig random = new Random();
Farbe color = new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256));
Farbe zurückgeben;
}
}
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
java.io.File importieren;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
java.util.List importieren;
java.util.Map importieren;
java.util.Vector importieren;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
import com.sun.imageio.plugins.common.ImageUtil;
import com.webapp.util.CheckCodeImageUtil;
öffentliche Klasse UserServlet erweitert HttpServlet {
private List<String> userList;
privater String txtFilePath = null;
public void init() löst eine ServletException { aus
txtFilePath = this.getInitParameter("rulesfilepath");
//Datenbank simulieren
userList = new Vector<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
public void doGet(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
wirft ServletException, IOException {
doPost(Anfrage, Antwort);
}
public void doPost(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
wirft ServletException, IOException {
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
Response.setContentType("text/html;charset=utf-8");
versuchen {
Thread.sleep(3000);
} Catch (InterruptedException e) {
e.printStackTrace();
}
//Simulationssystem generiert Ausnahmetest
/*if(1==2){
throw new ServletException("some error");
}*/
String username = request.getParameter("username");
System.out.println("Benutzername:" + Benutzername);
//Benutzerdatenabfrage simulieren
boolean exist = userList.contains(username);
if(exist){
Response.getWriter().print("exists");
}anders{
Response.getWriter().print("noexists");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
Response.setContentType("text/html;charset=utf-8");
String filePath = this.getServletContext().getRealPath(txtFilePath);
Datei file = new File(filePath);
StringBuffer buffer = new StringBuffer();
versuchen {
BufferedReader reader = new BufferedReader(new FileReader(file));
String tmp = "";
while((tmp = reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
reader.close();
} Catch (Ausnahme e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
Response.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
Response.setContentType("image/jpeg");
Map<String, BufferedImage> map = CheckCodeImageUtil.creatCheckImage();
String key = (String)map.keySet().iterator().next();
request.getSession().setAttribute("code",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
BufferedImage image = map.get(key);
ImageIO.write(image, "jpeg", Response.getOutputStream());
}
}
}