Pengenalan AJAX untuk Desainer Front-End

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Seri tutorial ini bertujuan untuk membiasakan desainer front-end dan developer pemula dengan AJAX, teknik front-end yang penting.

Dalam tutorial pertama ini, kita akan membahas dasar-dasar AJAX. Kita akan mulai mengeksplorasi hal yang berbeda yang berkaitan dengannya, mempelajari persis tentang apa itu, cara kerjanya, dan keterbatasannya. Mari mulai!

Catatan: Seri ini mengasumsikan bahwa Anda sudah familiar dengan teknologi inti front-end, seperti HTML dan CSS.

Apa itu AJAX

AJAX singkatan "Asynchronous Javascript and XML". Bukan teknologi tunggal atau baru. Pada kenyataannya, AJAX adalah gabungan teknologi yang sudah ada (yaitu HTML, CSS, Javascript, XML, dll) yang datang bersama-sama untuk membangun aplikasi modern web.

Dengan AJAX, klien (yaitu browser) berkomunikasi dengan web server dan meminta data. Kemudian menanggapi respon di server dan membuat perubahan pada halaman tanpa sepenuhnya memuat ulang.

Mari kita memecah singkatan AJAX:

"Asynchronous" berarti bahwa ketika client meminta data dari server web, server tidak "membeku" sampai server menjawab. Sebaliknya, pengguna masih dapat menavigasi halaman. Segera setelah server mengembalikan respon, fungsi yang relevan memanipulasi data yang dikembalikan di belakang layar.
"Javascript" adalah bahasa yang merepresentasikan permintaan AJAX, mem-parsing respon AJAX yang sesuai, dan kemudian mengupdate DOM.
Client menggunakan XMLHttpRequest atau XHR API untuk membuat permintaan ke server. Anggap API (Application Programming Interface) sebagai satu set metode yang menetapkan aturan komunikasi antara dua pihak yang berkepentingan. Namun, perlu diketahui bahwa data yang masuk dari permintaan AJAX dapat berupa format apapun dan tidak hanya dalam format XML.

Bagaimana AJAX Bekerja

Untuk mendapatkan gambaran awal tentang bagaimana AJAX bekerja, lihatlah visualisasi berikut:

Visualisasi ini menggambarkan skenario berbasis AJAX pada umumnya:

Pengguna ingin melihat lebih banyak artikel, jadi dia klik pada tombol target. Peristiwa ini memicu panggilan AJAX.
Permintaan akan dikirim ke server. Bersamaan dengan permintaan, data yang berbeda mungkin akan dilewatkan. Permintaan tersebut dapat menunjuk ke file statis (misalnya example.json) yang disimpan pada server. Selain itu, memungkinkan untuk menjalankan script yang dinamis (misalnya functions.php) dititik dimana script berbicara ke database (atau sistem lain) untuk mengambil data.
Database mengirimkan artikel yang diminta kembali ke server. Selanjutnya, server mengirimkannya ke browser.
JavaScript mem-parsing respon dan mengupdate bagian tertentu dari DOM (struktur halaman). Di sini, misalnya, hanya sidebar yang diperbarui. Bagian lain dari halaman tidak berubah.

Dengan pemikiran ini, Anda bisa mengerti mengapa AJAX merupakan konsep penting bagi web modern. Dengan mengembangkan aplikasi berbasis AJAX, kita sudah mampu mengendalikan jumlah data yang di-download dari server.

Contoh langsung dari AJAX

AJAX dimana-mana. Untuk menunjukkannya, mari kita secara singkat menyebutkan beberapa situs populer yang mengambil keuntungan dari AJAX.

Pertama, pertimbangkan bagaimana Facebook dan Twitter bekerja. Saat Anda scroll ke bawah, konten baru muncul berkat AJAX. Kedua, ketika Anda upvote atau downvote pertanyaan atau jawaban di Stack Overflow, panggilan AJAX dipicu. Akhirnya, segera setelah Anda menelusuri sesuatu di Google atau Youtube, beberapa permintaan AJAX dieksekusi.

Selain itu, jika kita ingin, kita dapat memantau permintaan. Sebagai contoh, pada konsol Chrome, kita melakukannya dengan mengklik kanan dan memeriksa opsi Log XMLHttpRequests.

