JavaScript基本功修练：Day27 - AJAX基本概念

对於新手来说，AJAX课题里比较难懂的部分应该是背後的运作概念，而非程序码本身。这个课题会分开几篇，这篇会先整理有关基本概念与一些术语的意思，下篇开始就会集中讲实际操作部分(Fetch、axios等等)以及串接API时的常见问题及处理。

今天会整理以下的知识：

• AJAX基本概念
• API的意思
• HTTP请求方法
• HTTP状态码

AJAX基本概念

• AJAX，英文是Asynchronous JavaScript and XML，Asynchronous是非同步，意思是整个技术都是以非同步方式执行
• AJAX是一个技术，不是一种格式或语言
• AJAX技术可以使我们不用刷新页面，就能更新页面的资料，令使用者在浏览网站时不会被中断
• AJAX技术可以更新页面某部分的资料，例如当使用者按下按钮後，服务器只会传回某部分的资料，我们只需要更新该部分的资料。这样可降低资料量的传送。
• 用AJAX技术所传送的资料格式可以不同，例如XML、JSON(最常见)

整体流程：

浏览器 ----(HTTP request)----> 服务器 <--> 资料库
浏览器 <----(HTTP response)---- 服务器 <--> 资料库

在网页使用AJAX技术与服务器互动，最旧的方法是透过XMLhttprequest语法所产生的物件来完成。但因为现时在处理较复杂的需求时，XMLhttprequest语法结构会变得不好阅读，所以现时比较建议用fetch、axios套件等来取代XMLhttprequest。

API的意思

在AJAX这个课题里，我们经常会听到「API」这个术语，也常常听到「API接口」这个词，它们到底是代表什麽呢？这里推荐Huli详细但不难懂的文章，这篇文章真的拯救了对API一知半解的我QQ

文中以USB介面比喻API，USB介面使我们可以连接USB随身碟和电脑(纵使市面上有各种不同厂商生产的USB随身碟)。API也一样，它是用来「串接一个程序和另一个程序」，例子如下：

• 我的网页可以用Facebook登入，於是我去串接Facebook提供的API
• 我的网页要加入客制化的Google Map，於是我去串接Google Map提供的API

以上例子中，Facebook登入和Google Map地图，这些都是它们公司自己的功能，如果我要在我写的程序里都有这些功能，我就要去串接这些公司提供的API。

这时候我们需要查看这些公司所提供的API文件(API documentation)，看看如何串接它们的API。我们称这种API做Web API，因为我们是透过网络来传送资料。这些文件会提供一个网址，这个网址就是我们常常说的「API接口」。同时，文件也会提及我们需要填上的参数，使我们可以向这个网址发出请求，最後令服务器传回资料给我们。

例如我想在我的网页显示GitHub上某个专案的commit纪录。在GitHub的API文件中，我会找到它提供的API接口，{}里的东西是由自己填写。

此外，图中可见GitHub也会提供参数，让我们能更针对去找出特定资料。例如我可以写成以下的URL，当中用&去区隔开不同的参数：

https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=dev

以上写法就是每页显示3笔在dev分支的commit纪录。

HTTP传输协定

在谈及HTTP方法前，我们需要了解什麽是HTTP。HTTP是一个协定，全写是超文本传输协定 (Hypertext Transfer Protocol)。它统一了客户端(client side)与服务器(server side)之间传输资料的方法，例如我要浏览Facebook页面，就会做以下的事：

• 我在浏览器输入Facebook网址，向Facebook服务器端送出request
• Facebook服务器端收到request，查看网址是否存在
• Facebook服务器送回response

我这边的浏览器要按特定规范来发出request，之後服务器也要按特定规范来送回response，这就是HTTP协定。

整个流程就是本文一开始提及的AJAX流程：

浏览器 ----(HTTP request)----> 服务器 <--> 资料库
浏览器 <----(HTTP response)---- 服务器 <--> 资料库

HTTP要求(HTTP request)

当我们在浏览器发出HTTP要求，就会用到在HTTP协定的规范中定义的不同HTTP请求方法，最常见的有：

• GET(最常用)：请求特定资料
• POST：提交资料(例子：注册帐户、验证资料等)
• PUT：取代特定资料，通常是更新整个资料
• PATCH：修改特定资料，通常是更新部分资料
• DELETE：删除特定资料

PUT和PATCH都是用来更新资料。差异之处是，PUT是取代整个资料，而PATCH只是更新部分资料。另外注意，HTML的的表单只能用GET或POST方法，不能以此两个以外的方法。

HTTP讯息(HTTP response)里的 HTTP状应码

服务器会根据浏览器提出的HTTP要求回传相应的资料。此外，当中也会一并回传HTTP状态码，用作显示资料传送的状态。

以下简单划分不同HTTP状态码：

• 2xx：成功 (OK)
• 3xx：重新导向 (Redirection)
• 4xx：用户端错误 (Client Error)
• 5xx：服务器错误 (Server Error)

详细的HTTP状态码可看这篇。

我们可以利用这些状态码来做错误处理。例如在学习XMLhttpresquest时，我们常常会透过if...else判断status === 200，从而处理错误情况：

const xhr = new XMLHttpRequest();
xhr.open('get','https://randomuser.me/api/',true);
xhr.send(null);

//状态码:200代表成功。我们利用此状态码去做判断，做到错误处理
xhr.onload = () => {
    if(xhr.status === 200){
        console.log(JSON.parse(xhr.responseText)); 
    }else{
        console.log('请求失败!')
    }
}

总结

AJAX基本概念：

• AJAX是一个非同步执行的技术
• 不用刷新页面就能更新网页资料，不能中断使用者浏览网页

API意思：

• 程序与程序之间的串接
• API接口是一个网址

HTTP协定：

• 客户端与服务器之间传输资料的规范
• 浏览器向服务器提出HTTP要求(GET、POST、DELETE...)
• 服务器除了回传相应资料，也会回传HTTP状态码

参考资料

AJAX 完整解说系列：基础观念
AJAX与Fetch API
轻松理解 Ajax 与跨来源请求