实现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. STS中web.xml配置文件

    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " ...

  2. OO前三次作业分析

    一,第一次作业分析 度量分析: 第一次的oo作业按照常理来说是不应该有这么多的圈复杂度,但是由于第一次写的时候,完全不了解java的相关知识,按照c语言的方式来写,完全的根据指导书的逻辑,先写好了正确 ...

  3. join查询优化

    更新使用过滤条件中包括自身的表 此方法不能无法在mysql中使用 `UPDATE user1 SET over='齐天大圣' WHERE user1.user_name IN ( SELECT b.u ...

  4. 微信小程序的一些小知识点

    1. <text>hello</text> 只有包含在<text>标签内的文字,在手机上才可以长按选中. 2. 单位px:自适应rpx = 1:1 物理像素除以2得 ...

  5. 离线eclipse添加web工程

    下载了eclipse,先写的后台程序,后来写前台程序的时候发现没有 新建->web dynamic project,如下方式添加: 帮助->安装新软件,在work with中选择版本对应的 ...

  6. AndroidStudio 问题点 - app:preFUNDebugAndroidTestBuild

    Error:Execution failed for task ':app:preFUNDebugAndroidTestBuild'. >Conflictwith dependency 'com ...

  7. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  8. hprose for php

    1.客户端和服务器简单DEMO 通过工厂方法 create 创建客户端 $client = \Hprose\Client::create($uriList = null[, $async = true ...

  9. Self Attention需要掌握的基本原理

    字面意思理解,self attention就是计算句子中每个单词的重要程度. 1. Structure 通过流程图,我们可以看出,首先要对输入数据做Embedding 1. 在编码层,输入的word- ...

  10. Maven捆绑TestNG实现测试自动化执行、部署和调度

    一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...