AJAX（一）：初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

一、什么是AJAX

1.AJAX

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

2.XML

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

3.AJAX的优缺点

优点：
（1）可以无需刷新页面而与服务器端进行通信。
（2）允许你根据用户事件（鼠标、键盘事件等等）来更新部分页面内容。
缺点：
（1）没有浏览历史，不能回退。
（2）存在跨域问题（不同网站中请求不到）
（3）SEO不友好（查看源代码中无法查找到）

二、HTTP协议

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

1.请求报文

2.响应报文

发过来的响应体里面有html，然后接收方再去解析然后显示在页面上

三、AJAX案例准备工作

1.配置环境

终端中输入npm i express

2.创建一个服务端

sudo node express.js

//引入express
const express = require('express');//创建应用对象
const app = express();//创建路由规则
//request是请求报文的封装
//response是响应报文的封装
app.get('/', (request, response) => {response.send('hello express')
});app.listen(8080, () => {console.log('服务已经启动，8080端口监听中')
})

网页输入链接http://127.0.0.1:8080/

网页中出现 hello express

四、发送AJAX请求

1.发送GET请求

我们现在想要实现点击按钮发送请求将数据显示到div盒子中

客户端发送请求时，如果url是server，就会执行回调函数（箭头函数），并且由response来作出响应

 <button>点击发送请求</button><div id="result"></div>
<script>const btn=document.querySelector('button')const result=document.querySelector('#result')btn.onclick=function(){//创建对象const xhr=new XMLHttpRequest();//初始化，设置请求方法和url;//第一个参数：什么类型的请求，第二个参数给谁发xhr.open('GET','http://127.0.0.1:8080/server')//发送xhr.send();//事件绑定，处理服务端返回的结果//on在什么什么的时候，readystate是xhr对象的属性它的值有：//0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果//改变的时候触发，所以会触发四次xhr.onreadystatechange=function(){//判断（服务器返回全部数据if(xhr.readyState==4){//判断响应状态码 200 404 403 401 500//响应状态中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>

服务端只修改了/server：

//引入express
const express = require('express');//创建应用对象
const app = express();//创建路由规则
//request是请求报文的封装
//response是响应报文的封装
app.get('/server', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')response.send('hello AJAX')
});app.listen(8080, () => {console.log('服务已经启动，8080端口监听中')
})
设置url参数：用？隔开，=赋值，&分隔
例如：http://127.0.0.1:8000/server?a=1&b=2&c=3

2.发送POST请求

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

post和get区别就是get从服务器获取数据，post向服务器传送数据

post可以设置参数（在xhr.send();中）

设置请求头信息用来校验用户身份

<body><div id="result"></div><script>const result=document.querySelector('#result')//绑定事件result.addEventListener("mouseover",function(){const xhr=new XMLHttpRequest();xhr.open('POST','http://127.0.0.1:8080/server')// 设置请求头,接收两个参数：头的名字和头的值xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//上面这句用来设置请求体内容的类型，后面参数是固定写法xhr.send('a=100&b=200&c=300');xhr.onreadystatechange=function(){//判断（服务器返回全部数据if(xhr.readyState==4){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>
app.post('/server', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')response.send('hello AJAX post')
});

鼠标经过就显示数据

3.JSON响应

响应一个数据，通过stringify(data)转化为JSON字符串发送过去

app.all('/json-server', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')//响应头response.setHeader('Access-Control-Allow-Headers','*')const data={name:'atguigu'}//对对象进行字符串转换let str =JSON.stringify(data)response.send(str)
});

页面拿到JSON字符串响应体的时候识别不了，需要转换为js对象

（1）手动把JSON字符串转换为js对象

JSON.parse(xhr.response)

