AJAX(一）HTTP协议(请求响应报文)，AJAX发送请求，请求问题处理

server/2024/9/22 23:51:07/
http://www.w3.org/2000/svg" style="display: none;">

文章目录

  • 一、AJAX
  • 二、HTTP协议
    • 1. 请求报文
    • 2. 响应报文
  • 三、AJAX案例准备
    • 1. 安装node
    • 2. Express搭建服务器
    • 3. 安装nodemon实现自动重启
  • 四、AJAX发送请求
    • 1. GET请求
    • 2. POST请求
      • (1) 配置请求体
      • (2) 配置请求头
    • 3. 响应JSON数据的两种方式
      • (1) 手动，JSON.parse()
      • (2) 设置xhr.responseType
  • 五、AJAX请求问题处理
    • 1. IE浏览器缓存的问题
    • 2. AJAX请求超时与网络异常
    • 3. 手动取消请求
    • 4. 请求重复发送的问题

ajax在网页不刷新的情况下发送http请求，获取http响应。

可实现懒加载，用则加载，不用则不加载

一、AJAX

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许根据用户事件来更新部分页面内容。

缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO (Search Engine Optimization，搜索引擎优化) 不友好。网页当时的内容爬虫是爬不到的，比如要在商品列表，爬取某一商品的详细信息。此时页面并没有这个详细信息，详细信息是点击商品之后通过ajax请求获取到的。

二、HTTP协议

HTTP（hypertext transport protocol）协议(超文本传输协议)，协议详细规定了浏览器和万维网服务器之间互相通信的规则。这个协议其实就是一种规定，通信都按着这个规定来。

1. 请求报文

客户端向浏览器发送的内容叫请求报文,请求报文包括四部分：
①请求行 : 请求类型(GET/POST) + URL地址 + HTTP协议版本(HTTP/1.1)
②请求头：(内容不用记，记得格式是键值对就行)

Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83

③空行：必须要有的
④请求体：若为GET请求则为空。若为POST请求，可以不为空

2. 响应报文

浏览器向客户端返回的结果叫响应报文,也包括四部分：
①响应行 : HTTP协议版本(HTTP/1.1) + 响应状态码(200) + 响应状态字符串(ok)
②响应头：(格式与请求头一样)

Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip

③空行：必须要有的
④响应体：服务器的返回结果

三、AJAX案例准备

1. 安装node

学vue的时候安装过，具体见博客：Vue安装脚手架及一些配置

2. Express搭建服务器

用ajax向服务器发请求。我们就用express搭建一个简易的服务器。
(1) 先初始化一下项目
在ajax文件夹下执行下面的命令，生成package.json文件

npm init --yes

(2) 安装express
在ajax文件夹下执行命令，安装express

npm i express

(3) 配置服务器
创建文件夹AJAX/express.js:

//  1. 引入express
const express = require('express')
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装,response 是对响应报文的封装
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域,（跨域这里先这样设置）response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('HELLO AJAX')
})// 4. 监听端口服务器
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中....');
})

目前的目录结构为：
https://i-blog.csdnimg.cn/direct/f7c31d0d746b45ff9b62f4822e44c172.png#pic_center" alt="在这里插入图片描述" width="300" />
(4) 启动服务器
注意要在该js文件所在的文件夹下打开终端，否则运行命令时找不到这个js文件
https://i-blog.csdnimg.cn/direct/d0807716f0ed4bc799465340df057942.png#pic_center" alt="在这里插入图片描述" width="350" />
在终端输入命令，启动服务器，
https://i-blog.csdnimg.cn/direct/ce723ec9220643a3bc65f786f2f5f426.png#pic_center" alt="在这里插入图片描述" width="400" />
网页运行测试：
https://i-blog.csdnimg.cn/direct/0174a7f659da430e89d5ebfb74097f2a.png#pic_center" alt="在这里插入图片描述" width="300" />

