AJAX相关知识复习

简而言之，就是可以用AJAX+HTML代替JSP页面，也可以进行异步交互，更新部分界面

Ajax案例

后端代码就是一个servlet文件，前端页面的代码也不是很常用，可以在下面这个网址这里找到相关代码：https://www.w3school.com.cn/js/js_ajax_intro.asp

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    //创建核心对象

    var xhttp;

    if (window.XMLHttpRequest) {

        xhttp = new XMLHttpRequest();

    } else {

        // code for IE6, IE5

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

    }

    //发送请求

    xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet");

    xhttp.send();

    //获取响应

    xhttp.onreadystatechange = function() {

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

                alert(this.responseText);

        }

    };

</script>

</body>

</html>

相关的创建核心对象、发送请求、获取响应的代码操作在上述网址中均能找到！

AJAX案例------验证用户是否存在

后端代码：

//selectUserServlet.java

package org.example.web.Ajax;

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

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String username=req.getParameter("username");

        boolean flag=true;

        resp.getWriter().write(""+flag);

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        this.doGet(req,resp);

    }

}


<!--register.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册界面</title>

</head>

<body>

<center>

    <tr>

        已有账号？<a href="index.jsp">登录</a>

    </tr>

    <form action="registerServlet" method="post">

        <tr>

            <td>用户名：</td>

            <td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>

            <br>

            <div id="errorUsername">${register_msg}</div>

        </tr>

        <p>

            <tr>

                <td>密码：</td>

                <td><input type="text" name="password" placeholder="请输入密码"></td>

            </tr>

        <p>

            <tr>

                <td>验证码：</td>

                <td>

                    <input name="checkCode" id="checkCode" type="text">

                </td>

                <td><img src="checkServlet" id="checkCodeImg"></td>

                <td><a href="#" id="changeImg">看不清？</a></td>

            </tr>

        <p>

            <tr>

                <button type="submit" value="提交">提交</button>

            </tr>

    </form>

    <script>

        document.getElementById("changImg").onclick=function(){

            document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();

        }

    </script>

</center>

<script>

    //点击事件

    document.getElementById("username").onblur=function(){

        var username=this.value;

        //创建核心对象

        var xhttp;

        if (window.XMLHttpRequest) {

            xhttp = new XMLHttpRequest();

        } else {

            // code for IE6, IE5

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

        }

        //发送请求

        xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet?username="+username);

        xhttp.send();

        //获取响应

        xhttp.onreadystatechange = function() {

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

                //alert(this.responseText);

                //判断

                if(this.responseText=="true"){

                    document.getElementById("errorUsername").style.display='';

                }else{

                    document.getElementById("errorUsername").style.display='none';

                }

            }

        };

    }

</script>

</body>

</html>

核心代码在此：

Javaweb基础知识复习------AJAX的更多相关文章

  1. JavaWeb基础知识总结

    JavaWeb基础知识总结.   1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供 ...

  2. 超详细的Java面试题总结（四 ）之JavaWeb基础知识总结

    系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java ...

  3. spring 基础知识复习

    spring是一个分层架构,由 7 个定义良好的模块组成.Spring 模块构建在核心容器之上,核心容器定义了创建.配置和管理 bean 的方式. 组成spring框架的每个模块(或组件)都可单独存在 ...

  4. JavaScript进阶【三】JavaScript面向对象的基础知识复习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ZYNQ笔记（0）：C语言基础知识复习

    ZYNQ的SDK是用C语言进行开发的,C语言可以说是当今理工类大学生的必备技能.我本科学C语言时就是对付考试而已,导致现在学ZYNQ是一脸懵逼.现在特开一帖,整理一下C语言的基础知识. 一.定义 1. ...

  6. [Java面试三]JavaWeb基础知识总结.

    1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供外界访问的Web资源分为: • 静 ...

  7. JavaWeb基础知识

    一.WEB基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web ...

  8. MySQL数据库基础知识复习

    现在是2020年寒假,这也是新年写的第一篇博客,用了十几天的时间自学了数据库基础部分,想总结一下得失同时并通过写博客来复习前面学的知识点. 个人: 1.本来是计划一周学完基础部分的178p但没能完成这 ...

  9. JavaWeb 基础知识补充

    软件架构 1. C/S: Client/Server 客户端/服务器端         * 在用户本地有一个客户端程序,在远程有一个服务器端程序         * 如:QQ,迅雷...        ...

  10. android基础知识复习——RelativeLayout布局属性、背景、半透明设置（XML设置）

    转自:http://blog.csdn.net/fansongy/article/details/6817968 复习布局与XML,写了一个空的登录界面.XML的注释我写在当行的后面了.程序运行图: ...

随机推荐

  1. Unity 设计模式-简单工厂模式和其他好用的通用代码块

    1. 2.加法操作类 using System.Collections; using System.Collections.Generic; using UnityEngine; //加法操作类 pu ...

  2. Mysql5.5命令行修改密码（免安装）

    1. 命令行运行 mysql -uroot -p  my.ini文件设置跳过密码验证(详情见https://www.cnblogs.com/chaoge666/p/13626037.html) 2.输 ...

  3. 「SOL」射命丸文的笔记 (洛谷)

    讲题人:"这是一个很经典的模型,大家应该都会" 我:"???" # 题面 给出 \(m\),求所有 \(m\) 个点的有标号强联通竞赛图的哈密顿回路数量的平均数 ...

  4. 由浇花工具开始IOT物联网平台之开始前言篇【1】

    在2020年时,突然有个想法,就是做个浇花工具,因为平时喜欢养花,有时忘记浇花,有时感觉手动浇花太麻烦,所以做个这个小玩意,是用.NET 开发的WinForm小程序,来控制单片机,带动水泵浇花,还可以 ...

  5. node.js发送短信验证码(附带60秒倒计时插件)

    推荐一个简单且功能齐全的发送短信验证码接口1.安装下载后的SDK只包含一个zhenzisms.js文件,直接导入到工程中即可使用.下载 2.用法引入模块 const zhenzismsClient = ...

  6. Python-pytest -> 在自动化测试中，如何切换不同的测试环境

    在构建自动化测试的脚本时候,我们可能会有不同环境的测试需求,如何实现在不同的测试环境之间切换呢?接下来介绍的这种方法,可以自定义命令行参数,从而根据不同的参数值实现不同环境的切换. 解决办法: 使用h ...

  7. rdlc报表需要显示的时间格式

    [仅取当前时间的年月日]=FormatDateTime(System.DateTime.Now.ToLongDateString().ToString()) [仅取数据库保存的时间的年月日]=form ...

  8. c# 串口 转发到 TCP 客户端

    前言 对于数据流Stream的转发.在.net 3.5之后的版本只需要 stream.CopyTo(stream). 目前只是为了方便调用测试,花了一点点时间做了一个简单的调用demo 完整代码 us ...

  9. 给linux串口，增加登录密码

    一.密码更改 1.在linux系统上,输入passwd,输入需要设定的密码,密码文件保存在/etc/passwd里面. 2.把/etc/passwd文件拷贝出来,放到rootfs的etc/目录下,实现 ...

  10. HTTP协议中的长连接和短链接

    一.概念 HTTP长连接,也称持久连接,是使用同一个TCP连接来发送和接受多个HTTP请求/应答,而不是位每一个新的请求/应答打开新的TCP连接.这种方式由于通信连接一直存在,此种方式常用于P2P通信 ...