实现Ajax需要使用一个核心对象XMLHttpRequest

XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

GET请求

1.页面代码

<%--

  Created by IntelliJ IDEA.

  User: 秀清风

  Date: 2018/12/27

  Time: 15:39

  To change this template use File | Settings | File Templates.

--%>

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

<html>

<head>

    <title>注册</title>

</head>

<script type="text/javascript">

    function sendAjax(){

        var uname=document.getElementById("uname").value;//获取到文本框的值

        var xhr=null;

        if (window.XMLHttpRequest){//高版本IE或非IE浏览器

            xhr=new XMLHttpRequest();

        }else {//低版本IE浏览器

            xhr=new ActiveXObject("XMLHTTP");

        }

        xhr.open("GET","${pageContext.request.contextPath}/ajaxServlet?uname="+uname,true);

        xhr.send(null);

        xhr.onreadystatechange=function () {

                if (xhr.readyState==4&&xhr.status==200){//数据响应回来并且页面状态为正常状态进入判断

                        var masgg=xhr.responseText;//获取servlet响应回来的true或false

                    var ms=document.getElementById("msg");

                        if (masgg=="true"){

                                ms.innerHTML="改用户名已被注册";

                                ms.style.color='red';

                        }else if(masgg=="false"&&uname!=""){

                            ms.innerHTML="改用户名可以使用";

                            ms.style.color='green';

                        }else{
 　　　　　　　　　　　　　　　　ms.innerHTML="用户名不可以为空";
　　　　　　　　　　}

                }

        }

    }

</script>

<body>

<h2>注册</h2>

<form  method="get">

    用户名：<input type="text" id="uname" name="uname" onblur="sendAjax(this)"><span id="msg"></span><br>

    密码： <input type="text" id="upwd" name="upwd">

</form>

</body>

</html>

2.servlet代码：

package cn.happy.Servlet;

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 AjaxServlet extends HttpServlet {

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

        String action=request.getParameter("uname");//获取到用户输入框

        System.out.println(action);

        if (action.equals("admin")){//输入框的值为admin,显示用户名已被注册

            response.getWriter().write("true");//使用响应的写入功能

        }else{

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

        }

    }

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

        doPost(request,response);

    }

}

3.页面

如果鼠标点击文本框之后点击别处，发现文本框没值：

POST请求：

在GET请求上修改几处即可：

原生Ajax GET+POST请求无刷新实现文本框用户名是否被注册的更多相关文章

  1. 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  2. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  3. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  7. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  8. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  9. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

随机推荐

  1. 关于java工程打exe包的一些问题

    这两天在把一个Java project打包成exe文件时碰到了一些问题,现在把这些问题和解决办法记下来. 1.用java swing做前端时,背景图片无法显示 Solution:把jpg图片换成png ...

  2. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...

  3. 《笨方法学Python》加分题20

    加分练习通读脚本,在每一行之前加注解,以理解脚本里发生的事情.每次 print_a_line 运行时,你都传递了一个叫 current_line 的变量,在每次调用时,打印出 current_line ...

  4. Golang:List

    List的接口 func New() *List //创建List func (l *List) Back() *Element //返回List的上一个元素 func (l *List) Front ...

  5. LCA的两种写法

    第一种是离线的Tarjan算法 #include<cstdio> using namespace std; int rd(){ ,fl=;char ch=getchar(); ;}ch=g ...

  6. mr微博内容推荐

        第一次迭代 1 package com.laoxiao.mr.weibo; import java.io.StringReader; import org.apache.commons.lan ...

  7. filebeat 收集的进度日志查看

    filebeat 收集的日志进度和文件在data 目录中是有保存的 默认路径地址: /usr/share/filebeat/data 里面有两个文件: meta.json:{"uuid&qu ...

  8. 【机器学习】K均值算法（I）

    K均值算法是一类非监督学习类,其可以通过观察样本的离散性来对样本进行分类. 例如,在对如下图所示的样本中进行聚类,则执行如下步骤 1:随机选取3个点作为聚类中心. 2:簇分配:遍历所有样本然后依据每个 ...

  9. Jmeter多用户利用集合点瞬压并发测试

    在测试一些限时秒杀类似的接口时,需要模拟多用户同时一瞬间访问接口,我们这里简单模拟多用户同时访问百度. 1.首先打开Jmeter,在测试计划下添加线程组. 2.在线程组下添加HTTP请求. 3.在HT ...

  10. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验二 面向对象程序设计 实验报告

    20175316 盛茂淞 2018-2019-2 <Java程序设计>实验二 面向对象程序设计 实验报告 (一)单元测试 在 IDEA中我们把产品代码放在src目录中,把测试代码放在tes ...