Membuat Permintaan

Seperti disebutkan di atas, untuk mengatur permintaan AJAX, kita menggunakan XMLHttpRequest API. Selain itu, jQuery, perpustakaan JavaScript yang paling populer, menawarkan beberapa fungsi-fungsi yang terkait dengan Ajax dan metodenya.

Sepanjang seri ini, kita akan melalui contoh yang berbeda yang menggunakan JavaScript dasar dan jQuery untuk mengirim permintaan ke server.

Memanipulasi Respon

Ketika kita mengambil data dari web server, ini bisa dalam format yang berbeda. XML, JSON, JSONP, teks, dan HTML adalah format data yang mungkin.

XML

XML (eXtensible Markup Language) adalah salah satu format yang paling populer untuk bertukar data antar aplikasi. Mirip dengan HTML, XML menggunakan tag untuk mendefinisikan struktur. Namun, perhatikan bahwa XML tidak datang dengan tag standar apapun, pada kenyataannya, kita menyiapkan dokumen XML dengan menentukan Tag kita sendiri. Contoh strukturnya ditunjukkan di bawah ini:

      <person>
          <name>Mike</name>
          <surname>Mathew</surname>
          <nationality>Australian</nationality>
          <languages>
              <language>English</language>
              <language>Spanish</language>
              <language>French</language>
              <language>Russian</language>
          </languages>
      </person>

Ada banyak editor online di luar sana yang dapat Anda gunakan untuk membangun dokumen XML. Editor favorit saya adalah:

XMLGrid.net.

Berdasarkan editor ini, contoh kita akan divisualisasikan sebagai berikut:

JSON

JSON (JavaScript Object Notation) adalah format pertukaran data populer lain. Menggunakan JSON, struktur XML tersebut akan terlihat seperti ini:

      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"    :	["English", "Spanish", "French", "Russian"]
      }

Sekali lagi, Anda dapat menemukan banyak editor JSON online di web. Berikut adalah editor yang saya suka gunakan:

Berdasarkan tool JSON Editor Online, contoh sebelumnya akan terlihat seperti berikut:

Batasan Request Ajax

Sebelum kita mulai benar-benar menggunakan AJAX, penting untuk memahami keterbatasannya. Secara khusus, kiya akan menyebutkan dua masalah yang umum.

Pertama, pertimbangkan error berikut yang muncul di konsol Chrome:

Kesalahan ini terjadi bila permintaan kita merujuk ke file lokal. Di sini kita mencoba mengakses data yang disimpan dalam file lokal (yaitu Demo.json) dan bukan di server. Untuk mengatasi masalah ini, kita dapat menginstal server lokal (misalnya menyiapkan XAMPP sebagai environmen development lokal) dan menyimpan target file di dalamnya.

Kedua, lihat pesan error berikut:

Hal ini terjadi ketika kita meminta data yang terletak di domain lain yang relatif terhadap halaman kita (dikenal sebagai batasan same-origin policy). Di sini, misalnya, data disimpan pada server lokal, sedangkan halamannya disimpan pada server Codepen. Untungnya, ada solusi untuk batasan ini.

Salah satu solusinya adalah dengan mengambil keuntungan dari mekanisme CORS (Cross-Origin Resource Sharing) yang diusulkan oleh W3C. Catat bahwa mekanisme ini mengharuskan kita untuk membuat beberapa perubahan dalam konfigurasi file dari server. Misalnya, halaman ini menjelaskan bagaimana kita dapat menyesuaikan web server Apache.

Pilihan lain adalah dengan menggunakan teknik JSONP (JSON with Padding).

Kesimpulan

Gambaran ini seharusnya memberi Anda gagasan bagus tentang apa itu AJAX, di mana Anda mungkin pernah menemuinya, dan di mana beberapa masalah potensial terbengkalai. Ini juga, dengan cepat, memeriksa format pertukaran data terpopuler. Dalam tutorial berikutnya kita akan melompat ke contoh kerja. Sampai jumpa di sana!

Bacaan Lanjut

Jika Anda ingin tahu lebih banyak tentang AJAX dan Codepen, pastikan untuk memeriksa sumber daya berikut: