Ajax 即「Asynchronous Javascript And XML」(非同步 JavaScript 和 XML),是指一種建立互動式網頁應用程式的網頁開發技術。本文主要介紹了ajax實現簡單即時驗證功能,需要的朋友可以參考下,希望能幫助大家。
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"·`避免沒有解析。
相關推薦:
AngularJS實作的取得焦點及失去焦點時的表單驗證功能詳
以上是ajax簡單即時驗證功能實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!