ajax簡單即時驗證功能實作方法

Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用程式的網頁開發技術。本文主要介紹了ajax實現簡單即時驗證功能,需要的朋友可以參考下，希望能幫助大家。

Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。

Ajax 是一種用於建立快速動態網頁的技術。

Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

 透過在後台與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。

傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。

這是百度對它的定義，夠詳細。
 值得補充的一點是對非同步的理解，非同步是相對於同步來說的，在這裡他們指的是伺服器和瀏覽器的互動模式。

 同步，每次請求發出之後，使用者操作即被阻塞，必須要求回傳回應後繼續操作。而異步指的是發出請求後，使用者無需等待回應，一切由ajax來實現，無需進行刷新網頁即可局部更新資料。提高了倆端的溝通效率。

來個小demo

做一個無刷新驗證表單的demo，在對話框中輸入使用者名，在後台進行驗證，使用ajax技術。

專案結構，使用maven建置

login.jsp

  <title>login</title>

# 歡迎登陸：

    用户名：<input>
    <!-- 显示提示信息 -->
    <p></p>
    <!-- 在jsp页面中引入js，绝对路径的方式 -->
    <script></script>

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

nbsp;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"·`避免沒有解析。

相關推薦：

微信小程式實作簡單input正規表示式驗證功能分享

AngularJS實作的取得焦點及失去焦點時的表單驗證功能詳

實例詳解jQuery完成表單驗證功能

以上是ajax簡單即時驗證功能實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！