ajax同步与异步,json-serve的安装与使用,node.js的下载

20.ajax

  1. json
    • 轻量级的数据格式
    • 做配置文件
    • 网络传输
  2. xml
    • 重量级的数据格式 可扩展标记语言
    • 做配置文件
    • 网络传输

现在目前主流就是大量采用json做网络传输数据格式

1.ajax的概念:

与服务器进行’通信’的一种技术,能够实现异步的刷新页面

**同步:**按照顺序一步步的执行,容易造成阻塞

**异步:**与同步是相对的,不一定按照顺序执行,不会造成阻塞

2.进程与线程

进程:

  1. 是操作系统资源’分配’的基本单位
  2. 程序从开始到结束的一次执行过程,一个基于操作系统的应用程序中一般至少会有一个进程

线程:

  1. 是操作系统’调度’的基本单位
  2. 一个进程当中程序同时运行多个分支,每个进程中至少会有一个主线程,可以有多个分线程(子线程),多个不同的线程是可以同时执行的(并行执行)

栈溢出 后进先出 LIFO

队列溢出 先进先出 FIFO

3.event loop 事件轮询

​ 宏任务 script同步 所有的事件 onclick onreadystatechange

​ 微任务 Promise() nextTick()

​ 任务队列 先进先出

​ 执行栈

  1. 先执行script,从上到下执行

  2. 开始执行 异步

    异步先执行 微任务.,是否还有微任务

  3. 宏任务 走一个 是否带有微任务

4.HTTP超文本协议

在这里插入图片描述

  1. 简单

  2. 支持 c/s 和b/s模式

  3. 灵活

  4. 无状态(对事物没有记忆能力)

    解决:cookie+session,cookie存储sessionID

    sessionId属于服务器的存储技术

    cookie属于浏览器的存储技术

  5. 无连接(断开式)

    完成一次请求+一次响应(session)会话之后,就断开

请求结构:(请求报文)

请求行(请求方式 请求路径 协议1.0/1.1/2.0)

1.0和1.1最大的区别:加了一个keep-alive(保持连接)

请求头(content-type:application/json,cookie)

请求体(key=value)

响应结构(响应报文)

状态行(协议 200 OK短语)

响应头 content-type:application:text/html ,text/css

响应体数据

5.异步代码的步骤

1.创建XMLHttpRequest

2.调用open方法(“请求方式”,地址,同步/异步)

  • 同步或异步:默认是异步,true也是异步,false是同步
  • 造成阻塞,它会占据主线程
  • 异步:开启了网络请求的线程,结合事件轮询 event loop的onreadystatechange

3.send()发生请求 ,如果是get请求,发生null,如果是post,通过send()携带参数

4.如果是同步的,直接判断Http的状态

​ 如果是异步的,绑定onreadystatechange事件,并结合readyState的状态码

  • readyState 0 尚未调用open
  • ​ 1 已经调用open方法,为调用send方法
  • ​ 2 已经调用了send方法
  • ​ 3 获取了部分结果
  • ​ 4 获取了全部的结果

4.通过xhr.response获得结果

  • xhr.responseText 接收文本
  • xhr.responseHTML 接收HTML
    同步代码
<!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>.box {width: 200px;height: 200px;position: absolute;}</style>
</head><body><button>get获取数据</button><div class="box">我是跑马灯</div><script>/* 栈溢出 后进先出 LIFO队列溢出 先进先出 FIFOevent loop 事件轮询宏任务 script同步 所有的事件 onclick onreadystatechange微任务 Promise() nextTick()任务队列 先进先出执行栈1.先执行script 从上到下执行2.开始执行 异步异步先执行 微任务..是否还有微任务3.宏任务 走一个 是否带有微任务http超文本传输协议1.简单2.支持 c/s 和b/s 模式3.灵活4.无状态(对事物没有记忆能力)解决:cookie+session,cookie存储sessionIdsession属于服务器的存储技术cookie属于浏览器的存储技术5.无连接(断开式)完成一次请求+一次响应(session)会话之后,就断开请求结构请求行(请求方式 请求路径 协议1.0/1.1/2.0)1.0和1.1最大的区别:加了一个Keep-alive(保持链接)请求头(content-type:application/json)换行 请求体 key=value响应的结构状态行 协议 1.1 200 ok(短语) 响应头 content-type:application ;text/html .text/css响应体 数据<div></div>*/// 0.创建xhrfunction createXHR() {if (window.XMLHttpRequest) {return new XMLHttpRequest()}return new ActiveXObject("Msxml2.XMLHTTP")//ie6+}function get(url) {// 1.得到xhrlet xhr = createXHR() //new XMLHttpRequest()// 2.给xhr配置请求的相关参数 open("请求方式",路径,同步/异步) true:异步,false:同步xhr.open("get", url, false)//同步会占据主线程,造成阻塞// 3.发送,由于get请求是通过URL带参数,send就发生nullxhr.send(null)// 4.判断状态,获取结果if (xhr.status == 200) {return xhr.response}}// 配置视图操作var btn = document.querySelector("button")btn.onclick = function () {var res = get("http://10.41.250.72:8888/list")console.log(res);}// 跑马灯const box = document.querySelector(".box")setInterval(() => {box.style.left = box.offsetLeft + 5 + "px"if (box.offsetLeft > document.documentElement.clientWidth) {box.style.left = "0px"}}, 60)</script>
</body></html>

