异步JavaScript，Ajax，API

什么是异步JavaScript？

先看同步代码

js 复制代码

const p = document.querySelector('.p');
p.textContent = 'My name is ItShare!';
alert('文本弹窗');
p.style.color = 'red';

大多数代码都是同步的；

同步代码逐步执行；

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

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

异步代码

js 复制代码

const p = document.querySelector('p');
setTimeout(function () {
    p.textContent = 'My name is ItShare!';
}, 5000);
p.style.color = 'red';

这里的setTimeout定时器就是一个异步的函数；

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

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

异步代码在"后台"运行的任务完成后执行；

异步代码时非阻塞的；

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

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

js 复制代码

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

//但是回调函数并不会使得代码异步

另一个例子

js 复制代码

const img = document.querySelector('.dog');
img.src = 'dog.jpg';
img.addEventListener('load',function () {
    img.classList.add('fadeIn');
});
p.style.width = '300px';

这个事件监听器时异步的，但是代码本身并不是异步的；

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

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

什么是AJAX调用？

AJAX

异步JavaScript和XML：允许我们以异步方式与远程web服务器通信。通过AJAX调用，我们可以动态地从web服务器请求数据；

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

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

什么是API？

应用程序编程接口：可以被另一个软件使用的软件，以允许应用程序相互通信

在WEB开发中有很多很多很多的API：

DOM API

Geolocation API

Own Class API

...

在线API：运行在服务器上的应用程序，接收数据请求，并将数据作为响应发送回去；

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