Pada posting sebelumnya kita telah mencoba menggunakan AJAX (Asynchronous JavaScript and XML) dengan menggunakan object XHR (XMLHttpRequest), sebuah object JavaScript yang banyak digunakan dalam pengembangan website dinamis.
Pada artikel kali ini kita akan membandingkan teknologi pengembangan web yang menggunakan XHR dengan Fetch API. Keduanya berguna untuk membuat aplikasi web interaktif yang memungkinkan halaman web kita dapat memperbarui informasi secara asinkron tanpa harus memuat ulang seluruh halaman web.
Teknologi Ajax dengan menggunakan XHR sudah diperkenalkan sejak tahun 2006. Pada tahun 2015 diperkenalkan teknologi AJAX baru dengan menggunakan Fetch API. Fetch API dirancang untuk menggantikan teknologi XHR dalam pengambilan data dari server menggunakan JavaScript supaya lebih mudah.
Berikut ini contoh coding perbandingan AJAX XHR dan Fetch API:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Belajar Dasar Ajax</title>
</head>
<body>
<h1>Tutorial Ajax</h1>
<button id="button" onclick="xhrloadContent()">XHR Load Content</button>
<button id="button2" onclick="fetchloadContent()">
Fetch API Load Content
</button>
<div id="hasil"></div>
<script>
const apiUrl = "https://jsonplaceholder.typicode.com/posts";
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 0) {
console.log("request not initialized: ", this.readyState);
}
if (this.readyState === 1) {
console.log("server connection established: ", this.readyState);
}
if (this.readyState === 2) {
console.log("request received: ", this.readyState);
}
if (this.readyState === 3) {
console.log("processing request: ", this.readyState);
}
if (this.readyState === 4) {
console.log(
"request finished and response is ready: ",
this.readyState
);
}
};
xhr.open("GET", apiUrl, true);
xhr.send();
function xhrloadContent() {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";
xhr.onloadstart = function () {
document.getElementById("button").innerHTML = "Loading...";
};
xhr.onerror = function () {
alert("Gagal mengambil data");
};
xhr.onloadend = function () {
if (this.responseText !== "") {
var data = JSON.parse(this.responseText);
var template = data.map((post) => {
return ` <h3>${post.title}</h3>
<p>${post.body}</p>
<hr>
`;
});
document.getElementById("hasil").innerHTML = template.join("<br>");
document.getElementById("button").innerHTML = "Done";
setTimeout(function () {
document.getElementById("button").innerHTML = "Load Lagi";
}, 3000);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function fetchloadContent() {
var url = "https://jsonplaceholder.typicode.com/posts";
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
var template = data.map((post) => {
return ` <h3>${post.title}</h3>
<p>${post.body}</p>
<hr>
`;
});
document.getElementById("hasil").innerHTML = template.join("<br>");
})
.catch((error) => {
console.error("Error:", error);
});
document.getElementById("button2").innerHTML = "Done";
}
</script>
</body>
</html>