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

news2024/10/6 8:37:44

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
            队列溢出 先进先出 FIFO

            event loop 事件轮询
                宏任务 script同步 所有的事件 onclick onreadystatechange
                微任务 Promise() nextTick()
                任务队列 先进先出
                执行栈

            1.先执行script 从上到下执行
            2.开始执行 异步
                异步先执行 微任务..是否还有微任务
            3.宏任务 走一个 是否带有微任务

            http超文本传输协议
            1.简单
            2.支持 c/s 和b/s 模式
            3.灵活
            4.无状态(对事物没有记忆能力)
                解决:cookie+session,cookie存储sessionId
                session属于服务器的存储技术
                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.创建xhr
        function createXHR() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest()
            }
            return new ActiveXObject("Msxml2.XMLHTTP")//ie6+
        }
        function get(url) {
            // 1.得到xhr
            let xhr = createXHR() //new XMLHttpRequest()
            // 2.给xhr配置请求的相关参数 open("请求方式",路径,同步/异步) true:异步,false:同步
            xhr.open("get", url, false)//同步会占据主线程,造成阻塞
            // 3.发送,由于get请求是通过URL带参数,send就发生null
            xhr.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")
        }
        // 获取xhr
        function 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.coloradmin.cn/o/1085382.html

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

相关文章

Python应用-矩阵乘法-特征提取

Python应用-矩阵乘法-特征提取

目录 常规运算应用场景&#xff1a;特征提取特征矩阵权重矩阵举例说明代码展示 常规运算 import numpy as npmatrix1 np.array([[1, 2], [3, 4]]) matrix2 np.array([[5, 6], [7, 8]]) result np.dot(matrix1, matrix2) print(result) 输出结果&#xff1a; [[19 22][43 …
阅读更多...
是谁还没听过杨氏矩阵~原理和实现代码都已经准备好了

是谁还没听过杨氏矩阵~原理和实现代码都已经准备好了

有一个数字矩阵&#xff0c;矩阵的每行从左到右是递增的&#xff0c;矩阵从上到下是递增的&#xff0c;请编写程序在这样的矩阵中查找某个数字是否存在。 要求&#xff1a;时间复杂度小于O(N); 看到这个题目时&#xff0c;我们会马上想到暴力求解&#xff0c;即遍历这个矩阵的每…
阅读更多...
Excel往Word复制表格时删除空格

Excel往Word复制表格时删除空格

1.背景 在编写文档&#xff0c;经常需要从Excel往Word里复制表格 但是复制过去的表格前面会出现空格&#xff08;缩进&#xff09; 再WPS中试了很多方法&#xff0c;终于摆脱了挨个删除的困扰 2. WPS排版中删除 选择表格菜单栏-选在【开始】-【排版】选择【更多段落处理】-【段…
阅读更多...
论文阅读/写作扫盲

论文阅读/写作扫盲

第一节&#xff1a;期刊科普 JCR分区和中科院分区是用于对期刊进行分类和评估的两种常见方法。它们的存在是为了帮助学术界和研究人员更好地了解期刊的学术质量、影响力和地位。 JCR分区&#xff08;Journal Citation Reports&#xff09;&#xff1a;JCR分区是由Clarivate Ana…
阅读更多...
优雅而高效的JavaScript——箭头函数

优雅而高效的JavaScript——箭头函数

&#x1f917;博主&#xff1a;小猫娃来啦 &#x1f917;文章核心&#xff1a;优雅而高效的JavaScript——箭头函数 文章目录 前言箭头函数的基本语法和特点箭头函数的语法箭头函数的词法绑定特性箭头函数的this值箭头函数无法使用arguments对象 箭头函数与传统函数的比较箭头函…
阅读更多...
端口被占用？两步解决端口占用问题

端口被占用？两步解决端口占用问题

第一步&#xff1a;WinR 打开命令提示符&#xff0c;输入netstat -ano|findstr 端口号&#xff0c;找到被占用端口的进程 第二步&#xff1a; 杀死使用该端口的进程&#xff0c;输入taskkill /t /f /im 进程号&#xff08; 注意是进程号&#xff0c;不是端口号&#xff09;
阅读更多...
身份证号码，格式校验：@IdCard（自定义注解）

身份证号码，格式校验：@IdCard（自定义注解）

目标 自定义一个用于校验 身份证号码 格式的注解IdCard&#xff0c;能够和现有的 Validation 兼容&#xff0c;使用方式和其他校验注解保持一致&#xff08;使用 Valid 注解接口参数&#xff09;。 校验逻辑 有效格式 符合国家标准。 公民身份号码按照GB11643&#xff0d;…
阅读更多...
Vue2实现图片预览功能 -- v-viewer：图片查看器

Vue2实现图片预览功能 -- v-viewer：图片查看器

一. 先看效果图 二. 具体步骤 简介&#xff1a;一款基于 viewer.js 封装的Vue版插件&#xff0c;可用于图像查看&#xff0c;以及图片的旋转、缩放等功能预览 官网&#xff1a;v-viewer 文档说明&#xff1a;Vue图片浏览组件v-viewer&#xff0c;支持旋转、缩放、翻转等操作 - …
阅读更多...
字符设备和杂项设备总结

字符设备和杂项设备总结

字符设备是 3 大类设备&#xff08;字符设备、块设备和网络设备&#xff09;中的一类&#xff0c;其驱动程序完成的主要工作是初始化、添加和删除 cdev 结构体&#xff0c;申请和释放设备号&#xff0c;以及填充 file_operations 结构体中的操作函数&#xff0c;实现file_opera…
阅读更多...
# Web server failed to start. Port 9793 was already in use

# Web server failed to start. Port 9793 was already in use

Web server failed to start. Port 9793 was already in use. 文章目录 Web server failed to start. Port 9793 was already in use.报错描述报错原因解决方法Spring Boot 修改默认端口号关闭占用某一端口号的进程关闭该进程 报错描述 Springboot项目启动控制台报错 Error st…
阅读更多...
LeetCode【15】三数之和

LeetCode【15】三数之和

题目&#xff1a; 解析&#xff1a; 参考&#xff1a;https://zhuanlan.zhihu.com/p/111715985 代码&#xff1a; public static List<List<Integer>> threeSum(int[] nums) {// 先排序Arrays.sort(nums);List<List<Integer>> result new ArrayLis…
阅读更多...
房产中介租房小程序系统开发搭建

房产中介租房小程序系统开发搭建

随着移动互联网的发展&#xff0c;租房小程序已经成为许多房产中介公司转型线上的重要工具。通过租房小程序&#xff0c;房产中介公司可以方便地展示房源信息、吸引租户、达成交易。那么&#xff0c;如何通过乔拓云网开发租房小程序呢&#xff1f;下面是详细的开发指南。 1.进入…
阅读更多...
《UnityShader入门精要》学习1

《UnityShader入门精要》学习1

读者可以在开源网站github&#xff08;https://github.com/candycat1992/Unity_Shaders_Book&#xff09;上下载本书的源代码。 第二章 渲染流水线 渲染流水线的最终目的在于生成或者说是渲染一张二维纹理&#xff0c;即我们在电脑屏幕上看到的所有效果&#xff0c;它的输入是…
阅读更多...
微软警告国家级黑客正在利用关键的Atlassian Confluence漏洞

微软警告国家级黑客正在利用关键的Atlassian Confluence漏洞

导语&#xff1a;近日&#xff0c;微软发布警告称&#xff0c;国家级黑客组织正在利用Atlassian Confluence的关键漏洞进行攻击。该漏洞已被微软追踪到一个名为Storm-0062&#xff08;又称DarkShadow或Oro0lxy&#xff09;的黑客组织。微软的威胁情报团队表示&#xff0c;他们自…
阅读更多...
三次挥手和四次握手

三次挥手和四次握手

TCP建立连接&#xff08;三次握手&#xff09; 经过DNS域名解析后&#xff0c;获取到了服务器的IP地址&#xff0c;在获取到IP地址后&#xff0c;便会开始建立一次连接&#xff0c;这是由TCP协议完成的&#xff0c;主要通过三次握手进行连接。 第一次握手&#xff1a; 建立连…
阅读更多...
MySQL 2 环境搭建（MySQL5.7.43和8.0.34的下载；8.0.34的安装、配置教程 ）

MySQL 2 环境搭建（MySQL5.7.43和8.0.34的下载；8.0.34的安装、配置教程 ）

目录 MySQL的下载、8.0.34的安装及配置 1 MySQL版本介绍 2 MySQL 下载 1. 下载地址 2. 打开官网&#xff0c;点击DOWNLOADS ​编辑 3. 点击 MySQL Community Server 4. 在General Availability(GA) Releases中选择适合的版本 5.下载8.0.34和5.7.43版本 3 MySQL8.0 …
阅读更多...
数据集笔记：分析OpenCellID 不同radio/ create_time update_time可视化

数据集笔记：分析OpenCellID 不同radio/ create_time update_time可视化

1 读取数据 &#xff08;以新加坡的cellID为例&#xff09; import geopandas as gpd import pandas as pdopencellidpd.read_csv(OpenCellID_SG.csv,headerNone,names[radio,mcc,net,area,cell,unit,lon,lat,range,samples,changeable1,created1,updated,AveSignal]) opence…
阅读更多...
2024届通信工程保研经验分享（预推免入营即offer）

2024届通信工程保研经验分享（预推免入营即offer）

2024届通信工程保研经验分享&#xff08;预推免入营即offer&#xff09; BackGround夏令营情况&#xff1a;预推免情况&#xff1a; BackGround 本科院校&#xff1a;末九 专业&#xff1a;通信工程 rank&#xff1a;3/123&#xff08;预推免绩点排名&#xff09;&#xff0…
阅读更多...
我用了多年的前端框架，强烈推荐！

我用了多年的前端框架，强烈推荐！

大家好&#xff0c;我是鱼皮&#xff0c;今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— Ant Design Pro。 什么是 Ant Design Pro&#xff1f; Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架&#xff0c;专门用于构建企业级管理…
阅读更多...
Linux：redis集群（3.*版本 和 5.*版本）搭建方法

Linux：redis集群（3.*版本 和 5.*版本）搭建方法

介绍 至少6个实例才能组成集群。3主3从会自动分配 Redis集群原理 Redis集群架构 Redis Cluster采用虚拟槽分区&#xff0c;将所有的数据根据算法映射到0~16383整数槽内 Redis Cluster是一个无中心的结构 每个节点都保存数据和整个集群的状态 集群角色 Master&#xff1a;Master…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023