Single Page App (SPA) telah menjadi tren terkini dalam pengembangan website. Tahu Anda bagaimana konsep yang diterapkan untuk menampilkan data yang dinamis pada SPA?
Secara tradisional website bekerja dan di-render dari sisi server. Server membuat dan mengembalikan HTML yang siap dikirimkan pada client.
Sehingga client (browser) hanya bertugas untuk menerjemahkan HTML dan menampilkannya pada jendela browser.
Jika terdapat interaksi pada jendela browser, katakanlah kita menambah data pada form input, maka siklus render harus dilakukan ulang untuk menampilkan data terbaru. Artinya browser akan melakukan reload sebelum menampilkan datanya. Konsep ini populer digunakan hingga pertengahan tahun 2000an.
Sebenarnya pada akhir tahun 90an, tim pengembang Microsoft Outlook menambahkan XMLHTTP komponen ke browser Internet Explorer dan membangun outlook mail client dalam versi web. Nah, fitur inilah yang kemudian diadaptasi oleh kebanyakan browser sebagai XMLHttpRequest (XHR).
Dengan menggunakan XHR, browser dapat membuat HTTP request melalui JavaScript dan memperbarui data yang diberikan oleh server pada jendela browser tanpa memuat ulang seluruh komponen website yang ditampilkan.
XHR dapat berjalan secara asynchronous sehingga pengguna leluasa melakukan hal lain tanpa perlu menunggu proses komunikasi terhadap server selesai. Konsep inilah yang digunakan ketika kita membangun website dengan konsep SPA.
Sebelum JSON menjadi ECMA Standar pada tahun 2013, XML merupakan format yang banyak digunakan dalam transaksi datanya. Sehingga konsep ini dinamakan dengan Asynchronous JavaScript and XML atau disingkat AJAX.
Pada tahun 2015 setelah kemunculan Promise pada ES6, terdapat fungsi baru yang dapat kita manfaatkan untuk menerapkan konsep AJAX, yaitu Fetch. Fetch lebih mudah dan fleksibel digunakan daripada XHR karena ia mengembalikan Promise. Anda jadi tak perlu membuat callback dalam menangani proses asynchronous.
Saat ini JSON menjadi format yang banyak digunakan dalam melakukan transaksi data menggantikan XML. Sehingga pada materi ini kita akan belajar apa itu AJAX dan JSON. Kita juga akan belajar bagaimana membuat AJAX menggunakan XHR dan Fetch untuk mengubah konten website dengan cepat