首頁 > 文章 > web前端 > ajax簡單即時驗證功能實作方法

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

小云云原創: 2018-01-05 15:06:131567瀏覽

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

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

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

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

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

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

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

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

來個小demo

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

專案結構，使用maven建置

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

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

相關文章