Heim >Web-Frontend >js-Tutorial >Ajax implementiert eine einfache Echtzeit-Verifizierungsfunktion

Ajax implementiert eine einfache Echtzeit-Verifizierungsfunktion

php中世界最好的语言Original: 2018-04-13 16:32:321278Durchsuche

Dieses Mal zeige ich Ihnen, wie Ajax die Echtzeitüberprüfung implementieren sollte. Was sind die Vorsichtsmaßnahmen für Ajax, um die Echtzeitüberprüfung zu implementieren?

Was ist Ajax

Ajax steht für „Asynchronous

Javascript And XML“ (asynchrones JavaScript und XML) und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

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.

Lass uns eine kleine Demo machen

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);
  }
}

Testen starten

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

Wird durch die Logik im Servlet bestimmt und gibt eine

Fehlermeldung

zurück 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

Einige kleine Details

1. Achten Sie beim Erstellen des Projekts auf

. Legen Sie hier die Pfade von web.xml und webapp fest. 2. Achten Sie bei der Einführung von js auf die Verwendung relativer Pfade Mapping. Und wenn Sie ELProject Structure -> Facets expression

verwenden, müssen Sie isELIgnored="false"·` aktivieren, 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:

Parcel.js+Vue 2.x Schnellkonfigurations-Paketmethode

VueRouter-Navigationsschutz Anleitung Verwenden Sie

Das obige ist der detaillierte Inhalt vonAjax implementiert eine einfache Echtzeit-Verifizierungsfunktion. 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：Ausführliche Erläuterung der Schritte zur Verwendung des Baummenüs von zTreeNächster Artikel：Ausführliche Erläuterung der Schritte zur Verwendung des Baummenüs von zTree

In Verbindung stehende Artikel

Mehr sehen