3. 安装nodemon实现自动重启

每次修改服务器的js文件都要重启服务器，很麻烦，安装nidemon可以自动重启服务器。
安装：npm install -g nodemon
启动服务器：nodemon 文件名.js
https://i-blog.csdnimg.cn/direct/ffee98f8235e42e28c71d50fd0fdcade.png#pic_center" alt="在这里插入图片描述" width="500" />

四、AJAX发送请求

XMLHttpRequest, AJAX 的所有操作都是通过该对象进行的。

1. GET请求

在服务器文件中配置get响应接口，再往这个接口发请求。
server.js:

app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('HELLO AJAX')
})

页面结构：
https://i-blog.csdnimg.cn/direct/142a7d79a2204cec9502080a961891cf.png#pic_center" alt="在这里插入图片描述" width="300" />

  // 获取元素const btn = document.querySelector('#btn')const div = document.querySelector('#content')// 监听点击事件btn.addEventListener('click', () => {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化，设置请求方法和urlxhr.open('GET', 'http://localhost:8000/server');// 3. 发送请求xhr.send()// 4. 事件绑定处理服务器返回的结果// readystate是xhr属性，表示状态0，1，2，3，4 当状态改变时这个函数被调用xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 判断响应码 200 404 403// 响应码是2xx，则请求成功if (xhr.status >= 200 && xhr.status < 300) {console.log('状态码:', xhr.status);console.log('状态字符串:', xhr.statusText);console.log('响应头:', xhr.getAllResponseHeaders());console.log('响应体:', xhr.response);// 将响应结果渲染到页面div.innerHTML = xhr.response}}}})

四个状态值分别表示：
0：未初始化；1：open方法已被调用；2：send方法已被调用
3：服务端返回部分结果；4：服务端返回全部结果；
https://i-blog.csdnimg.cn/direct/3858e61aaa364292b5ab751934618af9.png#pic_center" alt="在这里插入图片描述" width="300" />
GET请求携带参数的方式：url?a=10&b=20&c=30，参数会成为请求地址的一部分
https://i-blog.csdnimg.cn/direct/fab8521d39ea45048f1585f92b8d51a7.png#pic_center" alt="在这里插入图片描述" width="600" />

2. POST请求

(1) 配置请求体

POST请求设置请求体在send()函数里设置，可配置一些请求参数。这样参数不会成功地址URL的一部分。请求体里的内容格式可以随便写，前提是服务端要有对应的处理方式。

// 发送POST请求
btnPost.addEventListener('click', () => {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化，设置请求方法和urlxhr.open('POST', 'http://localhost:8000/server');// 3. 发送请求 请求体可以是任意形式// xhr.send(1234567)// xhr.send('a:100&b:200&c:300')xhr.send('a=100&b=200&c=300')// 4. 处理服务器返回的结果xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 请求成功if (xhr.status >= 200 && xhr.status < 300) {div.innerHTML = xhr.response}}}
})

server.js配置post请求接口

app.post('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('HELLO AJAX POST')
})

(2) 配置请求头

在open方法下写setRequestHeader属性，配置请求头
https://i-blog.csdnimg.cn/direct/ebc3f0cd34d4418693309877adadd433.png#pic_center" alt="在这里插入图片描述" />
能否发送请求头，能否发送自定义的请求头，都需要服务器端进行设置。
这里的重点是怎么配置请求头。服务器端的设置不是重点。

server.js：

// all可接收get、post等所有形式的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 接收任何响应头response.setHeader('Access-Control-Allow-Headers', '*')// 设置响应体response.send('HELLO AJAX POST')
})

https://i-blog.csdnimg.cn/direct/c7eb2825a93242378e08888bcbfaca39.png#pic_center" alt="在这里插入图片描述" width="500" />

3. 响应JSON数据的两种方式

服务器：

// all可接收get、post等所有形式的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')const data = { name: 'tom' }// 设置响应体response.send(JSON.stringify(data))
})

