Heim > Artikel > Web-Frontend > Einfache Implementierungsmethode für Ajax-Echtzeit-Verifizierungsfunktionen

Einfache Implementierungsmethode für Ajax-Echtzeit-Verifizierungsfunktionen

小云云Original: 2018-01-05 15:06:131566Durchsuche

Ajax steht für „Asynchronous Javascript And XML“ und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. In diesem Artikel wird hauptsächlich die einfache Echtzeit-Verifizierungsfunktion von Ajax vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

Ajax = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

Ajax ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

Ajax ist eine Technologie, die es Ihnen ermöglicht, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund ermöglicht Ajax die asynchrone Aktualisierung von Webseiten. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein Ajax verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Dies ist Baidus Definition, die detailliert genug ist.
Eine Sache, die es wert ist, hinzugefügt zu werden, ist das Verständnis von Asynchronität. Hier beziehen sie sich auf den Interaktionsmodus zwischen dem Server und dem Browser.

Synchron: Nachdem jede Anforderung ausgegeben wurde, wird der Benutzervorgang blockiert und muss eine Antwort zurückgeben, bevor der Vorgang fortgesetzt werden kann. Asynchron bedeutet, dass der Benutzer nach dem Senden einer Anfrage nicht auf eine Antwort warten muss. Alles wird von Ajax implementiert und die Daten können teilweise aktualisiert werden, ohne die Webseite zu aktualisieren. Verbesserte Kommunikationseffizienz zwischen beiden Enden.

Machen wir eine kleine Demo

Erstellen Sie eine Demo eines Verifizierungsformulars ohne Aktualisierung, geben Sie den Benutzernamen in das Dialogfeld ein und führen Sie die Verifizierung im Hintergrund mithilfe der Ajax-Technologie durch.

Projektstruktur, erstellt mit Maven

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

Willkommen zum Einloggen:

    用户名：<input type="text" name="username" id="username" onchange="CallServer()"/>
    <!-- 显示提示信息 -->
    <p id="msg"></p>
    <!-- 在jsp页面中引入js，绝对路径的方式 -->
    <script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>

main.js

alert("use ajax!")
//创建XMLHttpRequest对象，在不同浏览器
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:8888/login.jsp ein, ein Popup-Fenster

Stellt die erfolgreiche Einführung von js in jsp dar

Geben Sie Testdaten in das Eingabefeld ein

Abhängig von der Logik im Servlet werden Fehlerinformationen zurückgegeben

Abhängig von der Logik im Servlet werden Erfolgsinformationen zurückgegeben

Daher wurden zunächst asynchrone Ajax-Anfragen implementiert, die den Anforderungen der Echtzeitüberprüfung entsprechen

Ein paar kleine Details

1. Achten Sie beim Erstellen des Projekts auf Projektstruktur -> Facetten. Legen Sie hier die Pfade von web.xml und webapp fest. 2. Achten Sie bei der Einführung von js auf die Verwendung relativer Um EL-Ausdrücke zuzuordnen und zu verwenden, aktivieren Sie isELIgnored="false"·`, um keine Analyse zu vermeiden.

Verwandte Empfehlungen:

WeChat-Applet implementiert einfache gemeinsame Nutzung der Funktion zur Überprüfung regulärer Ausdrücke

AngularJS-Implementierung zum Fokusgewinnen und Fokusverlust. Detaillierte Form Validierungsfunktion zu diesem Zeitpunkt

Detailliertes Beispiel für die Vervollständigung der Formularvalidierungsfunktion durch jQuery

Das obige ist der detaillierte Inhalt vonEinfache Implementierungsmethode für Ajax-Echtzeit-Verifizierungsfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Gemeinsame Nutzung von Methoden zum Generieren zufällig gemischter Arrays mithilfe von JSNächster Artikel：Gemeinsame Nutzung von Methoden zum Generieren zufällig gemischter Arrays mithilfe von JS

In Verbindung stehende Artikel

Mehr sehen