6/21/22, 9:09 PM 1.

Mulai menggunakan AJAX

1. Mulai menggunakan AJAX

Referensi:

• https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

• https://www.w3schools.com/js/js_ajax_intro.asp

AJAX merupakan kependekan dari Asynchronous JavaScript And XML. AJAX digunakan
untuk mengambil data dari sebuah server, dan menampilkannya di halaman web.
Dengan AJAX, kita bisa membuat sebuah halaman web menjadi lebih interaktif.
Sebagai contoh, jika kita menggunakan media sosial, kita bisa membuat status,
menuliskan sebuah komentar, atau menekan tombol like. Kemudian, secara otomatis
status, komentar, atau like tersebut akan muncul di halaman tersebut tanpa perlu untuk
melakukan reload.
Atau pada saat kita menggunakan Google Maps. Ketika kita menggeser tampilan
Google Maps ke sebuah area baru, Google Maps secara otomatis akan mengupdate
tampilan map tersebut dengan data yang sesuai.

Sebagai contoh, ada 2 langkah agar AJAX dapat menjalankan fungsinya:

• Built-in XMLHttpRequest untuk mengirim request ke sebuah server dibelakang layar.

• JavaScript dan DOM untuk menampilkan data ke halaman web tanpa harus
melakukan reload.
Walaupun AJAX adalah Asynchronous JavaScript And XML, tetapi AJAX bisa memproses
beberapa format data berikut:

• XML atau Extensible Markup Language - adalah sebuah bahasa markup yang
digunakan untuk menyimpan dan mengirim data. Mirip dengan HTML, hanya saja
kita bisa membuat sebuah tag sendiri, contohnya:

<productlisting title:”Daftar Produk”> <product> <name>Produk Pertama</na

me>
<price>Produk Pertama</price>
</product>
</productlisting>

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 1/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

• JSON atau JavaScript Object Notation - adalah salah satu format yang digunakan
untuk melakukan transfer data. JSON dapat berupa sebuah array atau sebuah object

[
{
"name": "Produk Pertama",
"price": 10000
},
{
"name": "Produk Kedua",
"price": 20000
}
]

• Plain text

• HTML

AJAX digunakan dengan cara mengirimkan sebuah request ke sebuah Web API, dan
menunggu sampai dengan sebuah response diterima. Setalah response diterima, kita
bisa melakukan manipulasi DOM untuk mengubah halaman web yang sedang
ditampilkan.

Mengambil data dari sebuah server

Hampir seluruh browser saat ini sudah mendukung XMLHttpRequest , termasuk Chrome,
Firefox, IE, Edge, Safari, dan Opera. Untuk menjalankan XMLHttpRequest , kita perlu
melakukan hal-hal berikut:
1. Membuat object XMLHttpRequest

const xhttp = new XMLHttpRequest();

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 2/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

2. Membuat sebuah Callback function

Callback function disini berisi code yang akan dijalankan ketika response dari server
diterima. Pada contoh kali ini, kita akan menampilkan response yang kita terima dari
server pada Command Line.

xhttp.onload = function() {
// Apa yang kita lakukan ketika response tela
h tersedia
console.log(this.responseText);
}

3. Mengirim request ke server

xhttp.open("<HTTP_METHOD>", "<URL>");
xhttp.send();

Pada contoh kali ini, kita akan mengambil data dari API pihak ketiga,
https://pokeapi.co/. https://pokeapi.co/ merupakan sebuah RESTful API gratis yang
berisi data Pokemon.

Dalam PokeAPI, kita akan menggunakan endpoint, https://pokeapi.co/api/v2/pokemon?

limit=10 yang memperbolehkan Anda mendapatkan 10 data pokemon (Anda dapat klik
endpoint tersebut dan Anda akan melihat beberapa data ditampilkan pada browser
Anda. Anda pun akan dapat menggunakan data tersebut dalam aplikasi Anda
menggunakan AJAX).

Untuk menjalankan code XMLHttpRequest , kita akan membungkusnya dengan sebuah

function yang akan dijalankan pada file HTML. Nantinya kita perlu meletakkannya pada
blok code <script></script> . Code script yang akan kita gunakan akan terlihat seperti
ini.

function fetchData() {
const xhttp = new XMLHttpRequest();
const url = "http
s://pokeapi.co/api/v2/pokemon?limit=10";
const httpMethod = "GET";
xhttp.onlo
ad = function() {
// Apa yang kita lakukan ketika response telah tersedia
con
sole.log(this.responseText);
}
xhttp.open(httpMethod, url);
xhttp.send();
}

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 3/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

Kita akan membuat file HTML sederhana dan menjalankan script yang telah kita buat
sebelumnya.
Kita akan membuat sebuah button , dengan event onclick . Yang artinya, jika button
tersebut di-klik, akan menjalankan sebuah function fetchData() .

<button type="button" onclick="fetchData()">Fetch data</button>

