当前位置: 首页 > article >正文

异步JavaScript,Ajax,API

异步JavaScript,Ajax,API

什么是异步JavaScript?

  • 先看同步代码
const p = document.querySelector('.p');
p.textContent = 'My name is ItShare!';
alert('文本弹窗');
p.style.color = 'red';
  • 大多数代码都是同步的;

  • 同步代码逐步执行;

  • 每一行代码都必须等待上一个代码执行完成;

  • 长时间运行的操作会阻塞代码的运行(例如上面的alert,必须点击弹窗的确认才能执行修改文本颜色的代码)

  • 异步代码
const p = document.querySelector('p');
setTimeout(function () {
    p.textContent = 'My name is ItShare!';
}, 5000);
p.style.color = 'red';
  • 这里的setTimeout定时器就是一个异步的函数;

  • 定时器中的回调函数在定时器结束时才会执行;

  • 异步函数可以在一定时间内协调代码的运行;

  • 异步代码在“后台”运行的任务完成后执行;

  • 异步代码时非阻塞的;

  • 执行不等待异步任务完成其工作。

  • 单独的回调函数不会时代码异步,如下所示

[1, 2, 3].map(v => v * 2);

//但是回调函数并不会使得代码异步
  • 另一个例子
const img = document.querySelector('.dog');
img.src = 'dog.jpg';
img.addEventListener('load',function () {
    img.classList.add('fadeIn');
});
p.style.width = '300px';
  • 这个事件监听器时异步的,但是代码本身并不是异步的;

  • 必须等待图片加载之后,这个监听器才会被触发;

  • 设想你的网页中有一个很大的图片,等他加载可能会很长时间,这时候通过这种方式就不会阻塞后面代码的执行;

什么是AJAX调用?

  • AJAX
  1. 异步JavaScript和XML:允许我们以异步方式与远程web服务器通信。通过AJAX调用,我们可以动态地从web服务器请求数据;

  2. AJAX名称中最初包含XML,这是一种数据格式,之前很常用,现在,JSON更加的被常用,因为JSON更轻量,更容易解析,与JavaScript有天然的兼容性;

这里简单的介绍一下, 后面的文章在做详细的解释和用法

什么是API?

  1. 应用程序编程接口:可以被另一个软件使用的软件,以允许应用程序相互通信

  2. 在WEB开发中有很多很多很多的API:

  • DOM API

  • Geolocation API

  • Own Class API

  1. 在线API:运行在服务器上的应用程序,接收数据请求,并将数据作为响应发送回去;

  2. 我们可以构建自己的web api(需要后台开发,例如使用node.js)或使用第三方api,当然这种API可以有很多;


http://www.kler.cn/a/445977.html

相关文章:

  • 进程与线程以及如何查看
  • Clickhouse(Centos)
  • 【前端】Jquery拍照,通过PHP将base64编码数据转换成PNG格式,并保存图像到本地
  • linux---多线程
  • Vue3 的 Teleport 是什么?在什么场景下会用到?
  • 算法笔记—前缀和(动态规划)
  • 【Prompt Engineering】4 推断
  • 登山第十六梯:深度恢复——解决机器人近视问题
  • 2、C#基于.net framework的应用开发实战编程 - 设计(二、二) - 编程手把手系列文章...
  • 获取显示器(主/副屏)友好名称(FriendlyName)
  • Android 设置沉浸式状态栏
  • shell7
  • 【C++】刷题强训(day16)--字符串替换、神奇数、DNA序列
  • MyBatis-Plus中isNull与SQL语法详解:处理空值的正确姿势
  • CICD篇之通过Jenkins中书写pipeline构建编译打包发布流程
  • Power Automate 简介
  • 【bash】linux中打包某个可执行文件及其依赖文件
  • Python实现应用最小二乘法融合SVM-LSTM回归模型电力负荷预测项目实战
  • AWR microwave office 仿真学习(二)使用多层结构天线/超表面的S参数确定层间距
  • jdk17用jmap -hea打印JVM堆信息报错Cannot connect to core dump or remote debug server
  • 岁末回望,追梦远方
  • tauri2中创建新的窗口方式,和tauri1不一样了哦
  • 【HTML】Shadow DOM
  • 对uniApp 组件 picker-view 的二次封装,实现日期,时间、自定义数据滚动选择,容易扩展
  • C#代码实现把中文录音文件(.mp3 .wav)转为文本文字内容
  • 使用Unity做一个3D吃豆人小游戏