首頁 > web前端 > js教程 > ajax簡單即時驗證功能實作方法

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

小云云
發布: 2018-01-05 15:06:13
原創
1572 人瀏覽過

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

相關推薦:

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

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板