.
Event yang kita gunakan adalah onreadystatechange
,
pada event ini kita bisa mengecek state dan status AJAX.
if(this.readyState == 4 && this.status == 200){
//...
}
Kode state 4
artinya done dan status 200
artinya sukses. Berikut ini daftar kode state AJAX.1
Kode | State | Keterangan |
---|
0
| UNSENT
| Objek AAJAX sudah dibuat tapi belum memanggil method open() .
|
1
| OPENED
| Method open() sudah dipanggil.
|
2
| HEADERS_RECEIVED
| Method send() sudah dipanggil, dan di sini sudah tersedia header status.
|
3
| LOADING
| Downloading; sedang mendownload data.
|
4
| DONE
| Operasi AJAX selesai.
|
Sementara untuk status header 200
adalah status HTTP Request. Biasanya kode di atas 200
artinya baik dan di bawah 200
artinya buruk.
Lalu coba perhatikan kode ini:
xhr.open("GET", url, true);
Terdapat tiga parameter yang kita berikan kepada method open()
:
GET
adalah metode request yang akan digunakan;url
adalah alamat URL tujuan;true
adalah untuk mengeksekusi AJAX secara asynchronous.
Mari
kita lanjutkan dengan contoh yang lainnya. Silahkan ubah isi file HTML yang tadi menjadi seperti ini:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajaxtitle>
head>
<body>
<h2>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clearbutton>h2>
<div id="hasil">div>
<button id="button" onclick="loadContent()">Load Contentbutton>
<script>
function loadContent() {
var xhr = new XMLHttpRequest();
var url = "https://api.github.com/users/petanikode";
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 img = document.createElement("img");
img.src = data.avatar_url;
var name = document.createElement("h3");
name.innerHTML = data.name;
document.getElementById("hasil").append(img, name);
document.getElementById("button").innerHTML = "Done";
setTimeout(function () {
document.getElementById("button").innerHTML = "Load Lagi";
}, 3000);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function clearResult() {
document.getElementById("hasil").innerHTML = "";
}
script>
body>
html>
Hasilnya:
Mengirim Data ke Server dengan AJAX
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajaxtitle>
head>
<body>
<h2>Kirim Data dengan Ajaxh2>
<form method="POST" onsubmit="return sendData()">
<p>
<label>Titlelabel>
<input type="text" id="title" placeholder="judul artikel">
p>
<p>
<label>Isi Artikellabel><br>
<textarea id="body" placeholder="isi artikel..." cols="50" rows="10">textarea>
p>
<input type="submit" value="Kirim" />
form>
<script>
function sendData() {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";
var data = JSON.stringify({
title: document.getElementById("title").value,
body: document.getElementById("body").value,
userId: 1
});
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onload = function () {
console.log (this.responseText);
};
xhr.send(data);
return false;
}
script>
body>
html>
Hasilnya:
Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server
https://jsonplaceholder.typicode.com/posts.
AJAX Menggunakan JQuery
JQuery
adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:
// load data ke elemen tertentu via AJAX
$(selector).load(URL,data,callback);
// ambil data dari server
$.get(URL,callback);
// kirim data dari Server
$.post(URL,data,callback);
Mari kita coba…
Buatlah file baru bernama ajax-jquery.html
lalu isi dengan kode berikut:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar AJAX dengan JQuerytitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
head>
<body>
<h2>Load Datah2>
<pre id="result">pre>
<script>
$("#result").load("https://api.github.com/users/petanikode");
script>
body>
html>
Hasilnya:
Dengan fungsi $("#result").load()
, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.
Fungsi JQuery load()
cocoknya untuk mengambil bagian dari HTML untuk
ditampilkan.
Contoh lainnya menggunakan metode GET:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar AJAX dengan JQuerytitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
head>
<body>
<h2>Load Datah2>
<img id="avatar" src="" width="100" height="100">
<br>
<h3 id="name">h3>
<p id="location">p>
<script>
var url = "https://api.github.com/users/petanikode";
$.get(url, function(data, status){
$("#avatar").attr("src", data.avatar_url);
$("#name").text(data.name);
$("#location").text(data.location);
});
script>
body>
html>
Hasilnya:
Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan $.get()
.
<script>
var url = "https://jsonplaceholder.typicode.com/posts";
var data = {
title: "Tutorial AJAX dengan JQuery",
body: "Ini adalah tutorial tentang AJAX",
userId: 1
};
$.post(url, data, function(data, status){
// data terkkirim, lakukan sesuatu di sini
});
</script>
AJAX Menggunakan Fetch API
Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.
Methode ini mulai hadir pada Javascript versi ES6.
Perbedaanya dengan XMLHttpRequest
dan JQuery adalah:
- Fetch akan mengembalikan sebuah promise;
- Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari
server.2
- Fetch dapat digunakan di web browser dan juga Nodejs dengan modul
node-fetch
.
Berikut ini sintak dasar penggunaan Fetch.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:
fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json()); // parses JSON response into native Javascript objects
Mari kita coba…
Berikut ini contoh pengambilan data menggunakan fetch:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajax dengan Fetch</title>
</head>
<body>
<h2>Tutorial Ajax dengan Fetch</h2>
<button onclick="loadContent()">Load Content</button>
<div id="hasil"></div>
<script>
function loadContent(){
var url = "https://jsonplaceholder.typicode.com/posts/";
fetch(url).then(response => response.json())
.then(function(data){
var template = data.map(post => {
return `
${post.title}
${post.body}
`;
});
document.getElementById("hasil").innerHTML = template.join('
');
}).catch(function(e){
alert("gagal mengambil data");
});
}
</script>
</body>
</html>
Hasilnya:
Ajax Menggunakan Axios
Axios hampir sama
seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.
Axios juga sama-sama bisa digunakan di web browser dan Nodejs.
Contoh AJAX dengan Axios:
axios.get('https://jsonplaceholder.typicode.com/posts/')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
Mari kita coba dalam HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial AJAX dengan AXIOStitle>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<h2>Tutorial AJAX dengan AXIOSh2>
<button id="btn-load" onclick="loadContent()">Load Contentbutton>
<div id="result">div>
<script>
function loadContent() {
document.getElementById("btn-load").innerHTML = "loading...";
document.getElementById("btn-load").setAttribute("disabled", "true");
axios.get('https://jsonplaceholder.typicode.com/posts/')
.then(function (response) {
var template = response.data.map(post => {
return `
${post.title}
${post.body}
`
}).join("");
document.getElementById("result").innerHTML = template;
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
document.getElementById("btn-load").innerHTML = "Done";
document.getElementById("btn-load").removeAttribute("disabled");
});
}
script>
body>
html>
Hasilnya:
Ahir Kata….
Jadi… Cara mana yang paling bagus?
Tidak ada yang paling bagus dan jelek, di sini semuanya sama-sama bagus.
Tinggal kita saja yang menentukan, lebih nyaman
pakai yang mana.
Kalau saya, lebih suka menggunakan fetch dari pada XMLHttpReques
, JQuery, dan Axios.
Bagaimana denganmu?