ajax怎麼實現即時驗證功能
這次帶給大家ajax怎麼實現即時驗證功能，ajax實現即時驗證功能的注意事項有哪些，下面就是實戰案例，一起來看一下。
什麼是ajax
Ajax 即「Asynchronous Javascript And XML」（非同步JavaScript 和XML），指一種創建互動式網頁應用的網頁開發技術。
Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。
Ajax 是一種用於建立快速動態網頁的技術。
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
透過在後台與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。
這是百度對它的定義，夠詳細。
值得補充的一點是對非同步的理解，非同步是相對於同步來說的，在這裡他們指的是伺服器和瀏覽器的互動模式。
同步，每次請求發出之後，使用者操作即被阻塞，必須要求回傳回應後繼續操作。而異步指的是發出請求後，使用者無需等待回應，一切由ajax來實現，無需進行刷新網頁即可局部更新資料。提高了倆端的溝通效率。
來個小demo
做一個無刷新驗證表單的demo，在對話方塊中輸入使用者名，在背景進行驗證，使用ajax技術。
專案結構，使用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>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);
}
}#開始測試
輸入localhost:8888/login.jsp，彈出視窗
代表在jsp中引入js成功
在輸入框輸入測試資料
# 由Servlet中邏輯決定，回傳錯誤訊息
# 由Servlet中邏輯決定，返回成功資訊
由此，初步實現了ajax非同步請求，達到了即時驗證的要求
一些小細節
1.在使用maven建置專案,注意Project Structure -> Facets，這裡設定web.xml和webapp的路徑，idea會使用到
2.引入js時，注意使用相對路徑的方式來進行映入，並且用到EL表達式要開啟isELIgnored="false"·`避免沒有解析。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是ajax怎麼實現即時驗證功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在PDF中驗證簽名
Feb 18, 2024 pm 05:33 PM
我們通常會接收到政府或其他機構發送的PDF文件，有些文件有數位簽章。驗證簽名後，我們會看到SignatureValid訊息和一個綠色勾號。如果簽章未驗證，會顯示有效性未知。驗證簽名很重要，以下看看如何在PDF中進行驗證。如何在PDF中驗證簽名驗證PDF格式的簽名使其更可信，文件更容易被接受。您可以透過以下方式驗證PDF文件中的簽名。在AdobeReader中開啟PDF右鍵點選簽名，然後選擇顯示簽名屬性點選顯示簽署者憑證按鈕從「信任」標籤將簽名新增至「受信任的憑證」清單中點選驗證簽名以完成驗證讓
微信好友輔助驗證解封的詳細方法
Mar 25, 2024 pm 01:26 PM
1.打開微信進入後，點選搜尋圖標，輸入微信團隊，點選下方的服務進入。 2、進入後，點選左下方的自助工具的選項。 3、點選後，在上方的選項內，點選解封/申訴輔助驗證的選項。
解決jQuery AJAX請求遇到403錯誤的方法
Feb 20, 2024 am 10:07 AM
標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資
PHP 8 新功能：增加了驗證和簽名
Mar 27, 2024 am 08:21 AM
PHP8是PHP的最新版本，為程式設計師帶來了更多的便利性和功能。這個版本特別關注安全性和效能，其中一個值得注意的新功能是增加了驗證和簽章功能。在本文中，我們將深入了解這些新的功能及其用途。驗證和簽名是電腦科學中非常重要的安全概念。它們通常用於確保傳輸的數據是完整和真實的。在處理線上交易和敏感資訊時，驗證和簽名變得尤為重要，因為如果有人能夠篡改數據，可能會對
解決jQuery AJAX請求403錯誤的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤
如何解決jQuery AJAX報錯403的問題？
Feb 23, 2024 pm 04:27 PM
如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
如何使用Ajax從PHP方法取得變數？
Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：
