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

文章目录

  • 一、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
      }
    }
  })

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

毕业设计选题：基于ssm+vue+uniapp的校园商铺系统小程序

毕业设计选题：基于ssm+vue+uniapp的校园商铺系统小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…
阅读更多...
分发饼干00

分发饼干00

题目链接 分发饼干 题目描述 注意点 1 < g[i], s[j] < 2^31 - 1目标是满足尽可能多的孩子&#xff0c;并输出这个最大数值 解答思路 可以先将饼干和孩子的胃口都按升序进行排序&#xff0c;随后根据双指针 贪心&#xff0c;将当前满足孩子胃口的最小饼干分配给该孩…
阅读更多...
旋转矩阵乘法，自动驾驶中的点及坐标系变换推导

旋转矩阵乘法，自动驾驶中的点及坐标系变换推导

目录 1. 矩阵乘法的内项相消 2. 左右乘&#xff0c;内外旋与动静坐标系 3. 点变换 3.1 点旋转后的点坐标表示 3.2 坐标系旋转后的点坐标表示 4. 坐标变换的实质 1. 矩阵乘法的内项相消 关于旋转变换&#xff0c;离不开矩阵的乘法&#xff0c;而矩阵乘法的物理意义和本身数…
阅读更多...
[Linux#55][网络协议] 序列化与反序列化 | TcpCalculate为例

[Linux#55][网络协议] 序列化与反序列化 | TcpCalculate为例

目录 1. 理解协议 1.1 结构化数据的传输 序列化与反序列化 代码感知&#xff1a; Request 类 1. 构造函数 2. 序列化函数&#xff1a;Serialize() 3. 反序列化函数&#xff1a;DeSerialize() 补充 4. 成员变量 Response 类 1. 构造函数 2. 序列化函数&#xff1a;…
阅读更多...
【软件基础知识】什么是 API，详细解读

【软件基础知识】什么是 API，详细解读

想象一下,你正在使用智能手机上的天气应用。你打开应用,瞬间就能看到实时天气、未来预报,甚至是空气质量指数。但你有没有想过,这些数据是如何神奇地出现在你的屏幕上的?答案就在三个字母中:API。 API,全称Application Programming Interface(应用程序编程接口),是现代软件世…
阅读更多...
MYSQL面试知识点手册

MYSQL面试知识点手册

第一部分&#xff1a;MySQL 基础知识 1.1 MySQL 简介 MySQL 是世界上最流行的开源关系型数据库管理系统之一&#xff0c;它以性能卓越、稳定可靠和易用性而闻名。MySQL 主要应用在 Web 开发、大型互联网公司、企业级应用等场景&#xff0c;且广泛用于构建高并发、高可用的数据…
阅读更多...
工程师 - PFM介绍

工程师 - PFM介绍

在电子电路设计中&#xff0c;PFM&#xff08;Pulse Frequency Modulation&#xff0c;脉冲频率调制&#xff09;是一种调制技术&#xff0c;其主要特点是在负载变化时调整脉冲的频率&#xff0c;而保持脉冲的宽度&#xff08;时间长度&#xff09;相对恒定。与PWM&#xff08;…
阅读更多...
记忆化搜索专题——算法简介力扣实战应用

记忆化搜索专题——算法简介力扣实战应用

目录 1、记忆化搜索算法简介 1.1 什么是记忆化搜索 1.2 如何实现记忆化搜索 1.3 记忆化搜索与动态规划的区别 2、算法应用【leetcode】 2.1 题一&#xff1a;斐波那契数 2.1.1 递归暴搜解法代码 2.1.2 记忆化搜索解法代码 2.1.3 动态规划解法代码 2.2 题二&#xff1…
阅读更多...
Transformer预测 | 基于Transformer心率时间序列预测（tensorflow）

Transformer预测 | 基于Transformer心率时间序列预测（tensorflow）

效果一览 基本介绍 Transformer预测 | 基于Transformer心率时间序列预测（tensorflow） 程序设计 import pandas as pd from pandas.plotting import lag_plot from statsmodels.graphics
阅读更多...
加密与安全_优雅存储二要素（AES-256-GCM ）

加密与安全_优雅存储二要素（AES-256-GCM ）

文章目录 什么是二要素如何保护二要素&#xff08;姓名和身份证&#xff09;加密算法分类场景选择算法选择AES - ECB 模式 (不推荐)AES - CBC 模式GCM&#xff08;Galois/Counter Mode&#xff09;AES-256-GCM简介AES-256-GCM工作原理安全优势 应用场景其他模式 和 敏感数据加密…
阅读更多...
AIoT智能工控板

AIoT智能工控板

在当今竞争激烈的商业环境中&#xff0c;企业需要强大的科技力量来助力腾飞&#xff0c;AIoT智能工控板就是这样的力量源泉。 其领先的芯片架构设计&#xff0c;使得主板的性能得到了极大的提升。无论是数据的处理速度、图形的渲染能力&#xff0c;还是多任务的并行处理能力&a…
阅读更多...
Ceph官方文档_01_Ceph简介

Ceph官方文档_01_Ceph简介

目录 Ceph介绍Ceph介绍 Ceph可用于向云平台提供Ceph对象存储，Ceph可用于向云平台提供Ceph块设备服务。Ceph可用于部署Ceph文件系统。所有Ceph存储群集部署开始都是先设置每个Ceph节点，然后再设置网络。 Ceph存储集群需要以下内容：至少一个Ceph监视器和至少一个Ceph管理器，…
阅读更多...
毕业设计选题：基于ssm+vue+uniapp的捷邻小程序

毕业设计选题：基于ssm+vue+uniapp的捷邻小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…
阅读更多...
Linux top命令详解与重点内容说明

Linux top命令详解与重点内容说明

文章目录 重点说明基本信息进程(任务)信息cpu占用信息%Cpu(s)内存信息交换内存信息每列含义说明交互命令多窗口模式颜色配置命令参数 重点说明 top命令非常强大&#xff0c;也非常复杂&#xff0c;很难面面俱到&#xff0c;也没有必要&#xff0c;这篇文章的目的是介绍重点&am…
阅读更多...
en造数据结构与算法C# 群组行为优化 和 头鸟控制

en造数据结构与算法C# 群组行为优化 和 头鸟控制

实现&#xff1a; 1.给鸟类随机播放随机动画使得每一只鸟扇翅膀的频率都不尽相同 2.可以自行添加权重&#xff0c;并在最后 sumForce separationForce cohesionForce alignmentForce;分别乘上相应权重&#xff0c;这样鸟就能快速飞行和转向辣 using System.Collections.Ge…
阅读更多...
Linux系统编程（基础指令）上

Linux系统编程（基础指令）上

1.Linux常见目录介绍 Linux目录为树形结构 /&#xff1a;根目录&#xff0c;一般根目录下只存放目录&#xff0c;在Linux下有且只有一个根目录。所有的东西都是从这里开始。当你在终端里输入“/home”&#xff0c;你其实是在告诉电脑&#xff0c;先从/&#xff08;根目录&…
阅读更多...
Unity3D入门(二) :Unity3D实现视角的丝滑过渡切换

Unity3D入门(二) :Unity3D实现视角的丝滑过渡切换

1. 前言 上篇文章&#xff0c;我们已经初步了解了Unity3D&#xff0c;并新建并运行起来了一个项目&#xff0c;使相机视角自动围绕着立方体旋转。 这篇文章&#xff0c;我们来讲一下Unity3D怎么过渡地切换视角。 我们继续是我上篇文章中的项目&#xff0c;但是需要向把Camera…
阅读更多...
​OpenAI最强模型o1系列：开启人工智能推理新时代

​OpenAI最强模型o1系列：开启人工智能推理新时代

前不久OpenAI发布全新模型——o1模型&#xff0c;也就是业界说的“草莓模型”&#xff0c;包含三款型号&#xff1a;OpenAI o1、OpenAI o1-preview和OpenAI o1-mini。 其中&#xff0c;OpenAI o1-mini和 o1-preview已经对用户开放使用&#xff1a; OpenAI o1&#xff1a;高级推…
阅读更多...
企业急于采用人工智能，忽视了安全强化

企业急于采用人工智能，忽视了安全强化

对主要云提供商基础设施上托管的资产的安全分析显示&#xff0c;许多公司为了急于构建和部署 AI 应用程序而打开安全漏洞。常见的发现包括对 AI 相关服务使用默认且可能不安全的设置、部署易受攻击的 AI 软件包以及不遵循安全强化指南。 这项分析由 Orca Security 的研究人员进…
阅读更多...
Redis学习以及SpringBoot集成使用Redis

Redis学习以及SpringBoot集成使用Redis

目录 一、Redis概述 二、Linux下使用Docker安装Redis 三、SpringBoot集成使用Redis 3.1 添加redis依赖 3.2 配置连接redis 3.3 实现序列化 3.4 注入RedisTemplate 3.5 测试 四、Redis数据结构 一、Redis概述 什么是redis&#xff1f; redis 是一个高性能的&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023