Heim >Web-Frontend >js-Tutorial >So implementieren Sie eine Echtzeit-Verifizierungsfunktion in Ajax

So implementieren Sie eine Echtzeit-Verifizierungsfunktion in Ajax

php中世界最好的语言Original: 2018-03-30 15:38:031245Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Echtzeit-Verifizierungsfunktion mit Ajax implementieren. Was sind die Vorsichtsmaßnahmen für Ajax, um die Echtzeit-Verifizierungsfunktion zu implementieren? Schauen Sie mal rein.

Was ist Ajax?

Ajax bedeutet „Asynchrones

Javascript und XML“ (asynchrones JavaScript und XML), ein Web Entwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

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

Ajax ist eine Technologie zum Erstellen 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 kann Ajax Webseiten asynchron aktualisieren. 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 davon, 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 des Verifizierungsformulars ohne Aktualisierung, geben Sie den Benutzernamen in das Dialogfeld ein und bestätigen Sie im Hintergrund. Verwenden Sie Ajax-Technologie.

Projektstruktur, erstellt mit Maven

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

Willkommen beim Anmelden:

    用户名：<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);
  }
}

Testen starten

Geben Sie localhost ein: 8888/login.jsp. Das Popup-Fenster

stellt die erfolgreiche Einführung von js in jsp dar.

Geben Sie die Testdaten in das Eingabefeld ein.

Das ist es wird durch die Logik im Servlet bestimmt und gibt

zurück. Die Fehlermeldung

wird durch die Logik im Servlet bestimmt und die Erfolgsmeldung

wird zurückgegeben Asynchrone Anforderungen werden zunächst implementiert und die Anforderungen der Echtzeitüberprüfung werden erfüllt

Einige kleine Details

1 Bei der Verwendung von Maven zum Erstellen Projekt, achten Sie auf

, legen Sie hier den Pfad von web.xml und webapp fest, die Idee wird Project Structure -> Facets

2 verwenden. Achten Sie bei der Einführung von js auf die Verwendung relativer Pfade für die Zuordnung und bei Verwendung von EL

Ausdruck, aktivieren Sie isELIgnored="false"·`, um keine Analyse zu vermeiden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Detaillierte grafische Erklärung der Ajax-Implementierung dynamischer Kreisdiagramme und Säulendiagramme

Richterausweis und So schreiben Sie das reguläre Format einer Bankkartennummer

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Echtzeit-Verifizierungsfunktion in Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Java php JavaScript ajax maven servlet xml JS 异步 idea

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：Sicherheitsleistung von Web und AJAXNächster Artikel：Sicherheitsleistung von Web und AJAX

In Verbindung stehende Artikel

Mehr sehen