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.rhkb.cn/news/161258.html

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

相关文章

算法通过村第十四关-堆|黄金笔记|中位数

算法通过村第十四关-堆|黄金笔记|中位数

文章目录 前言数据流中的中位数的问题总结 前言 提示&#xff1a;我独自度过了太多的时光&#xff0c;沉默已成一种习惯。 帕瑞尔马卡姆《夜航西飞》 这个是一个比较难的题目&#xff0c;要不尝试一下看看。 数据流中的中位数的问题 参考题目地址&#xff1a;295. 数据流的中位…
阅读更多...
MyBatisPlus-02

MyBatisPlus-02

一 查询条件的三种 1.按条件查询 //方式一&#xff1a;按条件查询QueryWrapper qw new QueryWrapper();qw.lt("age",18);List<User> userList userDao.selectList(qw);System.out.println(userList); 2.lambda格式按条件查询 //方式二&#xff1a;lambda格…
阅读更多...
基于EtherCAT的机器人多轴同步运动控制

基于EtherCAT的机器人多轴同步运动控制

随着工业自动化的发展&#xff0c;机器人在生产线上的应用越来越广泛。为了实现高效、精确的运动控制&#xff0c;机器人的多轴运动必须能够实现同步操作&#xff0c;它能够提高机器人的运动精度和稳定性&#xff0c;实现更高效的生产线操作。同时&#xff0c;它也为机器人的协…
阅读更多...
WebGPU入门一

WebGPU入门一

1 WebGPU学习开发环境配置 WebGPU的环境配置比较简单&#xff0c;不需要vite或webpack配置一个复杂的开发环境&#xff0c;直接使用.html文件即可。 1.1 支持WebGPU的浏览器 Chrome 113 beta测试版开始默认支持WebGPU。 1.2 index.html文件 创建index.html文件&#xff0c…
阅读更多...
C++进阶篇1---继承

C++进阶篇1---继承

一、继承的概念和定义 1.1概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称为派生类。继承呈现了面向对象程序设计的层次结构&#xff…
阅读更多...
ExoPlayer架构详解与源码分析（5）——MediaSource

ExoPlayer架构详解与源码分析（5）——MediaSource

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…
阅读更多...
掌握Python爬虫实现网站关键词扩展提升曝光率

掌握Python爬虫实现网站关键词扩展提升曝光率

目录 一、关键词优化的重要性 二、关键词优化的基本方法 1、选择与网站内容相关的关键词 2、控制关键词的密度和分布 3、关键词的层次布局 三、Python爬虫实现网站关键词扩展 1、确定目标网站 2、分析目标网站的HTML结构 3、编写Python爬虫代码 4、分析爬取到的关键词…
阅读更多...
【算法练习Day22】 组合总和 III电话号码的字母组合

【算法练习Day22】 组合总和 III电话号码的字母组合

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 组合总和 III剪枝 电话号码…
阅读更多...
深入理解React中的useEffect钩子函数

深入理解React中的useEffect钩子函数

引言&#xff1a; React是一种流行的JavaScript库&#xff0c;它通过组件化和声明式编程的方式简化了前端开发。在React中&#xff0c;一个核心概念是组件的生命周期&#xff0c;其中包含了许多钩子函数&#xff0c;用于管理组件的不同阶段。其中之一就是useEffect钩子函数&…
阅读更多...
LuaJit交叉编译移植到ARM Linux

LuaJit交叉编译移植到ARM Linux

简述 Lua与LuaJit的主要区别在于LuaJIT是基于JIT&#xff08;Just-In-Time&#xff09;技术开发的&#xff0c;可以实现动态编译和执行代码&#xff0c;从而提高了程序的运行效率。而Lua是基于解释器技术开发的&#xff0c;不能像LuaJIT那样进行代码的即时编译和执行。因此&…
阅读更多...
系统架构与Tomcat的安装和配置

系统架构与Tomcat的安装和配置

2023.10.16 今天是学习javaweb的第一天&#xff0c;主要学习了系统架构的相关知识和原理&#xff0c;下载了web服务器软件&#xff1a;Tomcat&#xff0c;并对其进行了配置。 系统架构 包括&#xff1a;C/S架构 和 B/S架构。 C/S架构&#xff1a; Client / Server&#xff0…
阅读更多...
离散数学 学习 之 递推方程和生成函数

