Istilah Asynchronous Javascript And XML (AJAX) terdengar seperti mulut penuh, namun menggambarkan konsep sederhana: memperbarui bagian halaman web tanpa memuat ulang semuanya.
Sebelumnya, jika Anda menginginkan data baru, Anda harus menunggu. Anda mengeklik sebuah tautan. Layar membeku. Halamannya menjadi putih. Kemudian semuanya dimuat kembali.
AJAX mengubahnya. Ini memungkinkan browser untuk berbicara dengan server di latar belakang. Anda dapat mengetikkan permintaan pencarian dan melihat hasilnya langsung muncul. Tidak ada isi ulang. Tidak ada layar putih. Hanya data.
Ini bukanlah penemuan baru. Itu adalah kombinasi dari alat-alat yang ada yang digunakan dengan cara baru.
Teknologi Inti di Balik Desain Web Asinkron
AJAX bukanlah teknologi tunggal. Ini adalah alur kerja. Hal ini bergantung pada koordinasi teknologi web standar.
Inti darinya adalah objek XMLHttpRequest. Ini adalah fitur JavaScript bawaan. Ini memungkinkan skrip sisi klien memulai permintaan HTTP (seperti GET atau POST) ke server. Browser mengirimkan permintaan. Itu tidak menunggu respons sebelum melanjutkan merender halaman. Ini adalah bagian “asinkron”.
Setelah server merespons, JavaScript mengambil datanya. Itu menguraikannya. Ini memperbarui Model Objek Dokumen (DOM). Pengguna melihat perubahan tanpa harus meninggalkan halaman.
“AJAX membedakan dirinya dengan arsitektur di mana kode sisi klien mengatur pengambilan data, interpretasi, dan adaptasi tampilan real-time, tanpa memuat ulang secara umum atau kehilangan interaktivitas.”
Untuk waktu yang lama, data ini datang dalam format XML. Oleh karena itu namanya. XML bertele-tele. Itu berat.
Kemudian, JSON (JavaScript Object Notation) mengambil alih. JSON lebih ringan. JavaScript lebih mudah untuk diproses. Kerangka kerja modern seperti jQuery dan mengambil API telah membuat permintaan ini lebih mudah untuk dikelola. Namun prinsip intinya tetap: memisahkan antarmuka pengguna dari komunikasi server.
Mengapa Kompatibilitas Browser Dulu Penting
Pada masa-masa awal, ini sulit.
Tidak semua browser mendukung XMLHttpRequest. Atau mereka menerapkannya secara berbeda.
Internet Explorer 5 dan yang lebih baru akhirnya menyusul. Mozilla Firefox mengikutinya. Safari dan Chrome bergabung dalam pesta nanti. Saat ini, setiap browser modern mendukung fitur-fitur ini secara asli.
Konvergensi ini memungkinkan pengembang membangun interaksi kompleks yang dapat diterapkan di mana saja. Sebelumnya, Anda harus menulis kode hacky agar semuanya berfungsi di Firefox tetapi tidak di IE. Atau sebaliknya.
Sekarang, fokusnya adalah pada logika, bukan peretasan kompatibilitas.
Aplikasi Dunia Nyata yang Mendefinisikan Pengalaman
Anda telah menggunakan AJAX ribuan kali. Anda mungkin tidak memikirkannya.
Pertimbangkan Gmail. Saat Anda membuka kotak masuk, Anda tidak memuat ulang halaman untuk membaca email baru. Klien mengambil pesan terbaru di latar belakang. Anda dapat menyeret, menghapus, atau mengarsipkan. Halamannya tetap terpasang. Pembaruan data.
Windows Live Hotmail melakukan hal serupa sejak awal. Google Maps menggunakannya terus-menerus. Anda menggeser peta. Browser meminta petak peta baru. Mereka muncul seketika. Anda tidak perlu menunggu halaman penuh dimuat.
LiveSearch adalah contoh klasik. Saat Anda mengetikkan kata kunci, mesin pencari menanyakan server. Hasil menurun. Anda mengklik satu. Halaman tersebut melompat ke hasilnya. Semua ini terjadi melalui panggilan AJAX.
Aplikasinya tidak terbatas.
- Bagian komentar dinamis
- Simpan formulir secara otomatis
- Ticker saham real-time
- Umpan gulir tanpa batas
Fitur-fitur ini menciptakan kesan “aplikasi satu halaman”. Situs ini berperilaku lebih seperti aplikasi desktop. Rasanya tajam. Rasanya hidup.
Pergeseran Menuju Aplikasi Satu Halaman (SPA)
AJAX membuka jalan bagi SPA.
Di situs web tradisional, setiap klik berarti memuat halaman baru. Browser membuang DOM lama dan membuat DOM baru.
Di SPA, halaman awal dimuat. JavaScript menangani semua navigasi selanjutnya. Itu menukar konten secara dinamis. URL mungkin berubah, tetapi halaman tidak dimuat ulang.
Ini memerlukan kode sisi klien yang lebih kompleks. Anda perlu mengelola negara. Anda perlu menangani perutean. Namun pengalaman pengguna lebih unggul.
Jejaring sosial bergantung pada hal ini. Saat Anda mengeposkan pembaruan status, umpan akan disegarkan. Gambar profil Anda dimuat. Notifikasi muncul. Semua ini tidak memerlukan isi ulang penuh.
Warisan Pertukaran Data Asinkron
Akronim AJAX agak ketinggalan jaman. Pengembang jarang menggunakan istilah tersebut saat ini. Kami menyebutnya “pengembangan web”.
Namun teknologi tetap hidup. XMLHttpRequest sebagian besar digantikan oleh fetch API. JSON adalah format data standar.
Dampaknya tidak dapat disangkal. Ini meningkatkan ekspektasi pengguna. Kami sekarang mengharapkan umpan balik instan. Kami mengharapkan transisi yang mulus. Kami berharap aplikasi web terasa seperti perangkat lunak asli.
Jika sebuah situs dimuat ulang setiap kali Anda mengeklik tombol, situs tersebut terasa rusak. Rasanya tua.
AJAX membuktikan bahwa web bisa lebih dari sekedar dokumen statis. Ini bisa menjadi platform untuk aplikasi yang kompleks dan interaktif.
Evolusi tidak berhenti di situ. Kerangka kerja seperti React, Angular, dan Vue dibangun di atas fondasi ini. Mereka mengotomatiskan pembaruan DOM. Mereka mengelola negara.
Tapi ide intinya sama.
Bicaralah dengan server di latar belakang. Perbarui layar. Buat pengguna terus bergerak.
Ini masih kami sempurnakan. Gulungan tanpa batas. Kolaborasi waktu nyata. Pratinjau langsung. Kemungkinan-kemungkinan yang ada sebagian besar masih belum dimanfaatkan.
Apa yang terjadi selanjutnya? Mungkin lebih sedikit klik. Lebih banyak streaming. Lebih banyak kedekatan.
Halamannya tetap ada. Datanya bergerak.
AJAX bukanlah sihir. Ini adalah trade-off.
Anda mendapatkan kecepatan. Anda mendapatkan UI yang lancar. Tapi Anda juga mengalami sakit kepala.
Titik gesekan terbesar bukanlah kode. Ini keamanan. Secara khusus, Kebijakan Asal yang Sama (SOP). Secara default, browser mengunci permintaan AJAX. Mereka hanya berbicara dengan domain tempat pengguna berada saat ini. Hal ini mencegah skrip jahat di evil.com mencuri data dari situs bank Anda. Itu adalah tembok yang keras.
Namun pengembang perlu mendobrak tembok itu.
Masukkan CORS (Berbagi Sumber Daya Lintas Asal). Mekanisme inilah yang memungkinkan domain berbeda untuk berkomunikasi satu sama lain. Anda mengkonfigurasinya di server. Jika Anda salah melakukannya, Anda mengekspos data. Jika Anda melakukannya dengan benar, Anda mengaktifkan aplikasi modern dan terdistribusi. Standarnya tinggi. Konfigurasinya harus ketat.
Lalu ada riwayat browser.
Saat Anda memperbarui halaman tanpa memuat ulang, URL-nya tidak berubah. Atau ya, tetapi pengguna tidak mengetahuinya. Tekan “kembali.” Tidak ada yang terjadi. Atau lebih buruk lagi, halaman tersebut dimuat ulang dan kehilangan semua statusnya. Ini merusak model mental pengguna.
Anda harus memperbaikinya.
Kelola tumpukan riwayat secara eksplisit. Gunakan API Riwayat HTML5. Status dorong. Dengarkan popstate. Itu membosankan. Itu perlu. Sebelumnya, orang menggunakan hashbang (#! ). Itu berhasil. Tapi itu berantakan.
Aksesibilitas adalah jebakan lainnya.
Konten dinamis tidak selalu diumumkan kepada pembaca layar. Jika Anda menukar teks melalui AJAX, teknologi bantu mungkin tidak menyadarinya. Anda perlu memperbarui atribut ARIA. Anda perlu memicu peristiwa. Jika tidak, Anda sedang membangun situs yang hanya berfungsi untuk pengguna mouse.
Pemandangannya sedang berubah.
fetch mengambil alih permintaan XHR mentah. Itu menggunakan Janji. Ini lebih bersih. Itu modern. WebSockets menambahkan komunikasi dua arah dan real-time. Anda tidak perlu melakukan polling lagi. Anda mendapatkan pembaruan yang didorong.
Tapi AJAX masih menjadi fondasinya.
Ini memperkenalkan polanya. Asinkron. Modular. Non-pemblokiran.
Awan itu bergerak. Seluler mengambil alih. Aplikasi Web Progresif (PWA) menuntut kemampuan dan kecepatan offline. Mereka semua bersandar pada prinsip-prinsip inti tersebut.
Apakah AJAX sudah mati? Tidak.
Itu hanyalah lapisan di bawah alat yang lebih baru. Ruang mesin.
Pengembang masih mengoptimalkannya. Mereka masih peduli dengan pengelolaan negara yang terpaksa kami selesaikan. Inovasi dalam rekayasa antarmuka? Itu dibangun di atas landasan sejarah.
Kami terus menyempurnakan pengalaman tersebut. Tujuannya tetap sama.
Cepat. Responsif. Rendah hati.
Namun taruhannya kini lebih tinggi. Keamanan lebih ketat. Pengguna mengharapkan perilaku seperti asli. Dan kodenya harus dapat diakses oleh semua orang.
Ini adalah tindakan penyeimbangan yang konstan. Sesuatu yang tidak pernah Anda selesaikan.
