zoukankan      html  css  js  c++  java
  • ajax初探--实现简单实时验证

    学习技术最好的方式就是在做中学,做一个小demo来对前端输入进行实时验证。 利用ajax技术和Sevlet技术来实现,使用原生的js。

    源码可访问,我的Github

    什么是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()"/>
    
            <!-- 显示提示信息 -->
            <div id="msg"></div>
    
            <!-- 在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"·`避免没有解析。
  • 相关阅读:
    (网页)中的简单的遮罩层
    (后端)shiro:Wildcard string cannot be null or empty. Make sure permission strings are properly formatted.
    (网页)jQuery的时间datetime控件在AngularJs中使用实例
    Maven Myeclipse 搭建项目
    MyBatis 环境搭建 (一)
    java 常用方法
    XML 基础
    JS BOM
    js 事件
    js 的使用原则
  • 原文地址:https://www.cnblogs.com/libowen/p/8097808.html
Copyright © 2011-2022 走看看