Selanjutnya, kita akan menggabungkan dengan function fetchData() yang telah kita
buat sebelumnya.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>Progate</tit
le>
</head>
<body>
<h1>Mulai menggunakan AJAX</h1>
<button type="button" onc
lick="fetchData()">Fetch data</button>
<script>
function fetchData() {
const
xhttp = new XMLHttpRequest();
const url = "https://pokeapi.co/api/v2/pokemon?
limit=10";
const httpMethod = "GET";
xhttp.onload = function() {
// Apa yang
kita lakukan ketika response telah tersedia
console.log(this.responseText);
}
xhttp.open(httpMethod, url);
xhttp.send();
}
</script>
</body>
</html>

Kali ini kita akan menjalankan aplikasi kita dengan bantuan ekstensi Debugger for
Chrome di Visual Studio Code.

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 4/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

0:00 / 0:19

Sampai disini kita sudah bisa menjalankan AJAX untuk mengirim sebuah request ke
sebuah server dan mendapatkan hasilnya.

{
"count": 1118,
"next": "https://pokeapi.co/api/v2/pokemon?offset=10&limit=1
0",
"previous": null,
"results": [
{
"name": "bulbasaur",
"url": "https://pok
eapi.co/api/v2/pokemon/1/"
},
{
"name": "ivysaur",
"url": "https://pokeapi.c
o/api/v2/pokemon/2/"
},
{
"name": "venusaur",
"url": "https://pokeapi.co/api/
v2/pokemon/3/"
},
{
"name": "charmander",
"url": "https://pokeapi.co/api/v2/p
okemon/4/"
},
{
"name": "charmeleon",
"url": "https://pokeapi.co/api/v2/pokem
on/5/"
},
{
"name": "charizard",
"url": "https://pokeapi.co/api/v2/pokemon/
6/"
},
{
"name": "squirtle",
"url": "https://pokeapi.co/api/v2/pokemon/7/"
},
{
"name": "wartortle",
"url": "https://pokeapi.co/api/v2/pokemon/8/"
},
{
"na
me": "blastoise",
"url": "https://pokeapi.co/api/v2/pokemon/9/"
},
{
"name":
"caterpie",
"url": "https://pokeapi.co/api/v2/pokemon/10/"
}
]
}

Menampilkan data di halaman web

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 5/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

Setelah mendapatkan data dari server, tentunya kita tidak hanya ingin menampilkan
output-nya di Command Line. Tetapi juga perlu menampilkan data tersebut di halaman
web kita.
Kali ini kita akan menggunakan DOM. Jika Anda belum familiar dengan DOM, Anda bisa
membaca lagi materi sebelumnya.
Pertama-tama kita akan membuat sebuah div untuk menampilkan data yang kita
terima dari sever.

<div id="progate">
// tempat untuk menampilkan data response
</div>

Kemudian kita akan menggunakan memasukkan data kita ke div tersebut. Kita bisa
memilih div tersebut dengan perintah document.getElementById("<nama_id>") , dan
mengganti nilainya dengan perintah .innerHTML .

document.getElementById("progate").innerHTML = this.responseText;

Dengan code tersebut. kita akan menampilkan seluruh data yang kita terima dari server
di halaman web kita. Tapi, tentunya kita tidak mau hanya menampilkan teks yang kita
terima apa adanya. Kita akan melakukan looping data Pokemon dan menampilkan nama
setiap nama Pokemon, dengan cara berikut:

• Ubah format response dari server menjadi format JSON dengan printah
JSON.parse() .

• Ambil data aktual yang dibutuhkan. Dalam contoh ini, data Pokemon ada di dalam
key results dengan tipe data array.

• Lakukan looping mangambil setiap nama Pokemon dan menampilkannya dalam

elemen HTML <p> .

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 6/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

const response = JSON.parse(this.responseText);

const results = response.resu
lts;
let data = ''
for (let i = 0; i < results.length; i++) {
data = data +
`<p>${results[i].name}</p>`;
}

Jika kita menggabungkan semua bagian code kita, akan menjadi seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>Progate</tit
le>
</head>
<body>
<h1>Mulai menggunakan AJAX</h1>
<button type="button" id=
"button" onclick="fetchData()">Fetch data</button>
<div id="progate"></div>
<
script>
function fetchData() {
const xhttp = new XMLHttpRequest();
const url
= "https://pokeapi.co/api/v2/pokemon?limit=10";
const httpMethod = "GET";
xht
tp.onload = function() {
const response = JSON.parse(this.responseText);
cons
t results = response.results;
let data = ''
for (i = 0; i < results.length; i
++) {
data = data + `<p>${results[i].name}</p>`;
}
document.getElementById("p
rogate").innerHTML = data;
}
xhttp.open(httpMethod, url);
xhttp.send();
}
</s
cript>
</body>
</html>

Kita akan menjalankan aplikasi ini kembali, dan melihat perubahan jika kita menekan
tombol Fetch data .

0:00

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 7/8
6/21/22, 9:09 PM 1. Mulai menggunakan AJAX

https://www.notion.so/1-Mulai-menggunakan-AJAX-285e8a1d19ff4365a38fa5bab41e2f78 8/8