1.获取ajax对象

　　new XMLHttpRequest();

　　IE6-8: new ActiveXOject("Microsoft.XMLHTTP");

　　兼容判断：if(XMLHttpRequest){...}else{...}

2.打开链接：open()

　　open(method,url,async):method:请求方式GET/POST，url:请求地址，async:true(异步，默认)/false(同步)

3.发送请求：send()

　　如果是POST请求，send方法要带参，带上我们要传输的数据。

　　POST请求的话，还要修改请求头，写在open方法后：setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.监听状态变化

　　onreadystatechange = function(){...}

5.状态判断:readyState==4&&status==200

　　readyState:4/3/2/1/0

　　　　0：请求未初始化，open()方法未执行
              1：send()方法未调用
              2：send()方法已经被调用，响应头已经获取，响应头的状态已经返回
              3：部分responseText已经获取
              4：整个请求过程完成

　　status:200/404/500

6.responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

注意：1.后端不做跳转，直接返回数据  2.返回的数据类型肯定是字符串  3.使用print，不要使用println（会有换行）  4.有的浏览器会有缓存问题

如何解决浏览器缓存问题：传输的参数加上时间戳 url=“/ajax/checkUser?username=”+username+"&_timer="+new Date().getTime();

　　_timer:该参数名只要保证不与其他参数名重复即可

代码演示：原生JS方式检查用户名是否重复

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>检查用户名是否重复</title>

     </head>

     <body>

         用户名：<input type="text" name="username" id="username" />

         <br />

         <span id="info"></span><br />

         <button type="button" id="checkUser" onclick="checkUser()">校验</button>

         <!--用ajax完成post请求时,

             1.button的类型不能是submit,

                 submit会有一个浏览器默认事件(即提交后会自动刷新页面)

             2.请求头的Content-Type要改变,写在open之后

                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

             3.send(要传输的数据写在这里)

          -->

     </body>

     <script type="text/javascript">

         function checkUser() {

             //获取数据

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

             alert(username);

             //1.获取ajax对象

             var xhr = null;

             if(XMLHttpRequest) {

                 xhr = new XMLHttpRequest();

             } else if(ActiveXObject) {

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

             } else {

                 alert("你是啥？？?");

             }

             //2.open                  带参数传输

             xhr.open("GET", "/ajax/checkUser?username="+username, true);

             //3.send

             xhr.send();

             //4.监听状态

             xhr.onreadystatechange = function() {

                 if(xhr.status == 200 && xhr.readyState == 4) {

                     if(xhr.responseText == "false") {

                         document.getElementById("info").innerHTML="用户名已存在！！";

                     } else {

                         document.getElementById("info").innerHTML="用户名可以使用！！";

                     }

                 } else {

                     console.debug("error");

                 }

             }

         }

     </script>

 </html>

前端代码

 @WebServlet("/checkUser")

 public class checkUserServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     @Override

     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

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

         System.out.println(username);

         if("admin".equals(username)) {

             System.out.println("判断结果为true");

             response.getWriter().print("false");//不用加ln,会出错

         }else {

             response.getWriter().print("true");

         }

     }

 }

后端代码

ajax检查用户名重复的更多相关文章

  1. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  2. 使用原生Ajax进行用户名重复的检验

    title: 使用原生Ajax进行用户名重复的检验(一) date: 2019-01-21 17:35:15 tags: [JavaScript,Ajax] --- Ajax的复习 距离刚开始学aja ...

  3. 使用ajax验证用户名重复

    继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...

  4. ajax检查用户名是否存在

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  5. SSH+Ajax实现用户名重复检查（二）

    1.另外一种更常用的js表达方式: var user = { inintEvent: function(){ $("input[name='user.User_LogName']" ...

  6. SSH+Ajax实现用户名重复检查（一）

    1.struts.xml设置 <package name="default" namespace="/" extends="json-defau ...

  7. ajax检查用户名

    Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...

  8. AJAX异步检查，检查用户名是否存在

    AJAX异步检查,检查用户名是否存在 写法一: var xmlHttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, ...

  9. vue检查用户名是否重复

    前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\http.js中调用的后端地址 ...

随机推荐

  1. 关于Jmeter+Ant+Jenkins作为接口、性能自动化框架的误区

    说明:Apach-Jmeter有完善的桌面客户端,关联数据的处方方式,各种参数化的方式,各种Jar包的扩展,也可以用作抓包工具使用,当然最重要的是它是[开源!开源!开源!],重要的事说三遍,目前也有基 ...

  2. pytorch0.4.1安装

    pytorch官网:https://pytorch.org/ 这里安装pytorch0.4.1版本(最新版本为1.3.0系列,但是在跑github上的一些项目时会不断地报“ UseWarinig:Le ...

  3. thymeleaf自定义属性

    例如我想给添加一个属性data-page,可以根据(SpringEL/Ognl)表达式计算获得. 需求: 期望效果 app个数大于0,有数据时链接 <xxx data-page="/a ...

  4. EasyNetQ使用(十)【用EasyNetQ.Hosepipe重新提交错误信息】

    EasyNetQ.Hosepipe是EasyNetQ队列管理工具.用来取回队列中的消息并重新发布这些消息.还可以用它来检测错误队列,并重试发布消息. 用法 EasyNetQ.Hosepipe.exe ...

  5. 项目中常用的19条MySQL优化技巧

    原文:https://segmentfault.com/a/1190000012155267 声明一下:下面的优化方案都是基于 “ Mysql-索引-BTree类型 ” 的 一.EXPLAIN 做My ...

  6. 【MM系列】在SAP里查看数据的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法   前言部 ...

  7. 【MM系列】SAP 采购订单收货后不能修改价格的增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 采购订单收货后不能修改价格的 ...

  8. php 常用正则表达 邮箱 手机号啥的

    class RegexConst { const REGEX_MOBLIE_86 = '/^1(3|4|5|7|8)\d{9}$/';//中国手机号 const REGEX_MOBLIE_852 = ...

  9. 跨域及jsonp

    什么是跨域? 要解释跨域,就要先说明下什么是域?域的英文名是Domain,百度百科给的定义是: 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust ...

  10. 守卫者的挑战(据说在bzoj有但我没找到)

    芒果君:一看就是概率dp(可是我不会啊,就算再裸也不会啊).然后先从最后想,能够满足题意的状态是 挑战次数>=L,获得价值>=0,那一定有f[总挑战数i][挑战成功数j][价值k].转移很 ...