客户端：

 // 4. 处理服务器返回的结果xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {console.log('返回结果：', xhr.response); //返回结果： {"name":"tom"}}}}

服务器返回一个JSON数据，如果不处理，浏览器接收到的就是字符串。

(1) 手动，JSON.parse()

https://i-blog.csdnimg.cn/direct/fb5e176fa5cb46b3be9511212ac9d9af.png#pic_center" alt="在这里插入图片描述" width="400" />
https://i-blog.csdnimg.cn/direct/cdacbc4b31ed443ea0d41815bccf596e.png#pic_center" alt="在这里插入图片描述" width="400" />

(2) 设置xhr.responseType

https://i-blog.csdnimg.cn/direct/88e105eaf2c444a7bfd4b45c7c90fb35.png#pic_center" alt="在这里插入图片描述" width="400" />

五、AJAX请求问题处理

1. IE浏览器缓存的问题

server.js

app.all('/ie', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体// response.send('Hello IE')response.send('Hello ie')
})

发送请求，获取响应结果Hello IE；更改server.js的响应体后，IE浏览器再次发送请求，获取到的响应结果还是Hello IE；因此他走的是缓存。
解决方法：
https://i-blog.csdnimg.cn/direct/a8b7adeff2ab4ac4b8568530a37df338.png#pic_center" alt="在这里插入图片描述" width="500" />
在地址URL上配置一个时间戳，这样每次发送请求时，地址都不一样，IE就会认为是新的请求，就不会走缓存了。
https://i-blog.csdnimg.cn/direct/90046d28f7834467a9671b501acaac69.png#pic_center" alt="在这里插入图片描述" />

2. AJAX请求超时与网络异常

timeout 设置请求的时间，请求超过这个时间则会出现请求超时异常；xhr.ontimeout回调函数对请求超时进行处理。
xhr.onerror对网络异常进行处理(比如没网)

btn.addEventListener('click', () => {// 1. 创建对象const xhr = new XMLHttpRequest();// 超时回调，2sxhr.timeout = 2000xhr.ontimeout = function () {alert('请求超时')}// 网络异常回调xhr.onerror = function () {alert('网络出问题了')}// 超时设置xhr.open('GET', 'http://localhost:8000/delay')xhr.send()
})

服务器可写一个定时器模拟请求延时

// 网络请求超时
app.all('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体setTimeout(() => {response.send('Hello')}, 5000)
})

3. 手动取消请求

取消发送请求xhr.abort()；
浏览器端定义两个按钮

 <button id="btn">发送请求</button><button id="cancel">取消发送请求</button>

注意xhr作用域的问题：

 // 获取元素const btn = document.querySelector('#btn')const cancel = document.querySelector('#cancel')let xhr = null// 发送GET请求btn.addEventListener('click', () => {xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8000/cancel')xhr.send()xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}}})// 取消请求cancel.addEventListener('click', () => {xhr.abort()})

https://i-blog.csdnimg.cn/direct/5e73fe9f65e343a68d07f6415296e7c1.png#pic_center" alt="在这里插入图片描述" />
当请求处于发送中状态时，点击取消请求，可取消请求。

4. 请求重复发送的问题

当用户一直点击按钮，一直向服务器发送同一个请求，服务器压力会很大，影响性能。
思路就是在重新要发请求2时，判断是否已经有请求1，如果有，则取消1发送2。

  // 获取元素const btn = document.querySelector('#btn')let xhr = nulllet isSending = false // 是否正在发送// 发送GET请求btn.addEventListener('click', () => {// 如果当前有发送的请求，则取消if (isSending) {xhr.abort()}// 创建对象xhr = new XMLHttpRequest();// 修改标识变量isSending = truexhr.open('GET', 'http://localhost:8000/delay')xhr.send()xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 请求结束isSending = false}}})

http://www.ppmy.cn/server/120019.html

