ajax實現簡單即時驗證功能
- php中世界最好的语言原創
- 2018-04-13 16:32:321284瀏覽
這次帶給大家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中文網其他相關文章！