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. 初始化,设置请求方法和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:服务端返回全部结果;
在这里插入图片描述
GET请求携带参数的方式:url?a=10&b=20&c=30,参数会成为请求地址的一部分
在这里插入图片描述

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属性,配置请求头
在这里插入图片描述
能否发送请求头,能否发送自定义的请求头,都需要服务器端进行设置。
这里的重点是怎么配置请求头。服务器端的设置不是重点。

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();// 超时回调,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()})

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

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.mzph.cn/diannao/54419.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 实现Excel XLS和XLSX格式相互转换

在日常工作中&#xff0c;我们经常需要处理和转换不同格式的Excel文件&#xff0c;以适应不同的需求和软件兼容性。Excel文件的两种常见格式是XLS&#xff08;Excel 97-2003&#xff09;和XLSX&#xff08;Excel 2007及以上版本&#xff09;。本文将详细介绍如何使用Python在XL…

web worker使用

1. 新建worker.js import kriging from "/views/Heatmap/kriging";self.onmessage (e) > {console.log(e) // 主线程传过来的数据self.postMessage(我是子线程的数据) // 返回给主线程的数据 }2. 在使用的文件引入woker.js 注&#xff1a; 在worker中如果要使用…

USB组合设备——串口+鼠标+键盘

文章目录 USB组合设备——串口+鼠标+键盘描述符结构设备描述符配置描述符集合配置描述符接口关联描述符键盘接口描述符鼠标接口描述符类特殊命令CDC 的类特殊命令HID 的类特殊命令接口 2接口3USB组合设备——串口+鼠标+键盘 描述符结构 设备描述符 配置描述符 接口关联描述符…

【数据结构篇】~链表算法题3(环形链表)

链表算法题3&#xff08;环形链表&#xff09; 环形链表的证明1. 环形链表I​1) 思路2&#xff09;代码实现 2. 环形链表II​1) 思路11) 思路22&#xff09;代码实现 3. 随机链表的复制​1) 思路2&#xff09;代码实现 环形链表的证明 1. 环形链表I​ https://leetcode.cn/prob…

一些常用的 Docker 命令

一些常用的 Docker 命令 涵盖了查看镜像、启动镜像等基本操作&#xff1a; 1. 查看 Docker 镜像 列出所有本地存储的镜像&#xff1a; docker images这会显示所有已经下载到本地的镜像&#xff0c;包括仓库名、标签、镜像 ID、创建时间和大小。 2. 拉取 Docker 镜像 从 Dock…

Redhat 7,8系(复刻系列) 一键部署Oracle21c-xe rpm

Oracle21c-xe前言 无论您是开发人员、DBA、数据科学家、教育工作者,还是仅仅对数据库感兴趣,Oracle Database Express Edition (XE) 都是理想的入门方式。它是全球企业可依赖的强大的 Oracle Database,提供简单的下载、易于使用和功能齐全的体验。您可以在任何环境中使用该…

git push出错Push cannot contain secrets

报错原因&#xff1a; 因为你的代码里面包含了github token明文信息&#xff0c;github担心你的token会泄漏&#xff0c;所以就不允许你推送这些内容。 解决办法&#xff1a; 需要先把代码里面的github token信息删除掉&#xff0c;并且删掉之前的历史提交&#xff0c;只要包…

Stable Diffusion Fooocus批量绘图脚本

当当当挡~&#xff0c;流动传热数值计算之余发布点AIGC相关文章&#xff0c;希望大家能喜欢~ 1 Stable Diffusion各种UI分析对比 提示&#xff1a;此部分主要是对SD各种界面的简要介绍和对比&#xff0c;只关注Fooocus批量绘图的读者可直接跳到第二部分。 Stable Diffusion …

微服务_入门2

文章目录 一、Feign远程调用二、Gateway服务网关2.1、为什么需要网关2.2、gateway快速入门2.3、断言工厂2.4、过滤器 一、Feign远程调用 来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; 存在下面的问题&#xff1a; 代码可读性差&#xff0c;编程体验不统一&…

pg入门15—pg中fts configurations是什么

在 PostgreSQL 中&#xff0c;FTS configurations&#xff08;全文搜索配置&#xff09;是用于定义文本分析和搜索行为的设置。这些配置决定了如何处理和解析输入文本&#xff0c;以便进行高效的全文搜索。 主要组成部分 词汇表&#xff1a; 确定哪些词会被视为搜索词&#xf…

C语言指针常量和常量指针

C语言指针常量和常量指针 在 C/C 中&#xff0c;const 关键字用于定义常量。在涉及指针时&#xff0c;const 的使用可以带来不同的含义。下面是几种常见的指针与 const 的组合方式及其含义&#xff1a; 常量指针&#xff08;Pointer to Constant&#xff09; const int* ptr;含…

周末愉快!——周复盘

加班的晚上有一个美梦&#xff01; 周末愉快简单复盘结尾 精华&#xff1a; 在这个信息爆炸的时代&#xff0c;我们的大脑每天都被无数的数据和刺激充斥&#xff0c;以至于我们常常感到应接不暇。然而&#xff0c;正如古人所言&#xff1a;“不飞则已&#xff0c;一飞冲天”&am…

scrapy之setting文件详解

一、使用项目配置文件的好处 1. 集中管理配置 配置文件将各种设定集中管理&#xff0c;避免了在代码中散布配置参数。这使得开发人员能够方便地找到并修改全局参数&#xff0c;不必在代码的各个部分寻找。 2. 提升代码可维护性 配置文件将程序逻辑与具体的配置解耦&#xff0…

2025年最新大数据毕业设计选题-基于Spark分析相关

选题思路 回忆学过的知识(Python、Java、Hadoop、Hive、Sqoop、Spark、算法等等。。。) 结合学过的知识确定大的方向 a. 确定技术方向&#xff0c;比如基于Hadoop、基于Hive、基于Spark 等等。。。 b. 确定业务方向&#xff0c;比如民宿分析、电商行为分析、天气分析等等。。。…

人工智能开发实战辅助诊断应用解析

内容导读 项目分析预备知识项目实战 一、项目分析 1、提出问题 随着人们生活水平的提升和健康意识的增强&#xff0c;民众定期进行身体健康体检已成为常态&#xff0c;这种早期的疾病检测和筛查可以及早发现身体里已经出现的异常体征信息&#xff0c;做出正确诊断和有效处理…

css实现居中的方法

水平居中 1. 行内设置text-align 给父元素设置text-align为center&#xff0c;一般用于实现文字水平居中 2. 给当前元素设置margin&#xff1a;0 auto 原理&#xff1a;块级独占一行&#xff0c;表现为在水平方向上占满整个父容器&#xff0c;当水平方向padding&#xff0c;…

JVM 内存管理详解

Java 虚拟机 (JVM) 是 Java 应用程序的基础&#xff0c;而内存管理则是 JVM 最为核心的功能之一。本篇文章将详细介绍 JVM 如何管理和分配内存&#xff0c;以及如何处理垃圾回收等问题。此外&#xff0c;还将通过一些代码示例和实际项目场景来说明内存管理的重要性&#xff0c;…

navicat无法连接远程mysql数据库1130报错的解决方法

出现报错&#xff1a;1130 - Host ipaddress is not allowed to connect to this MySQL serve navicat&#xff0c;当前ip不允许连接到这个MySQL服务 解决当前ip无法连接远程mysql的方法 1. 查看mysql端口&#xff0c;并在服务器安全组中放开相应入方向端口后重启服务器 sud…

音视频入门基础:AAC专题(7)——FFmpeg源码中计算AAC裸流每个packet的size值的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…

移动应用开发实验室web组js第一次考核

请简述var,let,const的区别 var var存在变量提升、暂时性死区可以重复赋值 let let不存在变量提升、暂时性死区块级作用域可以重复赋值 const const不存在变量提升、暂时性死区声明时必须定义值块级作用域 解释垃圾回收机制&#xff0c;垃圾回收的方式 垃圾回收机制 如…