相关文章

PHP：强大的Web开发语言

PHP：强大的Web开发语言

PHP&#xff1a;强大的Web开发语言 一、PHP 简介及优势 PHP 的基本概念 PHP&#xff08;PHP: Hypertext Preprocessor&#xff09;即 “超文本预处理器”&#xff0c;是一种通用开源脚本语言&#xff0c;最初由 Rasmus Lerdorf 于 1994 年创建。它可以在服务器上执行&#xf…
阅读更多...
树与图的深度优先遍历（dfs的图论中的应用）

树与图的深度优先遍历（dfs的图论中的应用）

模板题 846. 树的重心 给定一颗树&#xff0c;树中包含 nn 个结点&#xff08;编号 1∼n&#xff09;和 n−1条无向边。 请你找到树的重心&#xff0c;并输出将重心删除后&#xff0c;剩余各个连通块中点数的最大值。 重心定义&#xff1a;重心是指树中的一个结点&#xff…
阅读更多...
网络爬虫Request静态页面数据获取

网络爬虫Request静态页面数据获取

在现代 Web 开发中，HTTP 请求（Request）是与服务器进行通信的核心操作。无论是在前端还是后端开发中，数据的获取、传递以及处理都离不开请求的应用。特别是在静态页面的数据获取中，使用请求可以将页面变得更加动态和互动，从而大大提升用户体验，使得页面内容更加丰富和灵活…
阅读更多...
【小沐学GIS】blender导入OpenStreetMap城市建筑（blender-osm、blosm）

【小沐学GIS】blender导入OpenStreetMap城市建筑（blender-osm、blosm）

文章目录 1、简介1.1 blender1.2 osm地图 2、OpenStreetMap下载方式2.1 Simple2.2 Overpass API2.3 OSM星球2.4 Geofabrik下载2.5 其他方法2.6 BBBike 3、blender-osm插件3.1 简介3.2 操作 结语 1、简介 1.1 blender https://www.blender.org/ Blender 是一款免费的开源 3D …
阅读更多...
反游戏学（Reludology）：概念、历史、现状与展望？（豆包AI版）

反游戏学（Reludology）：概念、历史、现状与展望？（豆包AI版）

李升伟 以下是关于“反游戏学&#xff08;Reludology&#xff09;&#xff1a;概念、历史、现状与展望”的综述&#xff1a; 一、概念 反游戏学&#xff08;Reludology&#xff09;是一个相对较新且不太常见的概念&#xff0c;目前尚未有统一明确的定义。一般来说&#xf…
阅读更多...
Golang | Leetcode Golang题解之第406题根据身高重建队列

Golang | Leetcode Golang题解之第406题根据身高重建队列

题目&#xff1a; 题解&#xff1a; func reconstructQueue(people [][]int) (ans [][]int) {sort.Slice(people, func(i, j int) bool {a, b : people[i], people[j]return a[0] > b[0] || a[0] b[0] && a[1] < b[1]})for _, person : range people {idx : pe…
阅读更多...
前端web端项目运行的时候没有ip访问地址

前端web端项目运行的时候没有ip访问地址

我们发现 没有netWork 的地址 导致 团队内其他同学无法打开我们的地址 进行访问 在page.json 中的运行 指令中 添加 --host 记得加上空格 这样我们就可以看到这个地址了 团队其他同学 就可以访问我们这个地址了
阅读更多...
java使用ByteBuffer进行多文件合并和拆分

java使用ByteBuffer进行多文件合并和拆分

1.背景 因为验证证书的需要&#xff0c;需要把证书文件和公钥给到客户&#xff0c;考虑到多个文件交互的不便性&#xff0c;所以决定将2个文件合并成一个文件交互给客户。刚开始采用字符串拼接2个文件内容&#xff0c;但是由于是加密文件&#xff0c;采用字符串形式合并后&…
阅读更多...
最新文章

Copyright @ 2022~2023