組件實作 : Demo
AJAX(Asynchronous JavaScript and XML)中文翻作「非同步的 JavaScript 與 XML 技術」【1】。AJAX 在工作上算是一個很常用的概念,重要的程度個人感覺與切版差不多。在這裡我們著重在如何利用AJAX串接資料
,以及如何向後端伺服器取得資訊,或是說將前端資料傳送到後端。關於 AJAX 的原理,找了幾篇文章和影片來補充說明,看完後應該能對 AJAX 有更近一步的了解,本篇重點著重在 AJAX 語法以及實作如何串接。
AJAX 最重要的特性是
更新局部頁面
,在不更新網頁的情況下,更換網頁的部分內容。
什麼是 AJAX?它能夠用來幹嘛?簡單來說:我們知道網頁的運作流程【2】,可將電腦分成客戶端(Client 端)和伺服器端( Server 端),我們利用鍵盤輸入資料到瀏覽器上(Client 端),瀏覽器將這些資料打包起來,並且透過網路協定把這些資料傳送給伺服器端( Server 端),而伺服器端接收到客戶端端的請求,將客戶端所需的資訊回傳到客戶端,將資訊重新渲染到瀏覽器的畫面上。 AJAX 可以想像成前、後端連線時所需的一個溝通管道,我們不需額外去建立兩台電腦之間底層的通訊協定,只要專注在 AJAX 的一些基本設定上就好,可以透過底下的影片,可以對 AJAX 、JSON、API 和一些相關術語有基本認識:
API 根據 WIKI 的定義,沒有意外的話應該還是看不懂 API 到底是個什麼東西,我個人是將 API 想成是一個放在遠端電腦裡的一個 Function,而這個 Function 是由伺服器(API 提供者,或是說某個公司、某個單位)提供的服務,比如 Gogle 提供你地圖服務 API,你不需要知道它內部的運作原理,只要知道它提供的方法,我們就能使用 Gogle 地圖的相關功能,
我們將 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,我們要將抓到的 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 = "";
}
API 的串接可以說是一個很重要的功能,不論你是否直接學習框架,而不寫原生的 JavaScript,AJAX 的概念是必須要掌握住的,因為在前端的工作入門條件除了要會切版以外,還必須會使用 AJAX 串接 API,練習的方法就是多練習不停的資料串接方法就對了~