异步代码

<!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>.box {width: 200px;height: 200px;position: absolute;}</style>
</head><body><button>get获取数据</button><div class="box">我是跑马灯</div><script>// 跑马灯const box = document.querySelector(".box")setInterval(() => {box.style.left = box.offsetLeft + 5 + "px"if (box.offsetLeft > document.documentElement.clientWidth) {box.style.left = "0px"}}, 60)// 创建xhr对象function createXHR() {if (window.XMLHttpRequest) {return new XMLHttpRequest()}return ActiveXObject("Msxml2.XMLHTTP")}// 获取xhrfunction get(url, callback) {let xhr = createXHR()//new XMLHttpRequest()xhr.open("get", url)//默认是true 异步xhr.send(null)// 什么时候响应数据呢?如果有数据来了,就自动触发onreadystatechange事件xhr.onreadystatechange = function () {if (xhr.status == 200 && xhr.readyState == 4) {callback(xhr.response)}}}document.querySelector("button").onclick = function () {get("http://10.41.250.72:8888/list", function (res) {console.log(res);})}/* 304:缓存501:服务器不支持当前请求*/</script>
</body></html>

6.ajax的get查询的方式

  1. 查询任意字段 ?q=值

  2. 查询性别 ?sex=女

  3. 姓名的模糊查询 ?name_like=易

  4. 分页 _page=1(第几页)&_limit=3(一页有几条数据)

  5. 排序

    根据年龄进行排序 desc降序

    ?_sort=age &_order=desc

    默认根据age升序

    ?_sort=age

  6. 截取 0-5条

    ?_start=0&_end=5

  7. 年龄大于等于30 ?age_gte=30

  8. 年龄小于等于30 ?age_lte=30

7.生成package.json文件

npm init -y

在这里插入图片描述

8.安装json-server

1.先安装node.js
node.js下载地址
接下来,无脑下一步即可
2. 如果cnpm没有就需要先安装

npm install -g cnpm --registry=https://registry.npmmirror.com

全局安装

cnpm i -g json-server

创建服务器
● 1. 在桌面上创建一个文件夹 temp-server
● 2.用vscode 打开 temp-server
● 3. 点击vscode的空白地方,选择在集成终端中打开
● 4.初始化 package.json的文件
npm init -y //初始package.json
在这里插入图片描述

● 在temp-server中创建 db.json文件 还有一个public的文件
● 在db.json中添加如下模拟数据

{"users":[{"id":1001,"avatar":"./images/1.jpg", "name":"刘德华","age":22,"sex":"女","datetime":"2022-12-19 20:02:34"},{"id":1002,"avatar":"./images/2.jpg", "name":"蔡徐坤","age":21,"sex":"男","datetime":"2022-12-20 20:02:34"},{"id":1003,"avatar":"./images/3.jpg", "name":"周杰伦","age":24,"sex":"女","datetime":"2022-12-01 20:02:34"},{"id":1004,"avatar":"./images/4.jpg", "name":"吴彦祖","age":28,"sex":"男","datetime":"2022-12-09 20:02:34"},{"id":1005,"avatar":"./images/5.jpg", "name":"彭于晏","age":30,"sex":"女","datetime":"2022-12-29 20:02:34"},{"id":1006,"avatar":"./images/6.jpg", "name":"赞","age":18,"sex":"男","datetime":"2022-12-06 20:02:34"}]
}

启动json-server

json-server db.json  -s ./public  -p 8888

