初探 AJAX 与 Fetch API

前言

根据维基百科，20世纪的90年代，服务器处理每一个浏览器请求都要重新载入页面，换句话说，每当网页上有任何元素更动的时候，页面都会消失，直到浏览器回应後，再重新载入。听起来是很令人崩溃的使用者体验

为了解决上述的问题而出现了非同步载入的概念

虽然非同步载入的概念在1995年就有了，但要到 Google 将这项技术广泛用在自家的应用程序後，AJAX技术才渐渐受到大家的重视

AJAX

MDN: 全名为 Asynchronous JavaScript And XML，是结合了 HTML、CSS、JavaScript、DOM、还有 XMLHttpRequest 物件，以建立更复杂的网页程序实做。AJAX 允许网页只更新需要的部分，而无须重新载入整个页面。另外，AJAX 也能让你非同步工作，代表程序码能在网页试图重新载入时持续运行
对比同步（synchronously）：则是运行的时候封锁程序码运作，直到网页重新载入成功为止

看完上述 MDN 的定义後，对AJAX的了解可以归纳出几个重点：

不是单一技术
当浏览器向服务器请求资源时，网页画面不会坏掉

AJAX 如何运作

图片来源：w3schools

第一步是网页产生一个事件，这个事件可以是载入页面，网页的按钮被点击等等
以 JavaScript 创建一个 XMLHttpRequest 物件（简称XHR）
XMLHttpRequest 物件向服务器发送请求
服务器处理请求
服务器回传response给网页
JavaScript 读取服务器的回应
更新画面内容

在阅读资料的过程中发现对於 XHR 都是一面倒的说操作上很麻烦，实务上大多采用HTML 5提供的Fetch API或是函式库axios

既然前辈们都这麽建议了，以下就来学习fetch()语法

fetch 语法

fetch(resource [, init])

resource 的部分：会放入一个 url
init 的部分：可放入一个物件，在物件中可以对要发送的请求做客制化设定，例如：method，header 等等，如果没有指定 method，则会发送 GET 请求

网路上有许多开源的API可以拿来练习fetch语法，以下用了New York Times Books

首先，fetch()会回传一个带有 Response 物件的 Promise，可以观察两个部分：

status – HTTP 状态码
ok – 当HTTP状态码介於 200-299 会回传 true

Response 提供许多以 promise 为基础的方法，以取得不同的资料格式
最常使用的是response.json() ，将回应解析成JSON格式

解析完後可以看到 results 的部分含有66本书资料的阵列

除了response.json()外，还有以下方法可以将资料解析成不同格式：

response.blob()
response.text()
response.arrayBuffer()
response.formData()

小练习

以下用了天珑书局的API做练习，尝试使用API提供的书籍图片网址和书名渲染出简单的画面：

HTML

<section class="bookshelf">
      <!--render books-->
</section>

CSS 简单排版一下

.bookshelf {
      display: flex;
      flex-wrap: wrap;
      max-width: 80%;
      margin: 0 auto;
    }

    .bookcard {
      flex: 1 1 25%;
    }

    .bookcard > div {
      width: 100%;
    }

    img {
      max-width: 80%;
      object-fit: cover;
    }

    p {
      margin: 10px 0 0 0;
      padding: 0 10px;
    }

JS 拿资料再产生画面

fetch("https://bookshelf.goodideas-studio.com/api")
  .then((res) => res.json())
  .then((books) => createBookCard(books.list))
  .catch((err) => console.log(err));

function createBookCard(data) {
  const bookshelf = document.querySelector(".bookshelf");
  const card = data
    .map((book) => {
      return `<div class="bookcard">
      <div>
        <img src="${book.image}" alt="" />
      </div>
      <p class="booktitle">${book.name}</p>
    </div>`;
    })
    .join("");

  bookshelf.innerHTML = card;
}

这次的练习只做了 GET 的请求，之後有机会再来研究如何发送 POST 请求