实现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 实现udp通讯

    需求:应用A(通常有多个)和应用B(1个)进行 socket通讯,应用A必须知道应用B的ip地址(在应用A的配置文件中写死的),这个时候就必须把应用B的ip设成固定ip(但是某些时候如更换路由后要重新 ...

  2. MongoDB的Replica Set以及Auth的配置

    http://blog.0x01.site/2017/01/13/MongoDB%E7%9A%84Replica-Set%E4%BB%A5%E5%8F%8AAuth%E7%9A%84%E9%85%8D ...

  3. Samtools在Linux上非root权限的安装

    第一次在Linux上不用root权限安装软件,查看了很多博客,并实践安装成功.大致总结了一下samtools的安装过程,仅供大家参考,如有不对的地方,欢迎指正~ samtools安装过程中依赖于lzm ...

  4. Solved: RDP Disconnected – Error Code 2825 mremote

  5. svn2个小问题的解决

    Revision file (r615) lacks trailing newline /svndata/your_project/db/revs /svndata/your_project/db/r ...

  6. Unity3D 中 脚本(MonoBehaviour) 生命周期WaitForEndOfFrame需要注意的地方

    首先看看MonoBehaviour的生命周期 先上个图(来源 http://blog.csdn.net/qitian67/article/details/18516503): 1.Awake 和 St ...

  7. RequestMethod.Post&RequestMethod.GET

    1.GET和POST都是将数据送到服务器 2.GET通过URL请求传递用户的数据,将表单各字段名称以及内容,以成对的字符串连接,置于action所指程序的URL后:POST方法通过HTTP post ...

  8. 【Selenium】【BugList9】windows环境，fp = open("./"+ time.strftime("%Y-%m-%d %H:%M:%S") + " result.html",'wb')，报错：OSError: [Errno 22] Invalid argument: './2018-09-05 10:29:32 result.html'

    [代码] if __name__=="__main__": suite = unittest.TestSuite() suite.addTest(Baidu("test_ ...

  9. 索引Log

    最左前缀原则 B+ 主键索引ID =>ID树 非主键索引K 先K树=>ID树 主键自增索引

  10. String工具类

    String工具类 问题描述 MAVEN依赖 代码成果 问题描述 很多时候我们需要对字符串进行很多固定的操作,而这些操作在JDK/JRE中又没有预置,于是我们想到了apache-commons组件,但 ...