访问

http://127.0.0.1:8888/users

查询

模糊查询
http://127.0.0.1:8888/users?q=刘      // q 模糊查询的字段
精确查询
http://127.0.0.1:8888/users?id=1001   根据id查询
http://127.0.0.1:8888/users?name=刘德华  根据name查询
http://127.0.0.1:8888/users?id_gte=1003&id_lte=1004   大于等于1003的,小于等于1004

静态页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.js"></script>
</head><body><!-- "id": 1001,"avatar": "./images/1.jpg","name": "刘德华","age": 22,"sex": "女","datetime": "2022-12-19 20:02:34" --><form><p><input type="file"> <img style="width:100px" name="avatar" src="" alt=""></p><p><input name="username" placeholder="姓名"></p><p><input name="age" placeholder="年龄"></p><p><input name="sex" type="radio" value="男" checked>男<input name="sex" type="radio" value="女">女</p><p><button>保存</button></p></form>
</body></html>

//图片预览

var oFile = document.querySelector("[type='file']");
oFile.onchange = function (e) {const fileread = new FileReader();fileread.readAsDataURL(e.target.files[0]);fileread.onload = function (e) {console.log(e.target.result);document.querySelector('[name="avatar"]').src = e.target.result;}
}
document.forms[0].onsubmit = function () {var oUser = {avatar: `./images/${oFile.files[0].name}`,name: this.username.value,age: this.age.value,sex: document.querySelector("[name='sex']:checked").value,datetime: moment().format('YYYY-MM-DD HH:mm:ss:SSS')}console.log(oUser);//发送到json-server上axios.post("http://127.0.0.1:8888/users", oUser).then(function (res) {console.log(res);})return false;
}//-----查询所有的数据
function loadData() {axios.get("http://localhost:8888/users").then(function (res) {console.log(res);})
}
loadData();//---- put 完全 修改
function modilfy(id = 1001) {axios({method: "put",url: `http://localhost:8888/users/${id}`,data: {name: "标哥"}}).then(function (res) {console.log(res);})
}//---- patch  部分 修改
function modilfy(id = 1001) {axios({method: "patch",url: `http://localhost:8888/users/${id}`,data: {name: "标哥"}}).then(function (res) {console.log(res);})
}//分页 带排序
function getPage(pageIndex = 1, pageSize = 5) {axios.get("http://localhost:8888/users", {params: {_page: pageIndex,_limit: pageSize,_sort: "id",_order: "desc"  //升序 asc,  desc 降序}}).then(function (res) {console.log(res);})
}//删除
//分页 带排序
function deleteById(id) {axios({url: `http://localhost:8888/users/${id}`,method: "delete"}).then(function (res) {console.log(res);})
}//模糊搜索,返回是一个数组 
function search(str) {axios.get("http://localhost:8888/users",{params:{q:str}}).then(function (res) {console.log(res.data);})
}

json-server使用
json-server启动后，在程序根目录json-server会自动生成db.json文件，通过修改该文件可配置测试的接口类型。在终端上， ctrl+c终止处理操作，输入指令npm run json:server-remote可自动下载官网的接口实例。
接口请求参数如下：
1、分页【关键字：_page】
应用：http://localhost:3000/posts?_page=1
2、排序【关键字：_sort,_order】
_sort后面为要分类的键名，_order为排序的方式，DESC(倒序)，ASC(顺序)。
应用：http://localhost:3000/posts?_sort=author
应用：http://localhost:3000/posts?_sort=author&_order=DESC
3、切分【关键字：_start,_end,_limit】
类似于js里面的slice函数。slice(_start,_end),从数据里面取出数据。数据不包括_end,_limit可以和_start配合，表示从_start位置开始_limit条数据被取出来。
应用：http://localhost:3000/posts?_start=1&_limit=3
4、操作【关键字：_gte,_lte,_ne,[key]_like】
_gte：大于或等于，_lte：小于或等于，_ne：不等于，[key]_like：模糊搜索
应用：http://localhost:3000/posts?author_like=author
5、全局搜索【关键字：q】
q为数据中全局搜索传入的参数
应用：http://localhost:3000/posts?q=json
6、字段扩展【关键字：_embed,_expand】
_embed：扩展子数据字段，_expand：扩展父数据字段

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

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

相关文章

VMware和Debian下载

VMware和Debian下载

文章目录 ⭐️写在前面的话⭐️一、VMware二、Debain三、建立虚拟机&#x1f680; 先看后赞&#xff0c;养成习惯&#xff01;&#x1f680;&#x1f680; 先看后赞&#xff0c;养成习惯&#xff01;&#x1f680; ⭐️写在前面的话⭐️ CSDN主页&#xff1a;程序员好冰 目前在…
阅读更多...
多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测

多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测

多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测 目录 多输入多输出 | MATLAB实现CNN-GRU-Attention卷积神经网络-门控循环单元结合SE注意力机制的多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果…
阅读更多...
使用PyTorch处理多维特征输入的完美指南

使用PyTorch处理多维特征输入的完美指南

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
Element Plus阻止 el-dropdown、el-switch等冒泡事件

Element Plus阻止 el-dropdown、el-switch等冒泡事件

最近做vue3项目&#xff0c;使用Element Plus,又遇到坑了&#xff01; 问题点&#xff1a;组件中遇到事件冒泡问题了&#xff0c;el-checkbox 中 change事件要求阻止冒泡&#xff0c;如下代码中要求点击checkbox时不调用li标签的show方法 <li click"show()">…
阅读更多...
STM32物联网基于ZigBee智能家居控制系统

STM32物联网基于ZigBee智能家居控制系统

实践制作DIY- GC0169-ZigBee智能家居 一、功能说明&#xff1a; 基于STM32单片机设计-ZigBee智能家居 二、功能介绍&#xff1a; 1个主机显示板&#xff1a;STM32F103C最小系统ZigBee无线模块OLED显示器 语音识别模块多个按键ESP8266-WIFI模块&#xff08;仅WIFI版本有&…
阅读更多...
Spring Cloud Pipelines 入门实践

Spring Cloud Pipelines 入门实践

文章目录 1. 前言2. Spring Cloud Pipelines 是做什么的2.1. 预定义的流程2.2. 集成测试和契约测试2.3.部署策略 4. Spring Cloud Pipelines的使用示例4.1. 创建一个Spring Boot应用4.2. 将代码托管到GitHub仓库4.3. 添加Spring Cloud Pipelines依赖4.4. 配置Spring Cloud Pipe…
阅读更多...
生成Android证书

生成Android证书

前提&#xff1a;确保本机安装好了java1.8 第一步 打开CMD keytool -genkey -alias AAAA -keyalg RSA -keysize 2048 -validity 36500 -keystore D:\mygitee\keyStore\szxApp.jksD:\mygitee\keyStore\szxApp.jks是证书要生成的位置 szxApp.jks 是证书名称 D:\mygitee\keySto…
阅读更多...
volatile为什么无法保证原子性

volatile为什么无法保证原子性

假设定义 volatile int i 0; 现在2个线程同时 i&#xff0c;为什么数据还可能会出错&#xff1f;一起来看下图&#xff0c;虽然volatile的机制是&#xff1a;如果volatile修饰的变量有修改&#xff0c;那么会将变更内容写回主内存&#xff0c;同时让其他线程工作内存的该变量缓…
阅读更多...
Pytorvh之Vision Transformer图像分类

Pytorvh之Vision Transformer图像分类

文章目录 前言一、Transformer1.Transformer概览2.Self-Attention3.Multi-head Attention4.Position-wise Feed-Forward Networks(位置前馈网络)5.残差连接和层归一化6.Positional Encodings(位置编码) 二、Vision Transformer1.Vision Transformer概览2.Embedding层结构&#…
阅读更多...
计算机网络 | OSI 参考模型

计算机网络 | OSI 参考模型

计算机网络 | OSI 参考模型 计算机网络 | OSI 参考模型应用层表示层会话层传输层网络层数据链路层物理层 参考视频&#xff1a;王道计算机考研 计算机网络 参考书&#xff1a;《2022年计算机网络考研复习指导》 计算机网络 | OSI 参考模型 OSI 参考模型自下而上分为7层&…
阅读更多...
Text-to-SQL小白入门（八）RLAIF论文：AI代替人类反馈的强化学习

Text-to-SQL小白入门（八）RLAIF论文：AI代替人类反馈的强化学习

学习RLAIF论文前&#xff0c;可以先学习一下基于人类反馈的强化学习RLHF&#xff0c;相关的微调方法&#xff08;比如强化学习系列RLHF、RRHF、RLTF、RRTF&#xff09;的论文、数据集、代码等汇总都可以参考GitHub项目&#xff1a;GitHub - eosphoros-ai/Awesome-Text2SQL: Cur…
阅读更多...
MIT 6.S081 Operating System/Fall 2020 macOS搭建risc-v与xv6开发调试环境

MIT 6.S081 Operating System/Fall 2020 macOS搭建risc-v与xv6开发调试环境

文章目录 本机配置安装环境Homebrew执行安装脚本查看安装是否成功 RISC-V tools执行brew的安装脚本 QEMUXV6 测试有用的参考链接&#xff08;感谢前辈&#xff09;写在结尾 本机配置 电脑型号&#xff1a;Apple M2 Pro 2023 操作系统&#xff1a;macOS Ventura 13.4 所以我的电…
阅读更多...
JVM第六讲：JVM 基础 - Java 内存模型引入

JVM第六讲：JVM 基础 - Java 内存模型引入

JVM 基础 - Java 内存模型引入 很多人都无法区分Java内存模型和JVM内存结构&#xff0c;以及Java内存模型与物理内存之间的关系。本文是JVM第六讲&#xff0c;从堆栈角度引入JMM&#xff0c;然后介绍JMM和物理内存之间的关系, 为后面JMM详解, JVM 内存结构详解, Java 对象模型详…
阅读更多...
蓝桥杯基础---切面条

蓝桥杯基础---切面条

切面条 一根高筋拉面&#xff0c;中间切一刀&#xff0c;可以得到2根面条。 如果先对折1次&#xff0c;中间切一刀&#xff0c;可以得到3根面条。 如果连续对折2次&#xff0c;中间切一刀&#xff0c;可以得到5根面条。 那么&#xff0c;连续对折10次&#xff0c;中间切一刀…
阅读更多...
[C++随想录] 继承

[C++随想录] 继承

继承 继承的引言基类和子类的赋值转换继承中的作用域派生类中的默认成员函数继承与友元继承与静态成员多继承的结构棱形继承的结构棱形虚拟继承的结构继承与组合 继承的引言 概念 继承(inheritance)机制是面向对象程序设计使代码可以 复用的最重要的手段&#xff0c;它允许程序…
阅读更多...
玩转Linux Shell Terminal Tmux

玩转Linux Shell Terminal Tmux

一、Shell编程☘️ 1. Shell指令快捷操作 1. echo # 系统指令 $ echo $(pwd) # 对于系统自带的pwd&#xff0c;此处不能写echo $pwd# 自定义变量 $ foo$(pwd) $ echo $foo # 不同于pwd&#xff0c;对于自定义的foo&#xff0c;不能用$(foo)2. !! # 假设你先执行了以下原本…
阅读更多...
python基于django的留学生服务管理平台

python基于django的留学生服务管理平台

留学服务管理平台的用户是系统最根本使用者&#xff0c;按需要分析系统包括三类用户&#xff1a;学生、教师、管理员。这三类用户对系统的需求简要如下。技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vueCSSJavaScriptjQueryelementui 开发语言&#xff1a;Python 框架…
阅读更多...
深度学习基础知识 给模型的不同层 设置不同学习率

深度学习基础知识 给模型的不同层 设置不同学习率

深度学习基础知识 给模型的不同层 设置不同学习率 1、使用预训练模型时&#xff0c;可能需要将2、学习率设置方式&#xff1a; 1、使用预训练模型时&#xff0c;可能需要将 &#xff08;1&#xff09;预训练好的 backbone 的 参数学习率设置为较小值&#xff0c; &#xff08;2…
阅读更多...
深入了解Spring Boot Actuator

深入了解Spring Boot Actuator

文章目录 引言什么是ActuatorActuator的底层技术和原理端点自动配置端点请求处理端点数据提供端点数据暴露 如何使用Actuator添加依赖访问端点自定义端点 实例演示结论 引言 Spring Boot Actuator是一个非常强大且广泛使用的模块&#xff0c;它为Spring Boot应用程序提供了一套…
阅读更多...
需永远在线的游戏公司，如何在线替换开源存储？

需永远在线的游戏公司，如何在线替换开源存储？

小帅是一个酷爱游戏的玩家&#xff0c;他玩一款游戏已经很久了&#xff0c;始终乐在其中。 这款游戏风靡全球&#xff0c;在中国手游出海榜单中&#xff0c;长期位居榜首。 他不知道的是&#xff0c;就在他玩游戏的过程中&#xff0c;这款游戏的出品公司&#xff0c;其实已经…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023