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 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.
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 login.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>login</title> </head> <body>
用户名：<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>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();
}<!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>
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 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 entsprechenEinige 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
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
