Home » Javascript » Perbedaan Synchronous dan Asynchronous AJAX

Perbedaan Synchronous dan Asynchronous AJAX

by Bagus Dharma Iswara
by Bagus Dharma Iswara

Teknologi AJAX

AJAX tidak dapat bekerja secara independen. Ini digunakan dalam kombinasi dengan teknologi lain untuk membuat halaman web interaktif. jadi disini ajax membutuhkan dukungan dari teknologi lainnya seperti

  1. Javascript, yaitu Bahasa pemrograman yang berbasis dengan Loosely typed scripting. Fungsi pada JavaScript dipanggil saat suatu peristiwa atau terjadi di suatu halaman website. Kemudian terdapat Glue yang digunakan untuk seluruh operasi pada AJAX.
  2. DOM, yaitu suatu API yang digunakan untuk mengakses dan memanipulasi dokumen secara terstruktur yang merupakan suatu struktur dokumen dari XML dan HTML.
  3. CSS, yaitu bahasa yang memungkinkan pemisahan yang jelas antara style presentasi dari sebuah konten dan dapat diubah secara terprogram oleh JavaScript.
  4. XMLHttpRequest, yaitu objek JavaScript yang melakukan interaksi asinkron dengan server.

Berikut adalah daftar dari beberapa aplikasi web terkenal yang menggunakan AJAX, seperti

  • Google Maps yaitu Pengguna dapat menarik seluruh peta dengan menggunakan mouse, daripada mengklik tombol.
  • Google Suggest yaitu Saat Anda mengetik, Google menawarkan saran. Gunakan tombol panah untuk menavigasi hasil.
  • Gmail. Gmail adalah email web yang dibangun di atas gagasan bahwa email bisa lebih intuitif, efisien, dan berguna

Perbedaan antara AJAX dan Program CGI Konvensional adalah saat mencoba contoh AJAX, tidak ada diskontinuitas dan Anda mendapatkan respons dengan sangat cepat, tetapi ketika Anda mencoba contoh GCI standar, Anda harus menunggu respons dan halaman Anda juga akan di refresh

Perbedaan Synchronous dan Asynchronous

Sebelum memahami AJAX, mari kita pahami model aplikasi web klasik dan model aplikasi web ajax terlebih dahulu.

Synchronous (Model Aplikasi Web Klasik)

Permintaan Synchronous akan memblokir klien hingga operasi yang dijalankan selesai, yaitu disini model pada browser sangat tidak responsif. Dalam kasus seperti itu, mesin javascript pada browser akan diblokir. Untuk alur kerja pada Synchronous akan kita jelaskan seperti langkah berikut ini

  1. Menggunakan metode full page refresh, pertama client akan menekan tombol klik
  2. Dengan synchronous client akan mengirimkan data secara dan diproses secara server-side
  3. kemudian akan di wait
  4. setelah selesai akan di refresh
  5. kemudian menekan tombol klik
  6. Dengan synchronous, client akan mengirimkan data secara dan diproses secara server-side
  7. wait kembali
  8. refresh kembali

Seperti yang Anda lihat pada langkah di atas, halaman full page di browser akan di-refresh pada waktu adanya sebuah permintaan dari pengguna dan proses lainnya akan diblokir sampai permintaan selesai.

Asynchronous (Model Aplikasi Web AJAX)

Permintaan asinkron tidak memblokir klien, yaitu browser responsif. Pada saat itu, pengguna juga dapat melakukan operasi lain.

Dalam kasus seperti itu, mesin javascript browser tidak akan diblokir. Kita akan menentukan langkah-langkah dengan ajax berikut ini

  1. Saat user pada client memiliki sebuah event atau permintaan ke server, maka event dari user ini akan ditampung ke mesin Ajax
  2. Mesin Ajax ini akan menampung semua event dari user dan melakukan transfer data
  3. data ini kemudian diproses secara server-side dengan metode asynchronous
  4. hasil dari proses data ini akan kemudian akan mengupdate halaman website secara langsung
  5. tidak perlu adanya refresh lagi dari user

Seperti yang Anda lihat pada langkah di atas, halaman full page tidak di-refresh pada waktu suatu permintaan dibuat oleh user dan pengguna akan mendapat respon dari mesin ajax secara langsung.

Browser Pendukung AJAX

Semua browser yang tersedia tidak mendukung pemrograman dengan AJAX. Berikut adalah daftar browser utama yang mendukung AJAX yaitu

  1. Mozilla Firefox 1.0 dan yang lebih baru.
  2. Netscape versi 7.1 dan yang lebih baru.
  3. Apple Safari 1.2 dan yang lebih baru.
  4. Microsoft Internet Explorer 5 dan yang lebih baru.
  5. Konqueror.
  6. Opera 7.6 ke atas.

Saat Anda menulis aplikasi Anda berikutnya, pertimbangkan browser yang tidak mendukung AJAX.

CATATAN penting disini adalah Ketika kami mengatakan bahwa browser tidak mendukung sebuah AJAX, itu berarti browser tidak mendukung pembuatan objek Javascript – objek XMLHttpRequest.

Jika tidak berhasil, maka kita dapat menggunakan browser yang sangat usang yang tidak mendukung XMLHttpRequest, yang juga berarti browser ini tidak mendukung AJAX.

Kemungkinan besar, variabel ajaxRequest kami sekarang akan disetel ke standar XMLHttpRequest apa pun yang digunakan browser dan kami dapat mulai mengirim data ke server.

You may also like