if(xhr.status>=200&&xhr.status<300){//对数据的手动转换let data=JSON.parse(xhr.response)console.log(data)result.innerHTML=data.name
（2）自动把JSON字符串转换为js对象

xhr.responseType = 'json';

 //设置响应体数据的类型xhr.responseType='json'
、、、
if(xhr.status>=200&&xhr.status<300){//自动转换console.log(xhr.response)result.innerHTML=xhr.response.name}

五、AJAX请求的几个问题

以前在server写代码就得重新启动终端，安装 npm install -g nodemon就可以自动刷新了

1.IE缓存问题

ie浏览器会对ajax请求的结果做缓存，所以下一次请求时它走的是本地的缓存而不是服务器返回的最新数据

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

在请求的url这里加上时间戳，这样ie就认为你每次请求的都不一样就去给你拿最新的

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

在请求超时和网络异常的时候给用户来一个友好的提醒，服务端写个定时器，3秒后发送响应体

app.get('/delay', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')setTimeout(()=>{response.send('hello ie-2')},3000)});
//2s还没收到响应体就取消请求xhr.timeout=2000//超时回调xhr.ontimeout=function(){alert('网络异常')}//网络异常回调xhr.onerror=function(){alert('你的网络似乎出了点问题')}

设置超时xhr.timeout， 超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

3.AJAX手动取消请求

在请求的结果还没回来之前手动取消 abort方法

<script>const btns=document.querySelectorAll('button');let x=null;btns[0].onclick=function(){x=new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay')x.send()//这里的x是这个函数的局部变量我还想在下面用就得去声明}btns[1].onclick=function(){x.abort();}</script>

本来x在第一个函数用const声明，但是下面还想用就不能再用const了，全局一个let x

4.AJAX请求重复发送问题

如果用户一直点击一个按钮，就是在重复请求，那么我们就把前面重复请求的停掉

定义一个isSending变量来判断是否在发送状态

 <button>点击发送</button><script>const btn=document.querySelector('button');let x=null;let isSending=false//是否正在发送AJAX请求btn.onclick=function(){if(isSending) x.abort();//如果正在发送就取消这个请求，创建一个新的x=new XMLHttpRequest();isSending=true;x.open('GET','http://127.0.0.1:8000/delay')x.send()x.onreadystatechange=function(){if(x.readyState==4){isSending=false;}}//这里的x是这个函数的局部变量我还想在下面用就得去声明}</script>

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

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

相关文章

工业级POE交换机的SSH配置步骤

工业级POE交换机的SSH配置步骤

工业级POE交换机的SSH&#xff08;Secure Shell&#xff09;配置可以通过以下步骤进行&#xff1a; 1. 连接到POE交换机&#xff1a;使用一个支持SSH协议的终端工具&#xff08;如PuTTY&#xff09;连接到POE交换机的管理接口。 2. 登录到POE交换机&#xff1a;输入正确的用户…
阅读更多...
详解Java 中的 Lambda 表达式

详解Java 中的 Lambda 表达式

引言&#xff1a; Lambda 表达式是 Java 8 中引入的一个重要特性&#xff0c;它可以使代码更加简洁、易读&#xff0c;并且更加具有函数式编程风格。Lambda 表达式本质上是一个匿名函数&#xff0c;它可以作为方法参数传递&#xff0c;也可以直接赋值给一个变量。 一、Lambda 表…
阅读更多...
【数据结构与算法】直接插入排序和希尔排序

【数据结构与算法】直接插入排序和希尔排序

引言 进入了初阶数据结构的一个新的主题——排序。所谓排序&#xff0c;就是一串记录&#xff0c;按照其中的某几个或某些关键字的大小&#xff08;一定的规则&#xff09;&#xff0c;递增或递减排列起来的操作。 排序的稳定性&#xff1a;在一定的规则下&#xff0c;两个值…
阅读更多...
电子方案：打地鼠

电子方案：打地鼠

打地鼠玩具是一种经典的儿童游戏&#xff0c;它结合了电子技术来增加娱乐性和互动性。 电子技术的集成使得打地鼠玩具不仅能够提供基本的娱乐功能&#xff0c;还能够提供更多的互动性和游戏性。随着技术的发展&#xff0c;打地鼠玩具可能会包含更多的高级功能&#xff0c;如无…
阅读更多...
如何使用 JavaScript 导入和导出 Excel

如何使用 JavaScript 导入和导出 Excel

前言 在现代的Web应用开发中&#xff0c;与Excel文件的导入和导出成为了一项常见而重要的任务。无论是数据交换、报告生成还是数据分析&#xff0c;与Excel文件的交互都扮演着至关重要的角色。本文小编将为大家介绍如何在熟悉的电子表格 UI 中轻松导入 Excel 文件&#xff0c;…
阅读更多...
Airflow【部署 01】调度和监控工作流工具Airflow官网Quick Start实操（一篇学会部署Airflow）

Airflow【部署 01】调度和监控工作流工具Airflow官网Quick Start实操（一篇学会部署Airflow）

Airflow官网Quick Start实操 1.环境变量设置2.使用约束文件进行安装3.启动单机版3.1 快速启动3.2 分步骤启动3.3 启动后3.4 服务启动停止脚本 4.访问4.1 登录4.2 测试 来自官网的介绍&#xff1a; https://airflow.apache.org/ Airflow™是一个由社区创建的平台&#xff0c;以…
阅读更多...
FFmpeg+mediamtx 实现将本地摄像头推送成RTSP流

FFmpeg+mediamtx 实现将本地摄像头推送成RTSP流

文章目录 概要推流过程实现过程安装FFmpeg安装Mediamtx 启动推流 概要 FFmpegmediamtx实现将本地摄像头推送成RTSP流 FFmpeg 版本号为&#xff1a;N-114298-g97d2990ea6-20240321 mediamtx 版本号为&#xff1a;v1.6.0 推流过程 摄像头数据&#xff0c;经过ffmpeg的推流代码…
阅读更多...
ESCTF-OSINT赛题WP

ESCTF-OSINT赛题WP

这你做不出来?check ESCTF{湖北大学_嘉会园食堂} 这个识图可以发现是 淡水渔人码头 但是 osint 你要发现所有信息 聊天记录说国外 同时 提示给了美国 你综合搜索 美国 渔人码头 在美国旧金山的渔人码头&#xff08;英语&#xff1a;Fisherman’s Wharf&#xff09;是一个著名旅…
阅读更多...
ubuntu虚拟机扩展容量后，无效，其实还需要分配

ubuntu虚拟机扩展容量后，无效，其实还需要分配

参考这位大佬&#xff1a;https://www.cnblogs.com/learningendless/p/17718003.html 如果直接使用磁盘调整大小会发现有钥匙 会被锁住&#xff0c;无法调整&#xff0c;按照大佬步骤做&#xff0c;亲测有效
阅读更多...
浅谈关于Linux的学习

浅谈关于Linux的学习

Linux的整个知识构架是&#xff1a; 1、基本指令 2、系统编程 3、网络编程 指令只是很基础的一部分&#xff0c;学习Linux更加重要的是其底层原理的知识&#xff0c;需要从基本的指令开始&#xff0c;逐级而上&#xff0c;次第往深处挖掘。最后构建起整个的知识体系。而不是仅…
阅读更多...
docker容器虚拟化-4

docker容器虚拟化-4

文章目录 虚拟化网络单节点容器间通信不同节点容器间通信 虚拟化网络 Network Namespace 是 Linux 内核提供的功能&#xff0c;是实现网络虚拟化的重要功能&#xff0c;它能创建多个隔离的网络空间&#xff0c;它们有独自网络栈信息。不管是虚拟机还是容器&#xff0c;运行的时…
阅读更多...
【大模型 数据增强】LLM2LLM：迭代学习 + 针对性增强 + 错误分析 + 合成数据生成 + 质量控制

【大模型 数据增强】LLM2LLM：迭代学习 + 针对性增强 + 错误分析 + 合成数据生成 + 质量控制

LLM2LLM&#xff1a;迭代学习 针对性增强 错误分析 合成数据生成 质量控制 提出背景针对性和迭代性数据增强&#xff08;LLM2LLM&#xff09;步骤1&#xff1a;在数据集上训练步骤2&#xff1a;在数据集上评估步骤3&#xff1a;生成额外数据 算法流程医学领域数据增强&…
阅读更多...
c++之旅第八弹——多态

c++之旅第八弹——多态

大家好啊&#xff0c;这里是c之旅第八弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一&#xff0…
阅读更多...
Java项目：74 ssm基于Java的超市管理系统+jsp

Java项目：74 ssm基于Java的超市管理系统+jsp

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 功能包括:商品分类&#xff0c;供货商管理&#xff0c;库存管理&#xff0c;销售统计&#xff0c;用户及角色管理&#xff0c;等等功能。项目采用mave…
阅读更多...
Selenium 自动化 —— 浏览器窗口操作

Selenium 自动化 —— 浏览器窗口操作

更多内容请关注我的专栏&#xff1a; 入门和 Hello World 实例使用WebDriverManager自动下载驱动Selenium IDE录制、回放、导出Java源码 当用 Selenium 打开浏览器后&#xff0c;我们就可以通过 Selenium 对浏览器做各种操作&#xff0c;就像我们日常用鼠标和键盘操作浏览器一…
阅读更多...
Spring Data Elasticsearch 与ES版本对应关系记录

Spring Data Elasticsearch 与ES版本对应关系记录

参考&#xff1a; Versions :: Spring Data Elasticsearch
阅读更多...
探索文件管理新境界：XYplorer，您的高效办公助手

探索文件管理新境界：XYplorer，您的高效办公助手

在这个数字化时代&#xff0c;文件管理已经成为我们日常工作和生活中不可或缺的一部分。但是&#xff0c;你是否经常在寻找一个文件时感到力不从心&#xff1f;是否厌倦了传统的文件管理方式&#xff1f;别担心&#xff0c;XYplorer 来了&#xff0c;它将彻底改变你的文件管理体…
阅读更多...
❤ leetCode简易题1-两数之和、简易2--回文数判断、简易14-最长公共前缀

❤ leetCode简易题1-两数之和、简易2--回文数判断、简易14-最长公共前缀

❤ leetCode简易题1-两数之和、简易题14- 最长公共前缀 1、简易1-两数之和 ① 题目要求 数字A B target&#xff0c;以target为求和结果&#xff0c;找出数组中符合的A、B数字下标。 第一次做的时候完全脑子一片蒙&#xff0c;随后认真看了看题目发现是发现找符合target和…
阅读更多...
了解一波经典的 I/O 模型

了解一波经典的 I/O 模型

最近读了波网络 I/O 相关的文章&#xff0c;做下总结、摘录。&#xff08;未完&#xff09; 经典 I/O 模型 {% checkbox red checked, 阻塞式 I/O&#xff08;blocking I/O&#xff09; %}{% checkbox red checked, 非阻塞式 I/O&#xff08;non-blocking I/O&#xff09; %}…
阅读更多...
docker可视化界面 - portainer安装

docker可视化界面 - portainer安装

目录 一、官方安装说明 二、安装portainer 2.1拉取镜像 2.2运行portainer容器 2.3登录和使用portainer 一、官方安装说明&#xff1a; Install PortainerChoose to install Portainer Business Edition or Portainer Community Edition.https://www.portainer.io/install…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023