AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan komunikasi antara browser web dan server secara asynchronous, tanpa memerlukan refresh halaman. Dengan menggunakan AJAX, Anda dapat mengirim permintaan ke server, menerima respons, dan memperbarui bagian-bagian tertentu dari halaman web tanpa mengganggu atau memuat ulang halaman secara keseluruhan. Berikut adalah cara kerja dasar AJAX untuk mengirim dan menerima data dari server:
### 1. Membuat Objek XMLHttpRequest:
Pertama, Anda perlu membuat objek XMLHttpRequest yang akan digunakan untuk mengirim permintaan ke server.
```javascript
var xhr = new XMLHttpRequest();
```
### 2. Mengirim Permintaan ke Server:
Kemudian, Anda mengonfigurasi objek XMLHttpRequest dengan metode, URL, dan opsi lain yang diperlukan, lalu mengirim permintaan ke server.
```javascript
xhr.open('GET', 'https://www.contoh.com/data', true);
xhr.send();
```
Anda juga dapat menggunakan metode `POST` untuk mengirim data ke server.
```javascript
xhr.open('POST', 'https://www.contoh.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({nama: 'John', email: 'john@example.com'}));
```
### 3. Menangani Respons dari Server:
Ketika server memberikan respons, Anda menangani respons tersebut dengan menambahkan event listener ke objek XMLHttpRequest.
```javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// Lakukan sesuatu dengan data yang diterima
} else {
// Tangani kesalahan
}
}
};
```
### Contoh Lengkap:
Berikut adalah contoh lengkap penggunaan AJAX untuk mengirim permintaan GET ke server dan menangani responsnya:
```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.contoh.com/data', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Gagal mengambil data: ' + xhr.status);
}
}
};
```
Dengan menggunakan AJAX, Anda dapat membuat aplikasi web yang lebih dinamis dan responsif, yang memungkinkan interaksi dengan server tanpa memuat ulang halaman secara keseluruhan.
No comments:
Post a Comment