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

login.jsp代码:

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>用户登陆</title>
  7. </head>
  8. <body>
  9.     <form action="#" method="post">
  10.         <input type="hidden" name="action" value="login"/>
  11.         用户名: <input type="text" maxlength="10" name="username" id="userid" onblur="validata('user')">
  12.                 <span id="uservalidate" style="color:red"></span>
  13.         <br><br>
  14.         密码： <input type="password" maxlength="10" name="password" id="passwordid" onblur="validata('password')"/>
  15.               <span id="passvalidate" style="color:red"></span>
  16.         <br><br>
  17.         <input type="submit" value="登陆"/>&nbsp;<input type="reset" value="重置"/>
  18.     </form>
  19. </body>
  20. <script type="text/javascript">
  21. var request;
  22. var actionType;
  23.  
  24. //onblur的时候，发起ajax请求验证用户/密码是否正确
  25. function validata(type){
  26.     actionType = type;
  27.     var url;
  28.     if(window.XMLHttpRequest){
  29.         request = new XMLHttpRequest();
  30.     }else if(window.ActiveXObject){
  31.         request = new ActiveXObject("Microsoft.XMLHTTP");
  32.     }
  33.     if(type=='user'){
  34.         actionType = 'usercheck';
  35.         var username = document.getElementById("userid").value;
  36.         url = "validate.jsp?action=usercheck&username=" +username;
  37.         request.open("GET", url, true);
  38.     }else if(type=='password'){
  39.         actionType = 'passwordcheck';
  40.         var password = document.getElementById("passwordid").value;
  41.         url = "validate.jsp?action=passwordcheck&password=" +password;
  42.         request.open("POST", url, true);
  43.     }
  44.     request.onreadystatechange = callback;    //当状态变化，调用callback方法 callback这里不能写参数，写了只调一次，为什么?
  45.     request.send(null);    //sends HTTP request;body can be null;
  46. }
  47.  
  48. //ajax返回的处理函数
  49. function callback(){
  50.     if(request.readyState == 4){
  51.         if(request.status == 200){
  52.             var msg = request.responseText;
  53.             console.log(msg);
  54.             if(actionType=='usercheck'){
  55.                 if(msg == "wrong"){
  56.                     document.getElementById("uservalidate").innerText = "用户名错误！";
  57.                 }else if(msg == 'correct'){
  58.                     document.getElementById("uservalidate").innerText = "用户名正确！";
  59.                 }
  60.             }else if(actionType=='passwordcheck'){
  61.                 if(msg == "wrong"){
  62.                     document.getElementById("passvalidate").innerText = "密码错误！";
  63.                 }else if(msg == 'correct'){
  64.                     document.getElementById("passvalidate").innerText = "密码正确！";
  65.                 }
  66.             }
  67.         }
  68.     }
  69. }
  70. </script>
  71. </html>

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

  1. <%
  2.     /**
  3.     setContentType常用参数：
  4.     text/html HTML
  5.     text/plain TXT
  6.     text/xml XML
  7.     text/javascript json数据
  8.     response.setContentType（“text/html;charset=UTF-8”）；
  9.     */
  10.     response.setContentType("text/plain;charset=utf-8");
  11.     response.setHeader("Cache-Control", "no-store"); //HTTP1.1
  12.     response.setHeader("Pragma", "no-cache"); //HTTP1.0
  13.     response.setDateHeader("Expires", 0); //prevents catching at proxy server
  14.  
  15.     String action = request.getParameter("action");
  16.     if(action!=null && action.equals("usercheck")){
  17.         String username = request.getParameter("username");
  18.         if(username!=null && !username.equals("admin")){
  19.             response.getWriter().write("wrong");
  20.         }else{
  21.             response.getWriter().write("correct");
  22.         }
  23.     }else if(action!=null && action.equals("passwordcheck")){
  24.         String password = request.getParameter("password");
  25.         if(password!=null && !password.equals("admin")){
  26.             response.getWriter().write("wrong");
  27.         }else{
  28.             response.getWriter().write("correct");
  29.         }
  30.     }
  31. %>

页面效果：

补充知识：

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. C#线程

    创建带参数 Thread channelUpdaterThread = new Thread(new ParameterizedThreadStart(ChannelUpdaterThreadProc ...

  2. Python元组的简单介绍

    1.实际上元组是跟列表非常相近的另一种容器类型.元组和列表看上去的不同的一点是元组用圆括号而列表用方括号.而在功能上,元组是一种不可变的类型.正是因为这个原因,元组可以做一些列表不可以做的事情,比如用 ...

  3. 013. asp.net统计网站访问人数

    Global.asax中的代码: <%@ Application Language="C#" %> <script runat="server" ...

  4. dwr使用步骤

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...

  5. python数据库操作pymysql

    安装数据库: pip3 install pymysql 进行数据库的更新.插入.查询等操作: #!/usr/bin/python3.4 # -*- coding: utf-8 -*- #------- ...

  6. apache 2.4 配置多个站点

    1.打开\Apache24\conf\httpd.conf 查找conf/extra/httpd-vhosts.conf  去掉前面的#号,一般是去掉的 2.在httpd.conf 中查找Requir ...

  7. 内容模块PC标签调用说明

    内容模块 模块名:content 模块提供的可用操作 操作名 说明 lists 内容数据列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 positi ...

  8. C#本地时间和GMT(UTC)时间的转换

    /// <summary> /// 本地时间转成GMT时间 /// </summary> 4 public static string ToGMTString(DateTime ...

  9. 【性能测试】性能测试总结<三>

    常见性能测试工具: 性能测试工具,从理论上来讲在性能测试过程中使用到的所有工具都可以称其为性能测试工具,通常分为以下几类: 说明: 服务器端性能测试工具:需要支持产生压力和负载,录制和生成脚本,设置和 ...

  10. 记一下一些比较有意思的第三方API

    野狗,第三方后端通信用的:https://www.wilddog.com/ 花瓣网,用来做设计的:http://huaban.com/ Ping++,聚合支付接口:https://www.pingxx ...