AJAX实现对输入用户名的验证

AJAX:

Asynchronous JavaScript And XML(异步的JavaScript和XML)。

需求:

同步编程出现的问题:比如在页面输入用户名跟密码的时候,如果密码出现错误,页面就会重新加载,然后重新输入账号密码,很影响用户体验!

而AJAX是用来解决以上问题的。用户鼠标离开用户名的输入框,页面给出提示!

AJAX实现对输入用户名的验证

 

 

 实现:

AJAX编程四步:

1、创建AJAX核心对象XMLHttpRequest (浏览器内置的,可以直接使用)
2、注册回调函数(重点)
3、开启浏览器和服务器之间的通道
4、发送AJAX请求

XMLHttpRequest()对象:

XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法:
  variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
  variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject : var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {//表示不支持IE5,IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

index.html注册页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function checkUsername(username) {
        //AJAX发送请求全靠浏览器内置的这个对象: XMLHttpRequest对象 。
        //使用这个XMLHttpRequest对象可以在浏览器当中单独启动一个新的浏览器线程,通过浏览器线程发送该请求。
        //达到异步效果。
        //1、创建AJAX核心对象XMLHttpRequest (浏览器内置的,可以直接使用)
        var xhr = new XMLHttpRequest();
        //2、注册回调函数
        /**
         * onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
         * readyState:
         存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
         •0: 请求未初始化
         •1: 服务器连接已建立
         •2: 请求已接收
         •3: 请求处理中
         •4: 请求已完成,且响应已就绪
         */
        xhr.onreadystatechange = function () {//xhr的readyState发生改变的时候,回调一次
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var nameSpan = document.getElementById("nameSpan");
                    nameSpan.innerHTML = xhr.responseText;

                } else {
                    alert(xhr.status+"错误");
                }
            }
        }
        //3、开启浏览器和服务器之间的通道
        /**
         * open(method,url,async)
         规定请求的类型、URL 以及是否异步处理请求。
         •method:请求的类型;GET 或 POST
         •url:文件在服务器上的位置,相当于超链接<a href=""></a>
         •async:true(异步)或 false(同步)
         */
        xhr.open("GET", "some?username="+username, true);
        //4、发送AJAX请求
        xhr.send();
    }

</script>
用户名<input type="text" name="username" onblur="checkUsername(this.value)"/><span id="nameSpan" style="font-size: 12px"></span><br>
密码<input type="password" name="password"><br>
</body>
</html>

 

web.xml配置文件:

    <servlet>
        <servlet-name>someServlet</servlet-name>
        <servlet-class>com.zhixi.zhang.SomeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>someServlet</servlet-name>
        <url-pattern>/some</url-pattern>
    </servlet-mapping>

 

SomeServlet.java进行判断:

package com.zhixi.zhang;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class SomeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        if ("admin".equals(username)){
            response.getWriter().print("<font color='red'> 用户名已被注册</font>");
        }else {
            response.getWriter().print("<font color='green'>用户名未被注册</font>");
        }
    }
}

以上就完成了简单的用户进行注册的简单检查功能!

 

上一篇:Ajax


下一篇:Ajax