AJAX——HttpRequest对象、get/post请求

活动地址：CSDN21天学习挑战赛

文章目录

AJAX（Asynchronous Javascript And Xml）

AJAX（Asynchronous Javascript And Xml）

传统请求及缺点

传统的请求都有哪些？
- 直接在浏览器地址栏上输入URL。
- 点击超链接
- 提交form表单
- 使用JS代码发送请求
  - window.open(url)
  - document.location.href = url
  - window.location.href = url
  - …
传统请求存在的问题
- 页面全部刷新导致了用户的体验较差。
- 传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）

AJAX概述

AJAX不能称为一种技术，它是多种技术的综合产物。
AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
什么是异步，什么是同步？
- 假设有t1和t2线程，t1和t2线程并发，就是异步。
- 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
- AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。

XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。
创建XMLHttpRequest对象
- ```
var xhr = new XMLHttpRequest();
1
```
XMLHttpRequest对象的方法

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

XMLHttpRequest对象的属性

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

AJAX GET请求

发送AJAX get请求，前端代码：

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请求，后端代码：

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;

/**
 * @program: 代码
 * @ClassName: AjaxRequest2Servlet
 * @version: 1.0
 * @description:
 * @author: bjpowernode
 * @create: 2022-05-13 10:46
 **/

@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
24
25
26
27
28
29
30
31
32
33
34

AJAX get请求如何提交数据呢？
- get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value…
- 其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。

AJAX GET请求的缓存问题

对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
什么是AJAX GET请求缓存问题呢？
- 在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
- 发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。
GET请求缓存的优缺点：
- 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
- 缺点：无法实时获取最新的服务器资源。
浏览器什么时候会走缓存？
- 第一：是一个GET请求
- 第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？
- 可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
- 可以采用时间戳：“url?t=” + new Date().getTime()
- 或者可以通过随机数：“url?t=” + Math.random()
- 也可以随机数+时间戳…

AJAX POST请求

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

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型（必须在open之后）。模拟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

实现一个案例：使用AJAX POST请求实现用户注册的时候，用户名是否可用。（验证用户名是否可以注册）实现步骤如下：
- 在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送AJAX POST请求，提交用户名
- 在后端，接收到用户名，连接数据库，根据用户名去表中搜索
- 如果用户名已存在
  - 后端响应消息：对不起，用户名已存在（在前端页面以红色字体展示）
- 如果用户名不存在
  - 后端响应消息：用户名可以使用（在前端页面以绿色字体展示）
实现一个案例：用户点击按钮之后，发送AJAX请求，显示学生列表。
- 在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。这种方式不好，不应该在java代码中编写HTML代码，能否在java程序中直接向前端响应数据？可以，可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析

相关阅读:
Vue---8种组件传值方式总结，总有一款适合你
 如何使用uiautomation开发一套自动朋友圈自动点赞的桌面应用
 机械设计基础试题3
学习 OpenStack 的新指南和教程的六个建议
 非洲数十个金融组织遭遇黑客攻击
 web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
浅析网络编程
 Apache Airflow (十) ：SSHOperator及调度远程Shell脚本
 opencv
Javaweb：HTTP协议与Web服务端开发环境（二）
原文地址：https://blog.csdn.net/m0_61163395/article/details/126272114