• AJAX之GET与POST

    1.XMLHttpRequest

    1.1 作用

    在了解使用AJAX发送GET或者POST请求之前，我们先来了解一下XMLHttpRequest对象。

    • XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它进行
    • XMLHttpRequest对象是浏览器内置对象，大部分浏览器都是支持XMLHttpRequest对象的
      请添加图片描述

    1.2 常见方法

    方法描述
    abort()取消当前请求
    getAllResponseHeaders()返回头部信息
    getResponseHeader()返回特定的头部信息
    open(method, url, async, user, psw)规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
    send()将请求发送到服务器，用于 GET 请求
    send(string)将请求发送到服务器，用于 POST 请求
    setRequestHeader()向要发送的报头添加标签/值对

    1.3 常见属性

    属性描述
    onreadystatechange定义当 readyState 属性发生变化时被调用的函数
    readyState保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
    responseText以字符串返回响应数据
    responseXML以 XML 数据返回响应数据
    status返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
    statusText返回状态文本（比如 “OK” 或 “Not Found”）

    2.GET

    2.1 步骤

    使用AJAX向服务器发送请求有四步：

    • 创建AJAX核心对象XMLHttpServlet

    • 注册回调函数

    • 开启通道

    • 发送请求

    2.2 例子

    前端代码：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax get请求title>
head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
                        // 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）
                        // innerHTML属性是javascript中的语法，和ajax的XMLHttpRequest对象无关。
                        // innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）
                        //document.getElementById("myspan").innerHTML = this.responseText
                        document.getElementById("mydiv").innerHTML = this.responseText
                        // innerText也不是AJAX中的，是javascript中的元素属性，和XMLHttpRequest无关。
                        // innerText也是设置元素中的内容，但是即使后面是一段HTML代码，也是将其看做一个普通字符串设置进去。
                        //document.getElementById("myspan").innerText = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }
    }
script>
<button id="btn">发送ajax get请求button>
<span id="myspan">span>
<div id="mydiv">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    这样当我们点击“发送ajax get请求”这个按钮，就会发送AJAX请求到服务器执行对应Servlet类。

    package com.bjpowernode.ajax.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxrequest2")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        out.print("用户名已存在！！！");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    即将AjaxRequest2Servlet中的响应内容，根据前端代码中的第22行作为HTML语言解析到浏览器实现对页面的局部更新。

    2.3 GET缓存问题

    对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。

    在HTTP协议中，GET请求会留下缓存，而POST请求不会留下缓存。而低版本的IE浏览器中，当第二次访问一个网站时，就会走缓存。

    缓存有优点也有缺点：

    • 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
    • 缺点：无法实时获取最新的服务器资源。

    解决办法：

    可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。也可以用随机数代替时间戳。

    3.POST

    AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

    // 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    password = document.getElementById(“password”).value;
    // send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
    xhr.send(“username=”+username+“&password=”+password)

    

    • 1
  • 相关阅读:
    Android Material Design之BottomAppBar(八)
    postgresql源码学习（36）—— 事务日志11 - 日志归档
    【T3】畅捷通T3凭证打印修改边距后，打印效果没有任何变化。
    基于微信小程序+Java+Vue+MySQL的菜谱分享小程序
    Oracle运维常用SQL一览
    java通用xls导出设计
    leetcode:714. 买卖股票的最佳时机含手续费
    项目中多级缓存设计实践总结
    SPA项目动态树、数据表格、分页、CRUD、表单验证
    《Python 语音转换简易速速上手小册》第5章 音频数据处理（2024 最新版）
  • 原文地址：https://blog.csdn.net/qq_52002412/article/details/126318855