在用户登陆的时候，离开用户、密码输入框即进行验证：ajax发起请求进行验证的：

login.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户登陆</title>

</head>

<body>

    <form action="#" method="post">

        <input type="hidden" name="action" value="login"/>

        用户名: <input type="text" maxlength="10" name="username" id="userid" onblur="validata('user')">

                <span id="uservalidate" style="color:red"></span>

        <br><br>

        密码： <input type="password" maxlength="10" name="password" id="passwordid" onblur="validata('password')"/>

              <span id="passvalidate" style="color:red"></span>

        <br><br>

        <input type="submit" value="登陆"/>&nbsp;<input type="reset" value="重置"/>

    </form>

</body>

<script type="text/javascript">

var request;

var actionType;

//onblur的时候，发起ajax请求验证用户/密码是否正确

function validata(type){

    actionType = type;

    var url;

    if(window.XMLHttpRequest){

        request = new XMLHttpRequest();

    }else if(window.ActiveXObject){

        request = new ActiveXObject("Microsoft.XMLHTTP");

    }

    if(type=='user'){

        actionType = 'usercheck';

        var username = document.getElementById("userid").value;

        url = "validate.jsp?action=usercheck&username=" +username;

        request.open("GET", url, true);

    }else if(type=='password'){

        actionType = 'passwordcheck';

        var password = document.getElementById("passwordid").value;

        url = "validate.jsp?action=passwordcheck&password=" +password;

        request.open("POST", url, true);

    }

    request.onreadystatechange = callback;    //当状态变化，调用callback方法 callback这里不能写参数，写了只调一次，为什么?

    request.send(null);    //sends HTTP request;body can be null;

}

//ajax返回的处理函数

function callback(){

    if(request.readyState == 4){

        if(request.status == 200){

            var msg = request.responseText;

            console.log(msg);

            if(actionType=='usercheck'){

                if(msg == "wrong"){

                    document.getElementById("uservalidate").innerText = "用户名错误！";

                }else if(msg == 'correct'){

                    document.getElementById("uservalidate").innerText = "用户名正确！";

                }

            }else if(actionType=='passwordcheck'){

                if(msg == "wrong"){

                    document.getElementById("passvalidate").innerText = "密码错误！";

                }else if(msg == 'correct'){

                    document.getElementById("passvalidate").innerText = "密码正确！";

                }

            }

        }

    }

}

</script>

</html>

后台使用validate.jsp进行简单验证模拟：

<%

    /**

    setContentType常用参数：

    text/html HTML

    text/plain TXT

    text/xml XML

    text/javascript json数据

    response.setContentType（“text/html;charset=UTF-8”）；

    */

    response.setContentType("text/plain;charset=utf-8");

    response.setHeader("Cache-Control", "no-store"); //HTTP1.1

    response.setHeader("Pragma", "no-cache"); //HTTP1.0

    response.setDateHeader("Expires", 0); //prevents catching at proxy server

    String action = request.getParameter("action");

    if(action!=null && action.equals("usercheck")){

        String username = request.getParameter("username");

        if(username!=null && !username.equals("admin")){

            response.getWriter().write("wrong");

        }else{

            response.getWriter().write("correct");

        }

    }else if(action!=null && action.equals("passwordcheck")){

        String password = request.getParameter("password");

        if(password!=null && !password.equals("admin")){

            response.getWriter().write("wrong");

        }else{

            response.getWriter().write("correct");

        }

    }

%>

页面效果：

补充知识：

XMLHttpRequest的方法：

XMLHttpRequest的属性：

有更好的例子，或者用法继续补充》》》》》》》》》》》》》》》》》

注意：上面的validate.jsp我并没有写<%@ page contentType="text/html;charset=utf8" ... %>等这个头部信息，写了之后，发现response.getWriter().write("wrong")写到客户端，console一看总是"wrong"后面多个换行符，就始终不对；研究下为什么。

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

pageEncoding是jsp文件本身的编码

contentType的charset是指服务器发送给客户端时的内容编码

不同于常规 servlet （默认的 MIME 类型为 text/plain），JSP 页面的默认 MIME 类型是 text/html （默认字符集为 ISO-8859-1）。因此，如果 JSP 页曲以 Latin 字符集输出 HTML则根本无需使用 contentType

原始ajax发起请求并反馈的更多相关文章

  1. Ajax向服务器发起请求

    Ajax向服务器发起请求的三个步骤: 1:创建Ajax 2:打开Ajax,打开Ajax请求 3:向服务器发起请求:需要知道地址和是get请求还是post方法 向服务器发起请求的两个方法:open 和 ...

  2. javaweb局部刷新-ajax异步请求springMVC显示返回的jsp内容,代替iframe

    在jsp上要引入jquery <script src="<%=request.getContextPath()%>/js/jquery_ui/jquery.js" ...

  3. js ajax同步请求造成浏览器假死的问题

    一.问题的起因 今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** ...

  4. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  5. AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

    转载:http://blog.csdn.net/mhmyqn/article/details/25561535 HTTP请求中,如果是get请求,那么表单参数以name=value&name1 ...

  6. AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式

    HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...

  7. ajax客户端请求与服务端响应浅谈

    AJAX,即Asynchronous Javascript And XML,AJAX本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 所谓的异步,是指某段程序执行不会阻塞其他程序执行,其表现 ...

  8. 关于ajax post请求跨域问题的解决心得

    最近啊,公司有个项目,需要做一个手机端APP的后台管理系统.所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使 ...

  9. 关于AJAX异步请求的那些事儿(2)

    1.使用AJAX发起GET请求消息 xhr.open("GET","XX.PHP?K1=V1$K2=V2",true); xhr.send(null); 2.使 ...

随机推荐

  1. 从开发的角度比较 ASP.NET Web 服务与 WCF

    Windows Communication Foundation (WCF) 具有一个 ASP.NET 兼容模式选项,用户使用此选项可以对 WCF 应用程序进行编程和配置,使其像 ASP.NET We ...

  2. EDIUS和会声会影的区别

    最近经常听到大家讨论会声会影和EDIUS哪个好,有人说会声会影就相当于傻瓜相机,EDIUS相当于手动的相机:也有人说拍着玩的,简单玩玩的用会声会影,做出来画面很绚丽:剪辑片子,特效合成专业的就用EDI ...

  3. oracle数据字典-权限-角色

    每个数据库都提供了各自的数据字典的方案,虽然形式不同,但是目的和作用是一样的,比如在mysql里数据字典是在information_schema 里表现的,sqlserver则是在sys这个系统sch ...

  4. Android测试环境搭建(win7)

    一.安装JDK并配置环境变量 1.在Java官方网站上下载相应系统的jdk文件安装,如win7 64 位系统下安装jdk-6u45-windows-x64,全部选择默认的安装路径即可安装完成. 2.配 ...

  5. html之texteara

    定义多行的文本输入控件,所有浏览器都支持,可容纳无限的文本,等宽的字体. 用css的height和width来设置其框框的大小是个很好的办法,其中的文本换行符为%OD/%OA(回车换行) html5中 ...

  6. mysql.server 文件修改起动多实例

    如果你用mysql.server来启动的话,就要注意一下点,要修改一下里面的内容,修改如下:大约218行左右 查看复制打印? then print_defaults="$bindir/mys ...

  7. linux Shell的使用

    linux Shell的使用 下面是我对shell脚本使用的学习,写成日志,做个笔记,可以当做自己以后的复习. 1.输出hello world! vi test1.sh, 如果不会vi工具的使用,请参 ...

  8. WPF--Calendar控件高级使用

    一.得到当前显示的月份: DateTime SelectedDay = this.MC.DisplayDate; 二.得到当前选中的天,得到当前选中的周,得到当前显示的月份: 如果你使用系统默认的事件 ...

  9. linux下的php网站放到Windows服务器IIS下导入 .htaccess文件伪静态规则转换 (wordpress)

    需要特别注意的是: 1. .htacdess文件在 wordpress中 是可以生成的 安装 WP Super Cache后,开启该插件>>设置>>高级>>找到并点 ...

  10. lucene 区分大小写 问题以及解决方案

    转自:http://blog.csdn.net/huaishu/article/details/8543236 本文介绍lucene区分大小的原因,和解决方案.关于lucene大小写敏感问题我总结一下 ...