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

news2024/11/14 15:28:38

文章目录

  • 一、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端口监听中....');
})

目前的目录结构为：
在这里插入图片描述
(4) 启动服务器
注意要在该js文件所在的文件夹下打开终端，否则运行命令时找不到这个js文件
在这里插入图片描述
在终端输入命令，启动服务器，
在这里插入图片描述
网页运行测试：
在这里插入图片描述

3. 安装nodemon实现自动重启

每次修改服务器的js文件都要重启服务器，很麻烦，安装nidemon可以自动重启服务器。
安装：npm install -g nodemon
启动服务器：nodemon 文件名.js
在这里插入图片描述

四、AJAX发送请求

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

1. GET请求

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

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

页面结构：
在这里插入图片描述

  // 获取元素
  const btn = document.querySelector('#btn')
  const div = document.querySelector('#content')
  // 监听点击事件
  btn.addEventListener('click', () => {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化，设置请求方法和url
    xhr.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：服务端返回全部结果；
在这里插入图片描述
GET请求携带参数的方式：url?a=10&b=20&c=30，参数会成为请求地址的一部分
在这里插入图片描述

2. POST请求

(1) 配置请求体

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

// 发送POST请求
btnPost.addEventListener('click', () => {
  // 1. 创建对象
  const xhr = new XMLHttpRequest();
  // 2. 初始化，设置请求方法和url
  xhr.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属性，配置请求头
在这里插入图片描述
能否发送请求头，能否发送自定义的请求头，都需要服务器端进行设置。
这里的重点是怎么配置请求头。服务器端的设置不是重点。

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')
})

在这里插入图片描述

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()

在这里插入图片描述
在这里插入图片描述

(2) 设置xhr.responseType

在这里插入图片描述

五、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；因此他走的是缓存。
解决方法：
在这里插入图片描述
在地址URL上配置一个时间戳，这样每次发送请求时，地址都不一样，IE就会认为是新的请求，就不会走缓存了。
在这里插入图片描述

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

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

btn.addEventListener('click', () => {
  // 1. 创建对象
  const xhr = new XMLHttpRequest();
  // 超时回调，2s
  xhr.timeout = 2000
  xhr.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()
 })

在这里插入图片描述
当请求处于发送中状态时，点击取消请求，可取消请求。

4. 请求重复发送的问题

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2152644.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI绘画Flux【lora模型】【微缩景观】：惊艳！3D场景融入手机上的微景观！

AI绘画Flux【lora模型】【微缩景观】：惊艳！3D场景融入手机上的微景观！

大家好&#xff0c;我是灵魂画师向阳 今天和大家分享一款基于Flux底模训练的微缩景观模型——FLUX|手机上的微景观。此模型主要将手机作为微型景观的基底&#xff0c;强制将3d情景融入手机并控制在手机屏幕上方范围内。 作者在使用提示词直出和使用该Loar提示词生成的图片进行…
阅读更多...
rsyslogd 内存占用很高解决方案

rsyslogd 内存占用很高解决方案

在Kubernetes&#xff08;K8S&#xff09;集群中&#xff0c;监控日志是非常重要的&#xff0c;而rsyslogd是Linux系统中用于处理系统和应用程序日志的守护进程。有时候rsyslogd可能会占用较高的内存&#xff0c;这时候我们就需要对其进行优化和调整。 阿里云虚拟服务器&…
阅读更多...
JavaEE: 深入探索TCP网络编程的奇妙世界(二)

JavaEE: 深入探索TCP网络编程的奇妙世界(二)

文章目录 TCP核心机制TCP核心机制二: 超时重传为啥会丢包?TCP如何对抗丢包?超时重传的时间设定超时时间该如何确定? TCP核心机制 书接上文~ TCP核心机制二: 超时重传 在网络传输中,并不会一帆风顺,而是可能出现"丢包情况"~ 为啥会丢包? 产生丢包的原因有很多…
阅读更多...
其他比较条件

其他比较条件

使用BETWEEN条件 可以用BETWEEN范围条件显示基于一个值范围的行。指定的范围包含一个下限和一个上限。 示例&#xff1a;查询employees表&#xff0c;薪水在3000-8000之间的雇员ID、名字与薪水。 select employee_id,last_name,salary from employees where salary between 3…
阅读更多...
移植Linux：如何制作rootfs？

移植Linux：如何制作rootfs？

一、分析 1. 文件系统简介 理论上说一个嵌入式设备如果内核能够运行起来&#xff0c;且不需要运行用户进程的话&#xff0c;是不需要文件系统的&#xff0c;文件系统简单的说就是一种目录结构&#xff0c;由于 linux操作系统的设备在系统中是以文件的形式存在&#xff0c;将这…
阅读更多...
Cypress安装与启动（开始学习记录）

Cypress安装与启动（开始学习记录）

一 Cypress安装 使用npm安装 1.查看node.js npm的版本&#xff0c;输入 npm --version 和 node --version&#xff0c;node.js没安装的可以去中文网下载最新稳定版安装&#xff0c;npm不建议升级到最新版本&#xff0c;会导致安装Cypress时Error: Cannot find module ansi-st…
阅读更多...
2-94 基于matlab的最佳维纳滤波器的盲解卷积算法

2-94 基于matlab的最佳维纳滤波器的盲解卷积算法

基于matlab的最佳维纳滤波器的盲解卷积算法。维纳滤波将地震子波转换为任意所需要的形态。维纳滤波不同于反滤波&#xff0c;它是在最小平方的意义上为最 佳。基于最佳纳滤波理论的滤波器算法是莱文逊(Wiener—Levinson)算法。程序提供了4种子波和4种期望输出&#xff1a;零延迟…
阅读更多...
JavaEE: 深入探索TCP网络编程的奇妙世界(一)

JavaEE: 深入探索TCP网络编程的奇妙世界(一)

文章目录 TCPTCP协议段落格式TCP相关机制TCP核心机制一: 确认应答32位序号32位确认序号后发先至问题 TCP TCP要比UDP更复杂一些~ TCP的全称为"传输控制协议".他负责对数据的传输进行一个详细的控制. TCP协议段落格式 源/目的端口号: 表示数据是从哪个进程来.到哪个…
阅读更多...
Innodb内存结构

Innodb内存结构

缓冲池Buffer Pool: 缓冲池是innodb内存结构缓冲区中的核心部分&#xff0c;在服务启动的时候服务器会向操作系统申请一块大小为128MB的内存空间&#xff0c;所有对数据库中数据的增删查改操作均在缓冲池bufferPool中完成&#xff0c;并且缓冲区中其他组件的描述信息也都存储在…
阅读更多...
[Linux]Vi和Vim编辑器

[Linux]Vi和Vim编辑器

Vi和Vim编辑器 Linux系统会内置vi文本编辑器, 类似于windows中的记事本 Vim具有程序编辑的能力, 可以看作是Vi的增强版本, 可以进行语法检查, 代码补全,代码编译和错误调整等功能 Vi和Vim的模式 快速入门 使用vim开发一个Hello.java程序 通过Xshell连接Linux系统命令行输入…
阅读更多...
技术美术百人计划 | 《4.5 DOF景深算法》笔记

技术美术百人计划 | 《4.5 DOF景深算法》笔记

1. 景深定义 景深&#xff08;Depth of Field&#xff0c;DOF&#xff09;&#xff0c;是指在摄影机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围。镜头光圈、镜头焦距、及焦平面到拍摄物的距离是影响景深的重要因素。在聚焦完成后&#xff0c;焦点…
阅读更多...
2024年Q3国际信息系统安全认证联盟（ISC2）内部研讨会要点分享

2024年Q3国际信息系统安全认证联盟（ISC2）内部研讨会要点分享

2024年是CISSP认证成立30周年&#xff0c;这是一项具有里程碑意义的成就&#xff0c;代表了CISSP在网络安全领域的卓越、创新和领导力。博主于今年9月份参加了ISC2&#xff08;国际信息系统安全认证联盟&#xff09;组织的2024年第3季度内部网络研讨会&#xff0c;针对会议中的…
阅读更多...
【sgCreateCallAPIFunction】自定义小工具：敏捷开发→调用接口方法代码生成工具

【sgCreateCallAPIFunction】自定义小工具：敏捷开发→调用接口方法代码生成工具

<template><div :class"$options.name" class"sgDevTool"><sgHead /><div class"sg-container"><div class"sg-start"><div style"margin-bottom: 10px">调用接口方法定义列表</div…
阅读更多...
QT 带箭头的控件QPolygon

QT 带箭头的控件QPolygon

由于对当前项目需要绘制一个箭头控件&#xff0c;所以使用了QPainter和QPolygon来进行绘制&#xff0c;原理就是计算填充&#xff0c;下面贴出代码和效果图 这里简单介绍下QPolygon QPolygon是继承自 QVector<QPoint>那么可以很简单的理解为&#xff0c;他就是一个点的…
阅读更多...
探索丹摩智算平台的奇妙之旅：我的CogVideoX实践实验与深刻体验

探索丹摩智算平台的奇妙之旅：我的CogVideoX实践实验与深刻体验

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀CogVideoX &#x1f4d2;1. 初识CogVideoX&#x1f4da;2. 部署与准备&#x1f31e;在丹摩智算平台上创建实例&#x1f338;CogVideoX代码仓库…
阅读更多...
Linux基础命令——账户简单管理

Linux基础命令——账户简单管理

一.添加用户 命令&#xff1a;useradd username eg:useradd yy 添加用户名为yy的用户 注意&#xff1a; inux中如果新建用户的时候没有用-d参数指定家目录&#xff0c;那么用户的家目录是什么? 指定的默认/home下面&#xff0c;以username命名 二.修改账户口令/密码 命令&…
阅读更多...
漫步者头戴式耳机哪个型号好？热门主流头戴式耳机专业深度评测

漫步者头戴式耳机哪个型号好？热门主流头戴式耳机专业深度评测

一直以来头戴式蓝牙耳机凭借其独特的优势&#xff0c;逐渐成为了音乐爱好者、游戏玩家以及日常通勤者的首选&#xff0c;它们不仅融合了卓越的音质体验、便捷的无线连接&#xff0c;还融入了先进的降噪技术和人性化的佩戴设计&#xff0c;为用户带来了前所未有的听觉盛宴与舒适…
阅读更多...
css实现居中的方法

css实现居中的方法

水平居中 1. 行内设置text-align 给父元素设置text-align为center&#xff0c;一般用于实现文字水平居中 2. 给当前元素设置margin&#xff1a;0 auto 原理&#xff1a;块级独占一行&#xff0c;表现为在水平方向上占满整个父容器&#xff0c;当水平方向padding&#xff0c;…
阅读更多...
500元以内头戴式耳机哪款好？盘点500元以内百元宝藏品牌机型推荐

500元以内头戴式耳机哪款好？盘点500元以内百元宝藏品牌机型推荐

作为耳机发烧友&#xff0c;我深知一副优质的头戴式耳机都能为我们带来沉浸式的听觉体验&#xff0c;但然而&#xff0c;面对市场上琳琅满目的耳机品牌和型号&#xff0c;500元以内头戴式耳机哪款好&#xff1f;对于这个问题我将为大家盘点500元以内百元宝藏品牌机型推荐无论你…
阅读更多...
【chromedriver编译-绕过selenium机器人检测】

【chromedriver编译-绕过selenium机器人检测】

有小伙伴说使用selenium没能绕过机器人检测&#xff0c;盘他。 selenium机器人检测有2种&#xff0c;一是cdp检测&#xff0c;二是webdriver特征检测。cdp检测前面的博客已写过&#xff0c;这里就提下webdriver特征检测。一、selenium简介 Selenium 是一个强大的工具&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023