实现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. Replace To Make Regular Bracket Sequence

    Replace To Make Regular Bracket Sequence You are given string s consists of opening and closing brac ...

  2. IIS调试ASP.NET Core项目

    IIS调试ASP.NET Core项目 新建一个ASP.NET Core Web项目,选择API模板或随便一个模板都行 新建一个名为localhost的发布(没试过远程主机,或许也可以),主要设置如下 ...

  3. python 练习4

    题目为信用卡消费管理系统: 主程序:main.py #!usr/bin/env python # encoding: utf-8 import conf,sys,time,re,os import j ...

  4. WCF调错方法

    1.在VS cmd里,输入wcftestclient.exe 2.添加Service服务. 3.点击要测试的方法,输入参数,点击Invoke. 4.如果错误信息很模糊,则修改WCF程序所在的Web.c ...

  5. 在 ASP.NET Core 中发送邮件遇到的坑_学习笔记

    功能需求 因为项目需要有个忘记密码验证邮箱再重新修改密码的功能,然后我选用了很简单的一个方案,通过验证登录用户的邮箱然后发送邮件,通过这个邮件发送的链接地址来最后实现密码修改的小功能. 项目环境及实现 ...

  6. 猜数字游戏；库的使用：turtle

    myNum = print('猜字游戏\n') while True: guess = int(input('请输入一个数:')) if guess > myNum: print('不对哦猜大了 ...

  7. django的视图函数

    一.视图函数view 视图函数是接收一个请求(request对象),并返回响应的函数 1. HttpResponse响应请求 这个方法是返回字符串一类的,可以识别标签 2. render响应请求 re ...

  8. 贝叶斯公式52张牌猜黑桃A策略

    贝叶斯公式52张牌猜黑桃A策略 考虑有208平行世界,其中有4个世界(1/52)的黑桃A方在第一张牌的位置,余下204个世界中,有4个世界的黑桃A在第2张牌的位置,4个世界在第3张牌的位置..... ...

  9. Django学习（一）连接mysql

    python3.6 Django2.0 几个改动的点: 1)setting: 2)__init__.py import pymysql 然后再重启server python manage.py run ...

  10. 使用Calibre自带工具批量转换电子书格式

    原来使用Calibre转换电子书格式都是先导入,再转换,再把转换后的文件复制出来,最后再改名. 虽然可以批量导入和转换,但复制和改名要一个处理.后来发现Calibre自带命令行转换工具,就写了一个批处 ...