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. vue3 vite等笔记

    1.脚手架 vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求.缺点就是配置复杂,甚至有公司有专门的webpack工程师专门做配置,另外就是webp ...

  2. JS篇(003)-请用 js 去除字符串空格？

    答案:replace 正则匹配方法.str.trim()方法.JQ 方法:$.trim(str)方法 解析: 方法一:replace 正则匹配方法 去除字符串内所有的空格:str = str.repl ...

  3. shell语法2-默认变量、数组

    一:文件参数变量 1.在执行shell脚本时,可以向脚本传递参数.$1是第一个参数,$2是第二个参数,以此类推.特殊的,$0是文件名(包含路径) #! /bin/bashecho "文件名: ...

  4. zk中控考勤机默认密码登陆

    网络空间搜索: app="ZKTECO-考勤管理系统" 找到某一个考勤系统 进行弱口令登陆:admin/****** 成功! End!!!

  5. RTSP配置海康相机视频

    RTSP:即时串流协定(Real Time Streaming Protocol,RTSP)是用来控制声音或影像的多媒体串流协议,并允许同时多个串流需求控制. 1.获取海康相机ip地址 (1).下载海 ...

  6. DAST 代码分析

    DA部分 输入图片大小: images.size: torch.Size([1, 3, 512, 1024])labels.size: torch.Size([1, 512, 1024]) input ...

  7. Flutter 新建项目

    一.打开VSCode,点击侧边栏扩展按钮,搜索flutter,安装Flutter和Dart 二.按command+shift+P,输入flutter,选择Flutter:New project,新建项 ...

  8. Python调用钉钉群机器人发送群消息

    1.首先需要一个钉钉群,群才有机器人 2.群设置->智能群助手->添加机器人->自定义机器人 3.添加自定义机器人,配置如下:给机器人命名,选择加签.保存机器人的秘钥.Webhook ...

  9. svg矢量二维码加盖在PDF文件中

    正常行驶的bitmap类型的二维码格式,加载到PDF中,将会导致二维码失真,无法扫描. 矢量图可根据尺寸大小进行调节,不会出现失真模糊情况 所用依赖 <PackageReference Incl ...

  10. 微信小程序主包和分包的资源可以相互引用吗

    了解主包.分包 整个小程序所有分包大小不超过20M;单个分包/主包大小不能超过 2M 主包: a. 放置默认启动页面&&tabBar页面, 以及一些分包需要用到的公共资源(如wxss. ...