Javaweb - 13 - AJAX

发送请求的几种方式

  1. 浏览器的地址框中输入地址,回车

  2. html --> head --> scrip / link

img 自动发送请求,无需手动触发

  1. a 标签,form 表单标签

需要手动控制提交产生,且往往需要在新的页面上获得响应信息

  1. 运行 JS 代码产生请求

我们通过事件触发 JS 代码运行,发送请求

响应后我们可以通过 JS 代码动态处理是否要跳转

或者要将响应的信息通过 DOM 编程显示在 dom 树中

通过第 4 中发送请求的方法,就可以实现如下功能:

当用户在注册页面中,用户名为 zhangsan 的时候,这个事件会触发 JS 代码运行,向后端发送请求,可以将响应的信息通过 DOM 编程显示在 dom 树中

什么是 AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 不是新的编程语言,而是一种使用现有标准的新方法

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据,并更新部分前端显示页面的内容

AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行

XMLHttpRequest 只是实现 AJAX 的一种方法(原生 JS 的实现方式)


同步交互:发送方发出请求后,必须等待接收方处理并返回,在此期间,发送方会处于"阻塞"状态,无法继续执行其他操作,直到收到响应后才会继续执行。

异步交互:发送方发出请求后,无需等待接收方返回响应,而是继续执行后续操作。接收方处理完请求后,会通过某种方式,将结果反馈给发送方,双方操作在时间上可以"不同步"。

如何实现 AJAX 请求

index.html:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function getMessage() {
        // 实例化一个 xmlHttpRequest
        var request = new XMLHttpRequest();
        // 设置 xmlHttpRequest 对象的回调函数
        // request.readState 1 2 3 4
        // request.status 响应状态码 响应行状态码
        request.onreadystatechange = function (){
            if (request.readyState == 4 && request.status == 200) {
                // 接收响应结果,处理结果
                // 将响应放到指定的位置
                var inputEle = document.getElementById("message");
                inputEle.value = request.responseText;
            }
        }
        // 设置发送请求的方式和请求的资源路径
        request.open("GET", "/hello?username=zhangsan");
        // 发送请求
        request.send();
    }
</script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type = "text" id = "message" />
</body>
</html>

helloServlet.java:

java 复制代码
@WebServlet("/hello")
public class helloServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收参数
        String username = req.getParameter("username");
        // 做出响应
        resp.getWriter().write("hello" + username);
    }
}

完!

相关推荐
驭风少年君1 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说2 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友2 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行2 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安2 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-3 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada3 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚3 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu3 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript