AJAX zur Implementierung einer einfachen Echtzeit-Validierungsfunktion

Was ist AJAX?

Ajax ist "Asynchronous Javascript And XML" (asynchrone JavaScript und XML), eine Art von Webseiten-Entwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

Ajax = Asynchrone JavaScript und XML (eine Untergruppe des Standardgenerischen Markup-Languages)

Ajax ist eine Technologie zur Erstellung schneller dynamischer Webseiten.

Ajax ist eine Technologie, die es ermöglicht, Teile der Webseiten zu aktualisieren, ohne dass die gesamte Webseite neu geladen werden muss.

　Durch geringfügige Datenübertragungen im Hintergrund mit dem Server kann Ajax die Webseiten-Asynchronität ermöglichen. Dies bedeutet, dass bestimmte Bereiche der Webseite aktualisiert werden können, ohne dass die gesamte Webseite neu geladen werden muss.

Traditionelle Webseiten (ohne Ajax) müssen die gesamte Webseiten-Seite neu laden, wenn sie Inhalte aktualisieren müssen.

Das ist die Definition von Baidu, ausreichend detailliert.
　Ein zusätzlicher Punkt, der erwähnt werden sollte, ist das Verständnis von Asynchronität, Asynchronität ist im Vergleich zu Synchronität, hier beziehen sie sich auf den Interaktionsmodus zwischen Server und Browser.

　Synchron, nach dem Absenden jeder Anfrage wird die Benutzeraktion blockiert, es muss verlangt werden, dass nach der Rückmeldung fortgefahren wird. Asynchron bedeutet, dass nach dem Absenden der Anfrage der Benutzer nicht auf die Antwort warten muss, alles wird von Ajax verwaltet, ohne dass eine Aktualisierung der gesamten Webseite erforderlich ist, um Daten lokal zu aktualisieren. Dies verbessert die KommunikationsEffizienz beider Seiten.

Ein kleines Demo

Machen Sie ein Demo für ein Formular ohne Neuladen zu machen, geben Sie den Benutzernamen im Dialog ein, führen Sie die Überprüfung im Hintergrund durch, verwenden Sie Ajax-Technologie.

Projektstruktur, mithilfe von Maven aufgebaut

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>login</title>
</head>
<body>

Willkommen beim Login：

    Benutzername：<input type="text" name="username" id="username" onchange="CallServer()"/>
    <!-- Zeigen Sie eine Hinweisinformation an -->
    <div id="msg"></div>
    <!-- Fügen Sie JavaScript in der jsp-Seite auf dem Weg der absoluten Adresse hinzu -->
    <script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>

main.js

alert("use ajax!")
//Erstellen Sie ein XMLHttpRequest-Objekt, in verschiedenen Browsern
function createXMLHTTP() {
  if(window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  } else {
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
function CallServer() {
  var username = document.getElementById("username").value;
  // 判断为空
  if ((username == null) || (username == "")) return;
  var xmlhttp = createXMLHTTP();
  // 构建请求url
  var url = "/loginServlet"+"?"+"username="+username;
  //状态码改变调用事件
  xmlhttp.onreadystatechange = function () {
    //正常返回，替换msg内容
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById("msg").innerHTML = xmlhttp.responseText;
    }
  }
  //异步提交请求
  xmlhttp.open("GET",url,true);
  //发送请求
  xmlhttp.send();
}

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
 <display-name>Archetype Created Web Application</display-name>
 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
  <servlet-name>loginServlet</servlet-name>
  <servlet-class>com.lbw.servlet.loginServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>loginServlet</servlet-name>
  <url-pattern>/loginServlet</url-pattern>
 </servlet-mapping>
</web-app>

loginServlet.java

package com.lbw.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * 后端使用Servlet处理请求
 */
public class loginServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //设置编码和响应头
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/xml;charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    //获取参数
    String username = request.getParameter("username");
    String msg = "";
    if("lbw".equals(username)){
      msg = "名称正确";
    } else {
      msg = "名称错误";
    }
    PrintWriter out = response.getWriter();
    out.println(msg);
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }
}

Beginnen Sie mit dem Testen

Geben Sie localhost: ein8888/login.jsp, Pop-up-Fenster

　Das bedeutet, dass das Einbinden von js in das jsp erfolgreich war

Geben Sie Testdaten in das Eingabefeld ein

　Von der Logik im Servlet bestimmt, fehlerhafte Rückgabemeldung zurückzugeben

　Von der Logik im Servlet bestimmt, erfolgreiches Rückgabemeldung zurückzugeben

Dadurch wurde eineajax asynchrone Anfrage initialisiert, die Echtzeit-Validierung erfüllt

Einige kleine Details

1.Beim Aufbau eines Projekts mit Maven beachten Sie die Projektstruktur -> Facets, hier wird der Pfad zu web.xml und webapp eingestellt, der von IntelliJ IDEA verwendet wird

2Beim Einbinden von js beachten Sie, die Methode der relativen Pfadangabe zu verwenden und sicherzustellen, dass isELIgnored="false" aktiviert ist, um sicherzustellen, dass EL nicht unbemerkt bleibt.

Zusammenfassung

Die obigen Informationen sind von mir vorgestellt worden, um eine einfache Echtzeit-Validierungsfunktion für AJAX zu implementieren. Ich hoffe, dass es Ihnen hilft. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar, ich werde rechtzeitig antworten!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht der jeweiligen Eigentümer. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, und geben Sie relevante Beweise an. Sobald überprüft, wird diese Website den verdächtigen Inhalt sofort löschen.)

Grund教程

Gefällt mir