Ajax-概念、Http协议、Ajax请求及其常见问题

Ajax

    • Ajax概念
    • Ajax优缺点
    • HTTP协议
      • 请求报文
      • 响应报文
    • Ajax案例准备工作
      • express基本使用
      • 创建一个服务器
    • 发送AJAX请求
      • GET请求
      • POST请求
      • JSON响应
    • Ajax请求出现的问题
      • IE缓存问题
      • Ajax请求超时与网络异常处理
      • Ajax手动取消请求
      • Ajax重复发送请求问题

Ajax概念

AJAX 全称为Asynchronous Javascript And XML，就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML：可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。（目前已经被JSON取代）

Ajax优缺点

优点：

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

缺点：

  • 没有浏览历史，不能回退。
  • 存在跨域问题（同源）。
  • SEO不友好（查看源代码中无法查找到）。

HTTP协议

HTTP全称为hypertext transport protocol 协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

请求行：POST /URL HTTP协议版本
请求头：

Host:值

Cookie: 值

Content-type:值

User-Agent:值等等
空行：
请求体：如果是GET请求体为空，如果是POST可以不为空
请添加图片描述

响应报文

响应行：HTTP协议版本 响应状态码 响应状态字符串
响应头：

Content-type:值

Content-length:值

Content-encoding:值等等
空行：
响应体：HTML语法内容
请添加图片描述

Ajax案例准备工作

express基本使用

先下载node并配置node环境，然后在vscode终端中输入npm i express即可，若出现错误，可以尝试用管理员运行vscode再试一次，还是不行的话就找到node文件夹位置找到node_cache node_global node_modules分别把这三个文件–>属性–>安全–>把权限改为完全控制。

此处可以安装到全局，也就是node.js根目录里npm i express -g

创建一个服务器

在当前目录新建个js文件（不一定非要在express安装的根目录里），然后在终端 --> 当前目录下 --> 输入node 文件名就可以启动服务

请添加图片描述

  • 可以使用nodemon实现保存自动重启

    安装nodemon：npm install -g nodemon

    使用：在当前目录终端输入nodemon 文件名

    这样就不用每次修改都要重启服务了

    注意：如果报错则输入npx nodemon 文件名再试一次

发送AJAX请求

GET请求

点击按钮div中呈现响应体：点击按钮发送AJAX请求给服务器，然后把响应体拿过来放到div中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#result {width: 200px;height: 100px;border: solid 1px pink;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.querySelector("button");const result = document.querySelector("#result");btn.addEventListener("click", function () {//1.创建对象const xhr = new XMLHttpRequest();//2.初始化，设置请求的方法和urlxhr.open("GET", "http://127.0.0.1:8000/server?a=1&b=2&c=3");//3.发送xhr.send();//4.事件绑定，处理服务端返回的结果//on 当……的时候//readyState是xhr对象中的属性,表示状态0 1 2 3 4//其中0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果//change 改变xhr.onreadystatechange = function () {//判断服务端是否返回了所有结果if (xhr.readyState === 4) {//判断响应状态码 200 404 403 401 500// 2xx ,2开头都表示成功if (xhr.status >= 200 && xhr.status < 300) {//如果响应成功处理结果 行 头 空行 体console.log("状态码:", xhr.status); //状态码console.log("状态字符串:", xhr.statusText); //状态字符串console.log("响应头:", xhr.getAllResponseHeaders()); //所有的响应头console.log("响应体:", xhr.response); //响应体//设置result文本result.innerHTML = xhr.response;}}};});</script></body>
</html>

设置url参数：用？隔开，=赋值，&分隔
例如：http://127.0.0.1:8000/server?a=1&b=2&c=3

服务端server.js文件：

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

POST请求

鼠标经过div发送AJAX请求，然后拿回来响应体放在div中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#result {width: 200px;height: 100px;border: solid 1px pink;}</style></head><body><div id="result"></div><script>const result = document.querySelector("#result");result.addEventListener("mouseover", function () {//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置类型与urlxhr.open("POST", "http://127.0.0.1:8000/server");//设置请求头:固定写法,第一个参数设置请求体内容类型,第二个参数是参数查询字符串的类型xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//3.发送请求，在这里传参，任意类型都可以xhr.send("a=1&b=2&c=3");// xhr.send('a:1&b:2&c:3');// xhr.send('1232142412421312');//4.绑定事件xhr.onreadystatechange = function () {//判断服务端是否返回所有结果if (xhr.readyState === 4) {//判断响应是否成功if (xhr.status >= 200 && xhr.status < 300) {//处理服务端返回的结果result.innerHTML = xhr.response;}}};});</script></body>
</html>

server.js：

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

JSON响应

服务端响应体也可以设置为一个数据发送过去，但是不能直接写，要通过JSON.stringify(数据)把数据转换为JSON字符串

//可以接收任意类型的请求
app.all("/json-server", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", "*");//响应一个数据const data = {name: "haha",};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});

页面在拿到JSON字符串响应体的时候，是无法识别的，所以需要把JSON字符串转换为js对象，有两种方式：

  • 手动转换JSON.parse(xhr.response)
  • 自动转换xhr.responseType = 'json';
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#result {width: 200px;height: 100px;border: solid 1px pink;}</style></head><body><div id="result"></div><script>const result = document.querySelector("#result");window.onkeydown = () => {const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType = "json";xhr.open("GET", "http://127.0.0.1:8000/json-server");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {//result.innerHTML = xhr.response;//手动对数据进行转换//let data = JSON.parse(xhr.response);//console.log(data);// result.innerHTML = data.name;//自动转换console.log(xhr.response);result.innerHTML = xhr.response.name;}}};};</script></body>
</html>

Ajax请求出现的问题

IE缓存问题

//针对IE缓存
app.get("/ie", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应response.send("HELLO IEhhh");
});

IE当你响应体改变时，它不会更新，而是缓存，要解决这个问题，就要让每次请求的url都不一样，那么我们在后面传个参数，值为时间戳（因为时间戳是不可能重复的，这样的话浏览器会认为url不一样就会重新发请求从而解决了问题），就可以解决改变响应体时IE走缓存不更新的问题。

xhr.open("GET", "http://127.0.0.1:8000/ie?t=" + Date.now());

Ajax请求超时与网络异常处理

我们不能保证服务端可以及时快速的响应，此时我们可以给Ajax做一个超时的设置然后给用户返回一个提醒，网络异常时也可返回一个提醒，提高用户体验感。

服务端写个定时器，2秒后发送响应体过去

//延时响应
app.get("/delay", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应//服务端写个定时器，2秒后发送响应体过去setTimeout(() => {response.send("HELLO 延时响应");}, 2000);
});

然后点击按钮发送请求时，可以设置超时xhr.timeout和超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>IE缓存问题</title><style>#result {width: 200px;height: 100px;border: solid 1px pink;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>const btn = document.querySelector("button");const result = document.querySelector("#result");btn.addEventListener("click", () => {const xhr = new XMLHttpRequest();//超时设置 2sxhr.timeout = 2000;//超时回调xhr.ontimeout = function () {alert("网络异常，请稍后重试！");};//网络异常回调xhr.onerror = function () {alert("你的网络似乎出了一些问题！请检查后重试！");};xhr.open("GET", "http://127.0.0.1:8000/delay");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}};});</script></body>
</html>

Ajax手动取消请求

在发送请求后还没得到响应时，可以手动取消请求，被取消时可返回一个提醒。

设置一个定时器发送响应体：

app.get('/cancel', (request, response) => {//设置响应头response.setHeader('Access-Control-Allow-Origin', '*');//设置响应体setTimeout(() => {！response.send('HELLO 请求已经被取消');}, 2000);
})

取消请求，用xhr.abort()方法，abort=中止。
这里有个作用域的问题，解决方法是把xhr定义在外面给个null，然后赋值xhr实例，再调用方法。（重复赋值不能const）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>手动取消请求</title></head><body><button>点击发送请求</button><button>点击取消请求</button><div id="result"></div><script>const send = document.querySelectorAll("button")[0];const cancel = document.querySelectorAll("button")[1];let xhr = null;//发送请求send.onclick = function () {xhr = new XMLHttpRequest();xhr.open("GET", "http://127.0.0.1:8000/cancel");xhr.send();};//取消请求，abort方法cancel.addEventListener("click", function () {xhr.abort(); //先点send再点cancel不会报错，先点cancel报错});</script></body>
</html>

Ajax重复发送请求问题

当用户狂点一个按钮时，浏览器会重复发送相同的请求，导致服务器压力过大。解决方法：当用户发请求时，先检查之前有没有相同的请求，如果已有，就把之前的请求取消掉，只响应最后一个请求（这里有防抖的思想，复习防抖节流点击此处）

<script>const btn = document.querySelector("button");let xhr = null;//标识变量 是否正在发送请求let isSending = false;//发送请求btn.onclick = function () {//判断标识变量if (isSending) x.abort();xhr = new XMLHttpRequest();//修改标识变量的值isSending = true;xhr.open("GET", "http://127.0.0.1:8000/delay");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {isSending = false;}};};
</script>

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

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

