AJAX
Apa itu AJAX?
AJAX merupakan singkatan
dari Asynchronous Javascript Aand XML.
AJAX berfungsi untuk:
Ø Mengambil data dari server secara background;
Ø Update tampilan web tanpa harus relaod browser;
Ø Mengirim data ke server secara background.
Pada dasarnya AJAX hanya
menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.
Cara Menggunakan Ajax di Javascript
1. Langkah-langkah menggunakan AJAX seperti ini:
Membuat Objek Ajax
var xhr = new XMLHttpRequest();
2. Menentukan Fungsi
Handler untuk
Event
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
3. Menentukan Method dan URL
xhr.open("GET", url, true);
4. Mengirim Request
xhr.send();
CONTOH PROGRAM
OUTPUT
Pada contoh di atas, kita mengambil data dari server Github dengan methode GET.
Lalu hasilnya langsung dimasukan ke dalam elemn
<div id="hasil">.
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.
| 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.
CONTOH PROGRAM
OUTPUT
Mengirim Data ke Server dengan AJAX
CONTOH PROGRAM
OUTPUT
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);
CONTOH PROGRAM
OUTPUT
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:
OUTPUT
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.
- 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
CONTOH PROGRAM
OUTPUT
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
});
CONTOH PROGARM
OUTPUT
TERIMA KASIH :):):)
