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. WindowsServer2012搭建FTP服务器站点

    公司需要搭建一个FTP服务器给银行推送账单,这个文章整理的比较详细,可以参考 数据来源: https://blog.csdn.net/u010483330/article/details/125931 ...

  2. Elasticsearch Windows版安装配置

    Elasticsearch简介 Elasticsearch是一个开源的搜索文献的引擎,大概含义就是你通过Rest请求告诉它关键字,他给你返回对应的内容,就这么简单. Elasticsearch封装了L ...

  3. 【Docker】基本使用

    服务 启动docker systemctl start docker 重启docker systemctl restart docker 停止docker systemctl stop docker. ...

  4. (已解决）问题：windows下，为THINKPHP配置apache虚拟主机。

    1. 环境和需求 win10_x64,php7,apache24,thinkphp5. 现在,我要用apache给THINKPHP的一个项目设置一个虚拟主机,需要配置. 2. 步骤 a. 首先,找到h ...

  5. bgp多线互联

    BGP(边界网关协议)主要用于互联网AS(自治系统)之间的互联,BGP的最主要功能在于控制路由的传播和选择最好的路由. 中国网通 .中国电信.中国铁通.教育网和一些大的民营IDC运营商都具有AS号,全 ...

  6. 第08组Beta冲刺（3/4）

    队名 八组评分了吗 组长博客链接(2分) 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 重新分配小组及个人任务. ...

  7. 应用Sequelize创建项目

    创建项目: 第一步:安装express-generator -g 第二步:安装ejs模板  express --view=ejs 项目名 第三步:安装依赖进入项目 npm i ------------ ...

  8. win 端口占用

    netstat -aon|findstr "8080" 查看端口 TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING 11468 TCP 172.27.232 ...

  9. 为什么你需要升级 pip

    更新软件版本可以修复bug,增加新功能和提升性能.例如,NumPy 1.20 添加了类型注释,并在可能的情况下通过使用SIMD来提高性能.如果您要安装NumPy,则可能要安装最新版本. 相反,如果您使 ...

  10. Linux SMB传输文件命令

    如何将linux服务器上的文件上传到华为NAS 如何登录华为NAS 首先登陆smb服务器, 不要账户名密码登录: smbclient -N \/\/192.168.0.1/共享 文件上传命令: 注意: ...