Heim > Artikel > Web-Frontend > So implementieren Sie eine Echtzeit-Verifizierungsfunktion in Ajax
So implementieren Sie eine Echtzeit-Verifizierungsfunktion in Ajax
- php中世界最好的语言Original
- 2018-03-30 15:38:031168Durchsuche
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 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.
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 Mavenlogin.jsp<%@ 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 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ülltEinige 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
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!
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