离散数学 学习 之 递推方程和生成函数

递推方程 注意这里的特征根一定不是相等 特解的话一般要去设出基本的形式 这是0 次多项式 生成函数
阅读更多...
【JAVA】集合与背后的逻辑框架，包装类，List，Map，Set，静态内部类

【JAVA】集合与背后的逻辑框架，包装类，List，Map，Set，静态内部类

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 collectionCollection创建collection使用泛型collection方法 Map 接口Map的存储结构HashMap和Tr…
阅读更多...
lenovo联想笔记本ThinkPad系列T15p或P15v Gen3(21DA,21DB,21D8,21D9)原厂Win11系统镜像

lenovo联想笔记本ThinkPad系列T15p或P15v Gen3(21DA,21DB,21D8,21D9)原厂Win11系统镜像

下载链接&#xff1a;https://pan.baidu.com/s/1V4UXFhYZUNy2ZQ8u4x1AFg?pwdqz0s 系统自带指纹驱动、人脸识别驱动、显卡、声卡等所有驱动、出厂主题壁纸、Office办公软件、Lenovo联想电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO …
阅读更多...
一篇文章带你搞定所有二叉树题型的递归思维（思路超详细）

一篇文章带你搞定所有二叉树题型的递归思维（思路超详细）

文章目录 &#x1f380;前言&#xff1a;&#x1f3c5;先在开头总结一下&#xff0c;二叉树解题的思维模式分两类&#xff1a;&#x1f387;先解释一下“前序位置”&#xff0c;“后序位置”的意思&#x1f3e8;举一个简单的例子&#xff1a; &#x1fa80;下面通过两道例题&am…
阅读更多...
从自动化到测开，测试人员逆袭之路从此起步

从自动化到测开，测试人员逆袭之路从此起步

在当今竞争激烈的软件测试行业中&#xff0c;近期的招聘市场确实面临一些挑战。大量的求职者争相涌入岗位&#xff0c;许多热衷于功能测试的人士甚至难以找到理想的工作机会。更不幸的是&#xff0c;连自动化测试和性能测试这些专业领域也受到了测试开发人员的竞争压力。然而&a…
阅读更多...
C# 图解教程 第5版 —— 第4章 类型、存储和变量

C# 图解教程 第5版 —— 第4章 类型、存储和变量

文章目录 4.1 C# 程序是一组类型声明4.2 类型是一种模板&#xff08;*&#xff09;4.3 实例化类型4.4 数据成员和函数成员4.5 预定义类型4.6 用户定义类型4.7 堆和栈&#xff08;*&#xff09;4.8 值类型和引用类型4.9 变量4.9.1 变量声明4.9.2 多变量声明&#xff08;*&#x…
阅读更多...
模式植物背景基因集制作

模式植物背景基因集制作

一边学习&#xff0c;一边总结&#xff0c;一边分享&#xff01; 写在前面 关于GO背景基因集文件的制作&#xff0c;我们在很早以前也发过。近两天&#xff0c;自己在分析时候&#xff0c;也是被搞了头疼。想重新制作一份GO背景基因集&#xff0c;进行富集分析。但是结果&…
阅读更多...
排序【七大排序】

排序【七大排序】

文章目录 1. 排序的概念及引用1.1 排序的概念1.2 常见的排序算法 2. 常见排序算法的实现2.1 插入排序2.1.1基本思想&#xff1a;2.1.2 直接插入排序2.1.3 希尔排序( 缩小增量排序 ) 2.2 选择排序2.2.1基本思想&#xff1a;2.2.2 直接选择排序:2.2.3 堆排序 2.3 交换排序2.3.1冒…
阅读更多...
uniapp小程序中给web-view页面添加授权弹窗（使用cover-view组件覆盖实现该功能）

uniapp小程序中给web-view页面添加授权弹窗（使用cover-view组件覆盖实现该功能）

效果图&#xff1a; web-view是承载网页的容器。会自动铺满整个小程序页面&#xff0c;个人类型的小程序暂不支持使用。 再看下面一个提示&#xff1a; 每个页面只能有一个 web-view&#xff0c;web-view 会自动铺满整个页面&#xff0c;并覆盖其他组件。 也就是说&#xff0c;…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023