一、页面代码

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">

<meta name="description" content="this is my page">

<meta name="content-type" content="text/html; charset=UTF-8">

<body>

    <table>

        <tr>

            <td>Login:</td>

            <td><input id="username" type="text" name="login"></td>

        </tr>

        <tr>

            <td>Password:</td>

            <td><input type="password" name="password" id="password"></td>

        </tr>

        <tr>

            <td colspan="2"><input type="submit"></td>

        </tr>

    </table>

</body>

</html>

二、JavaScript代码

<script type="text/javascript">

    var xmlHttp;

    $(document).ready(function() {

        $("#username").keyup(function() {

            var value = $(this).val();

            xmlHttp = createXMLHttp();

            var url = "MyServlet1?username=" + value;

            xmlHttp.open("GET", url, true);

            xmlHttp.onreadystatechange = callback;

            xmlHttp.send(null);

        });

    });

    function createXMLHttp() {

        var xmlHttp;

        if (window.XMLHttpRequest) {

            xmlHttp = new XMLHttpRequest();

        } else {

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

        }

        return xmlHttp;

    }

    var callback = function() {

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

            var result = xmlHttp.responseText;

            if (result == "已使用")

                $("#username").css("border-color", "red");

            else

                $("#username").css("border-color", "green");

        } else {

            alert("出错");

        }

    }

</script>

三、servlet代码

package com.yh.myServlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class MyServlet1 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override

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

        // TODO Auto-generated method stub

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out = response.getWriter();

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

        System.out.println(userName);

        if (userName.equals("yh")) {

            out.print("已使用");

        } else {

            out.print("可使用");

        }

    }

}

四、配置servlet

  <servlet>

      <servlet-name>MyServlet1</servlet-name>

      <servlet-class>com.yh.myServlet.MyServlet1</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>MyServlet1</servlet-name>

      <url-pattern>/Pages/MyServlet1</url-pattern>

  </servlet-mapping>

注：这个Pages是根据html页面的路径设置的

Ajax异步更新网页（使用原生JavaScript）的更多相关文章

  1. Ajax异步更新网页（使用jQuery）

    jquery下载链接:https://pan.baidu.com/s/1KWQVpPV-RwhwGeBaXbZdVA 提取码:vn7x 一.页面代码 <!DOCTYPE html> < ...

  2. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  4. Vue 父组件ajax异步更新数据，子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  5. 使用Ajax选取ListBox的值异步更新视图，并作为表单值提交

    一.控制器返回一个ViewBag MultiSelecList值. public ActionResult Create() { ViewBag.ReviewIndexItems = new Mult ...

  6. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  7. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  8. 关于我们ajax异步请求的方法与知识

      做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...

  9. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

随机推荐

  1. 一次Java线程池误用（newFixedThreadPool）引发的线上血案和总结

    一次Java线程池误用(newFixedThreadPool)引发的线上血案和总结 这是一个十分严重的线上问题 自从最近的某年某月某天起,线上服务开始变得不那么稳定(软病).在高峰期,时常有几台机器的 ...

  2. 12组-Alpha冲刺-2/6

    一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15535639.html 小组人数:10人 二.冲刺概况汇报 侯钦凯 过去两天完成 ...

  3. go微服务框架Kratos笔记（三）引入GORM框架

    介绍 GORM是一个使用Go语言编写的ORM框架.中文文档齐全,对开发者友好,支持主流数据库. GORM官方文档 安装 go get -u github.com/jinzhu/gorm 在kratos ...

  4. 程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图

    前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...

  5. [cf1427E]Xum

    假设$x$的最高位为$2^{t}$(即$2^{t}\le x<2^{t+1}$),并构造出$y=2^{t}x\oplus x$,不难发现两者仅在第$t$位上均为1,那么根据异或的性质可得$y=( ...

  6. [loj6033]棋盘游戏

    将棋盘黑白染色,即构成一张二分图 将状态用一张二分图$G$和一个点$x\in V$描述(分别为仍未被经过的点的导出子图和当前棋子所在位置),并称将要移动棋子的一方为先手 结论:先手必胜当且仅当$x$一 ...

  7. Codeforces 1455G - Forbidden Value（map 启发式合并+DP）

    Codeforces 题面传送门 & 洛谷题面传送门 首先这个 if 与 end 配对的结构显然形成一个树形结构,考虑把这棵树建出来,于是这个程序的结构就变为,对树进行一遍 DFS,到达某个节 ...

  8. Mysql 预处理 PREPARE以及预处理的好处

    Mysql 预处理 PREPARE以及预处理的好处 Mysql手册 预处理记载: 预制语句的SQL语法在以下情况下使用:   · 在编代码前,您想要测试预制语句在您的应用程序中运行得如何.或者也许一个 ...

  9. W10: Warning: Changing a readonly file使用vi/vim报错问题解决

    使用vi/vim编辑文件的时候出现W10: Warning: Changing a readonly file报错 解决方法: 一.强制保存退出 :wq! 二.ll 查询文件属主,使用属主赋予权限 c ...

  10. Python基础之数字类型内置方法

    目录 1. 整型内置方法(int) 2. 浮点型内置方法 3. 常用操作 1. 整型内置方法(int) 用途:年龄,号码,等级等 定义: age = 18 常用操作 # 算数运算.比较运算 age = ...