http请求：XMLHttpRequest， Fetch， AXIOS

Extensible Markup Language(可扩展标记语言), 是可由文档对象模型(DOM)严格序列化的一种语言。它是一种类似于 HTML 的标记语言，但是 XML 没有使用预定义的标记。因此，您可以根据自己的设计需求定义专属于您的标记。这是一种十分有用的可存储、可搜索和可共享的格式存储数据的方法。最重要的是，因为 XML 的基本格式是标准化的，所以如果您跨系统或平台共享或传输 XML ，无论是在本地还是在互联网上，接收方仍然可以根据标准化的 XML 语法解析数据。

JSON:

JSON对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。除了这两个方法, JSON这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript不是JSON，JSON也不是JavaScript。

- 方法

JSON.parse()： 解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。

JSON.stringify()： 返回与指定值对应的JSON字符串，可以通过额外的参数, 控制仅包含某些属性, 或者以自定义方法来替换某些key对应的属性值。

//THIS IS A STRING OF JSON (NOT AN OBJECT)
const data = `{"ticker":{"base":"BTC","target":"USD","price":"11288.49813464","volume":"91769.69699773","change":"-46.29462447"},"timestamp":1596510482,"success":true,"error":""}`

// THIS IS A JS OBJECT
const parsedData = JSON.parse(data);

什么是AJAX?

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息

XMLHttpRequest

The original way of sending requests via JS

Does not support promises, so...., lots of callbacks

// NOT AT ALL IMPORTANT TO REMEMBER ANY OF THIS CODE!
const req = new XMLHttpRequest();

req.onload = function () {
    console.log("ALL DONE WITH REQUEST!!!")
    const data = JSON.parse(this.responseText);
    console.log(data.ticker.price);
}

req.onerror = function () {
    console.log("ERROR!!!")
    console.log(this);
}

req.open('GET', 'https://api.cryptonator.com/api/ticker/btc-usd')
req.send();

Fetch

The newer way of making requests via JS

supports promises

Not support in Internet Explorer

// fetch('https://api.cryptonator.com/api/ticker/btc-usd')
//     .then(res => {
//         console.log("RESPONSE, WAITING TO PARSE...", res)
//         return res.json()
//     })
//     .then(data => {
//         console.log("DATA PARSED...")
//         console.log(data.ticker.price)
//     })
//     .catch(e => {
//         console.log("OH NO! ERROR!", e)
//     })


const fetchBitcoinPrice = async () => {
    try {
        const res = await fetch('https://api.cryptonator.com/api/ticker/btc-usd');
        const data = await res.json();
        console.log(data.ticker.price)
    } catch (e) {
        console.log("SOMETHING WENT WRONG!!!", e)
    }
}

AXIOS

A library for making HTTP requests

HTML文件中必须包含这个：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

以下例子是使用Cryptocurrencies exchange rates API： https://www.cryptonator.com/api/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

const fetchBitcoinPrice = async () => {
    try {
        const res = await axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
        console.log(res.data.ticker.price)
    } catch (e) {
        console.log("ERROR!", e)
    }
}

什么是API：Application Programming Interface

一个 API（Application Programming Interface，应用编程接口）是软件（应用）中的一系列特性和规则，这些特性和规则允许其他软件与之交互（与用户界面相对）。API 可被视为提供它的应用与其他软硬件之间的一个简单的合约（接口）。

在 Web 开发中，API 通常是开发者能用在应用（app）中的一系列代码特性（如方法、属性、事件和 URL），这些特性被用于与用户的 web 浏览器中的组件、用户电脑上的其他软硬件或者第三方软件与服务交互。

例如：

getUserMedia API 能被用于从用户的摄像头采集音视频。接下来开发者可以任意使用这些音视频，例如记录视频和音频、在视频会议中向其他用户广播，或者从视频中截图。
Geolocation API 能被用于从用户的可用的任意定位设备（如 GPS）获取位置信息，然后可以再用 Google Maps APIs 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
Twitter APIs 能被用于从用户的 twitter 账户获取数据，然后可以在一个网页上展示他们最近的 tweet 。
Web Animations API 能被用于制作一个网页中的动画，例如让网页中的图片移动或旋转。