Day 20：AJAX 功能實作

2022 iThome 鐵人賽

DAY 20

Modern Web

從零開始手刻網站，30 天打造我的前端武器庫系列第 20 篇

14th鐵人賽前端 html javascript css

東尼先生

2022-10-04 23:19:14

2229 瀏覽

分享至

組件實作 : Demo

一、前言

AJAX（Asynchronous JavaScript and XML）中文翻作「非同步的 JavaScript 與 XML 技術」【1】。AJAX 在工作上算是一個很常用的概念，重要的程度個人感覺與切版差不多。在這裡我們著重在如何利用AJAX串接資料 ，以及如何向後端伺服器取得資訊，或是說將前端資料傳送到後端。關於 AJAX 的原理，找了幾篇文章和影片來補充說明，看完後應該能對 AJAX 有更近一步的了解，本篇重點著重在 AJAX 語法以及實作如何串接。

AJAX 最重要的特性是更新局部頁面，在不更新網頁的情況下，更換網頁的部分內容。

二、快速認識 AJAX 用途？

什麼是 AJAX？它能夠用來幹嘛？簡單來說：我們知道網頁的運作流程【2】，可將電腦分成客戶端（Client 端）和伺服器端（ Server 端），我們利用鍵盤輸入資料到瀏覽器上（Client 端），瀏覽器將這些資料打包起來，並且透過網路協定把這些資料傳送給伺服器端（ Server 端），而伺服器端接收到客戶端端的請求，將客戶端所需的資訊回傳到客戶端，將資訊重新渲染到瀏覽器的畫面上。 AJAX 可以想像成前、後端連線時所需的一個溝通管道，我們不需額外去建立兩台電腦之間底層的通訊協定，只要專注在 AJAX 的一些基本設定上就好，可以透過底下的影片，可以對 AJAX 、JSON、API 和一些相關術語有基本認識：

什麼是DOM,JSON,AJAX?【JavaScript全棧入門教程6】：影片分成 DOM、JSON、AJAX 三個部分講解，DOM 的部分可以知道 Client 端和 Server 端的關係以及如何用 JavaScript 去控制 DOM，JSON 部分解說我覺得還好，看過第三部分應該對 AJAX 會有基本認識。
輕鬆理解 Ajax 與跨來源請求：補足與 AJAX 的相關知識，可以專注在 AJAX、API 和 CORS 部分
AJAX / JSON 教學：六角學院有講解 JSON 的用法，有時間可以看看。

2.1 API 又是什麼？我如何取得？

API 根據 WIKI 的定義，沒有意外的話應該還是看不懂 API 到底是個什麼東西，我個人是將 API 想成是一個放在遠端電腦裡的一個 Function，而這個 Function 是由伺服器（API 提供者，或是說某個公司、某個單位）提供的服務，比如 Gogle 提供你地圖服務 API，你不需要知道它內部的運作原理，只要知道它提供的方法，我們就能使用 Gogle 地圖的相關功能，

2.2 AJAX 語法

我們將 AJAX 語法加在 VScode 的 snippets 裡面，需要用到時直接呼叫就好，但這樣做會有一個缺點，就是沒背語法可能會忘記一些用法，因此，這篇文章主要撰寫操作步驟，幫助我在日後忘記 AJAX 抓資料的步驟時，可以快速複習相關的用法，AJAX 寫法如下程式碼。

第一種，根據 W3Schools AJAX 的 XMLHttpRequest 寫法如下。

JavaScript：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById('demo').innerHTML = this.responseText;
    }
};
xhttp.open('GET', 'ajax_info.txt', true);
xhttp.send();

我們只要將上面的程式放寫成 Function，然後建立一個 Button 事件監聽去呼叫這個 Button 事件即可取得你的資料，例如取得範例中的ajax_info.txt內資料。其實在一開始學 AJAX ，應該會覺得語法感覺有點困難理解，但它其實就是一個很固定的架構，我們只要修改一些參數，然後把要處理的資料寫在 Function 裡就好。

XMLHttpRequest 用法可參考 XMLHttpRequest。

第二種，我們除了使用 XMLHttpRequest 之外，也可以使用 jQuery 的寫法。

HTML：


<div id="demo"> </div>

JavaScript：

$.ajax({
    url: 'https:...',
    method: 'get',
    success: getData,
});

function getData(data) {
    console.log(data);
    for (i = 0; i < data.length; i++) {
        document.getElementById('demo').innerHTML += data[i].email + '<br>';
    }
}

$.ajax是 jQuery 的 AJAX 使用方式，而 url、method:、data這些都是 ajax 的方法，可以依照需求去使用。

別忘了使用 jQuery 要加入 CDN。

HTML：

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"
></script>

三、使用 AJAX 與 Random Data API 串接

這裡用最精簡的方式說明 AJAX 的使用，首先，我們需要兩個按鈕，一個按鈕用來抓取的資料，一個按鈕用來清空資料，抓許資料的來源 Random Data API，我們要將抓到的 E-mail 資訊顯示在頁面上，然後可以使用一個按鈕清空畫面上的所有資訊，程式碼實作如下。

HTML：

<button class="btn" id="js-btn">Random</button>
<button id="clear">Clear</button>
<p>Email Random</p>
<div id="demo"> </div>

JavaScript：

window.onload = function () {
	const element = document.getElementById("js-btn");
	element.addEventListener("click", foo, false);

	const clear = document.getElementById("clear");
	clear.addEventListener("click", clears, false);
};

function foo() {
	$.ajax({
		url: "https://random-data-api.com/api/v2/users?size=2&is_xml=true",
		method: "get",
		success: getData
	});
}

function getData(data) {
	console.log(data);
	for (i = 0; i < data.length; i++) {
		document.getElementById("demo").innerHTML += data[i].email + "<br>";
	}
}

function clears() {
	document.getElementById("demo").innerHTML = "";
}