相关文章

干货 | 详述 Elasticsearch 向量检索发展史

干货 | 详述 Elasticsearch 向量检索发展史

1. 引言 向量检索已经成为现代搜索和推荐系统的核心组件。 通过将复杂的对象&#xff08;例如文本、图像或声音&#xff09;转换为数值向量&#xff0c;并在多维空间中进行相似性搜索&#xff0c;它能够实现高效的查询匹配和推荐。 图片来自&#xff1a;向量数据库技术鉴赏【上…
阅读更多...
安科瑞物联网表在虚拟电厂的应用

安科瑞物联网表在虚拟电厂的应用

安科瑞 崔丽洁 应用场景 一般应用于控制中心 功能 能计量当前组合有功电能&#xff0c;正向有功电能&#xff0c;反向有功电能&#xff0c;正向无功电能&#xff0c;反向无功电能&#xff1b; ADW300支持RS485通讯、LORA通讯、NB、4G及Wifi通讯&#xff1b; 三套时段表,一年可以…
阅读更多...
[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

[oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流进行控制信息的设置 可以设置 光标输出的位置 ASR33中的ALT MODE 是 今天的ESC键吗&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#x1f914; 查询文档…
阅读更多...
关于APP备案、小程序备案的问题，如何备案？

关于APP备案、小程序备案的问题，如何备案？

近日&#xff0c;工信部发布了关于开展移动互联网应用程序备案工作的通知。为落实相关法律法规要求&#xff0c;促进互联网行业规范健康发展&#xff0c;进一步做好移动互联网信息服务管理&#xff0c;现组织开展移动互联网应用程序&#xff08;以下简称 APP&#xff09;备案工…
阅读更多...
安灯Andon系统的应用与优势

安灯Andon系统的应用与优势

安灯系统是一款与硬件相结合&#xff0c;实时了解机台与工位状态&#xff0c;让异常的信息得到快速、高效的解决的系统软件&#xff0c;同时记录每次异常报警的种类、响应时间和处理问题用时&#xff0c;提供改善生产管理和人员考核的数据参考&#xff0c;实现透明、快速的生产…
阅读更多...
做软件测试，掌握哪些技术才能算作“测试大佬”？

做软件测试，掌握哪些技术才能算作“测试大佬”？

一、过硬的基础能力 其实所有的测试大佬都是从底层基础开始的&#xff0c;随着时间&#xff0c;经验的积累慢慢变成大佬。要想稳扎稳打在测试行业深耕&#xff0c;成为测试大牛&#xff0c;首当其冲的肯定就是拥有过硬的基础&#xff0c;所有的基础都是根基&#xff0c;后期所有…
阅读更多...
iOS开发Swift开发UI页面链式调用库推荐

iOS开发Swift开发UI页面链式调用库推荐

首页链接 https://github.com/zhiguangqiao/ChainableUIKit 安装方法 pod ChainableUIKit调用片段 UIButton import ChainableUIKitprivate let button UIButton().chain.setTitleColor(.init(hex: "#9583EB"), state: .normal).setTitle("全部视频",…
阅读更多...
fetch-github-hosts间隔一年大更新v2.6发布，多端支持

fetch-github-hosts间隔一年大更新v2.6发布，多端支持

前言 fetch-github-hosts是一款同步 github hosts 的工具&#xff0c;用于帮助您解决github时而无法访问的问题。在间隔了一年之久的时间&#xff0c;最近抽空将fetch-github-hosts的依赖及UI进行了一波大更新&#xff0c;同时也增加了一些实用的功能。 主要更新 更新了基础依…
阅读更多...
MySQL 视图、索引

MySQL 视图、索引

视图&#xff1a;根据某个实表查询出来的结果&#xff0c;而生成的一个虚表。 1.视图既然作为一张虚表存在&#xff0c;那么对实表的增删改查操作&#xff0c;视图同样成立。 2.视图既然根据实表得到&#xff0c;那对视图的增删改查操作&#xff0c;也会影响实表。 3.视图在查询…
阅读更多...
js ?? || 使用方法

js ?? || 使用方法

平时很常用的就是||,比如调用接口的时候&#xff0c;接口报错了需要给个默认值 const data(await getData())||{};今天遇到了一个场景&#xff0c;正常后端返回的就是false&#xff0c;如果接口报错要默认设置成true&#xff0c;但如果用了 || &#xff0c;如下&#xff0c;那…
阅读更多...
Flutter：文件上传与下载（下载后预览）

Flutter：文件上传与下载（下载后预览）

Dio dio是一个强大的Dart Http请求库&#xff0c;提供了丰富的功能和易于使用的API&#xff0c;支持文件上传和下载。 这个就不介绍了&#xff0c;网上有很多的封装案例。 background_downloader 简介 适用于iOS&#xff0c;Android&#xff0c;MacOS&#xff0c;Windows和L…
阅读更多...
GitHub中readme.md文件的编辑和使用

GitHub中readme.md文件的编辑和使用

GitHub中readme.md文件的编辑和使用 | YuuiChungs BlogGitHub - guodongxiaren/README: README文件语法解读&#xff0c;即Github Flavored Markdown语法介绍
阅读更多...
Arcgis地图实战二：地图实时轨迹展示

Arcgis地图实战二：地图实时轨迹展示

1.最终效果预览 2.定时器执行方法 进入页面执行执行器 this.locationInterval setInterval(() > {this.getCurrentPosition();}, this.conf.LocateInterval);离开页面销毁 clearInterval(this.locationInterval);this.conf.LocateInterval为获取的数据同步中的定时器间隔…
阅读更多...
机器学习笔记 - 使用CLIP在没有数据的情况下创建图像分类器

机器学习笔记 - 使用CLIP在没有数据的情况下创建图像分类器

想象一下，如果我们现在需要对人们是否戴眼镜进行分类，但您没有数据或资源来训练自定义模型。该怎么办？这里我们了解如何使用预先训练的 CLIP 模型来创建自定义分类器，而无需任何培训。这种方法称为零样本图像分类，它可以对原始 CLIP 模型训练期间未明确看到的类别图像进行…
阅读更多...
Talk | ICCV‘23清华大学刘世隆：From Detection to Grounding-迈向更强的开集目标检测

Talk | ICCV‘23清华大学刘世隆：From Detection to Grounding-迈向更强的开集目标检测

本期为TechBeat人工智能社区第521期线上Talk&#xff01; 北京时间8月10日(周四)20:00&#xff0c;清华大学博士生—刘世隆的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “From Detection to Grounding-迈向更强的开集目标检测”&#xff0c;他分…
阅读更多...
栈和队列(二) 队列操作详解及栈与队列的相互实现

栈和队列(二) 队列操作详解及栈与队列的相互实现

文章目录 四、队列1、什么是队列2、队列的基本操作Queue.hQueue.c初始化队列队尾入队列队头出队列获取队列头部元素获取队列队尾元素获取队列中有效元素个数检测队列是否为空&#xff0c;如果为空返回非零结果&#xff0c;如果非空返回0销毁队列 五、设计循环队列六、栈与队列的…
阅读更多...
gcc-buildroot-9.3.0 和 gcc-arm-10.3 的区别

gcc-buildroot-9.3.0 和 gcc-arm-10.3 的区别

gcc-buildroot-9.3.0 和 gcc-arm-10.3 是两个不同的 GCC (GNU Compiler Collection) 版本&#xff0c;主要用于编译 C、C 和其他语言的程序。它们之间的区别主要体现在以下几个方面&#xff1a; 版本号&#xff1a;gcc-buildroot-9.3.0 对应的是 GCC 9.3.0 版本&#xff0c;而 …
阅读更多...
前端面试自我介绍

前端面试自我介绍

前端面试自我介绍精选篇1 各位面试官大家好&#xff0c;我叫__&#xff0c;就读于__大学__学&#xff0c;大学本科学历&#xff0c;我的求职意向是与金融专业相关的职位&#xff0c;本人拥有较强的学习能力&#xff0c;能快速适应工作环境&#xff0c;兴趣爱好广泛&#xff0c…
阅读更多...
MyBatis学习笔记3

MyBatis学习笔记3

日志 1.日志工厂 如果一个数据库的操作&#xff0c;出现了异常&#xff0c;我们需要排错。日志就是最好的工具。 日志工厂&#xff1a;SLF4JLOG4J(掌握&#xff09;LOG4J2JDK_LOGGINGCOMMONS_LOGGINGSTDOUT_LOGGING&#xff08;掌握&#xff09;NO_LOGGING 2.分页 减少数据…
阅读更多...
日常BUG ——乱码

日常BUG ——乱码

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 A系统使用Feign调用B系统时&#xff0c;传递的String字符串&#xff0c;到了B系统中变为了乱…
阅读更多...
最新文章

Copyright @ 2022~2023