Tutorial jQuery 15 : Implementing AJAX dengan Method $.ajax()

Di tutorial sebelumnya, kita menggunakan method load(). Method ini memiliki keterbatasan, untuk itu kita akan menggunakan method selanjutnya, yaitu method ajax(). Sebelum kita membahas method ajax, kita akan membahas satu hal yang penting yaitu callback function.

Callback Function

Callback function dieksekusi setelah effect atau event sudah selesai diproses, jadi tidak berpengaruh posisi baris kodenya. Contoh misalnya kita ingin menampilkan gambar, dan kita ingin gambar tersebut sudah sepenuhnya muncul dilayar sebelum dilakukan hal yang lain. Secara default, javascript tidak mengetahui hal ini sehingga kita harus memberitahu pada javascript. Kita menggunakan callback function untuk ini.

Event handler yang kita gunakan sebelumnya adalah sebuah callback function. Jika tombol ditekan… jika mouse berada di atas elemen…

Alert harus diletakkan di dalam function. Inilah salah satu contoh callback function.

Ajax memiliki callback function yang perlu kita gunakan untuk melakukan operasi tertentu. Sintaks method ajax :

Argumen pertama pada method ajax adalah url, dan argumen kedua adalah Javascript Object yang berada di antara kurung kurawal yang berupa options. Option pertama adalah dataType, method, dan callback function success. Fungsi ini akan dieksekusi jika proses berhasil dijalankan. Selain success, method ajax juga memiliki option error. Jika terjadi error ketika ajax dipanggil, error akan muncul.  Kalau option success tidak bisa, javascript yang sekarang menggunakan method .then(function(data){});

Case Study : Membaca API

Terdapat website yang menyediakan data dummy API untuk testing kode yang kita buat : http://jsonplaceholder.typicode.com

Ketika button di klik, maka method ajax akan membaca url. Karena dataType nya adalah json, maka kita ganti dengan json. Method tetap get. Responsenya ditampilkan di console.log :

jquery ajax method

Kita dapat mengakses elemen tertentu dari struktur json hasil dari pemanggilan API. Ini contohnya :

Memanfaatkan ‘response’, kita tidak akan menampilkan ke console, tapi akan menampilkan ke elemen div.

userId dan title disimpan ke dalam variabel userId dan title, kemudian kita buat variable $info yang berisi paragraf, kemudian gunakan method text untuk memasukkan userId dan title. Selanjutnya, append ke div.main, sehingga hasilnya seperti ini :

jquery ajax method

Contoh lain adalah mengambil komentar yang disediakan oleh jsonplaceholder.

Option data pada ajax method menunjukkan key untuk url, sehingga url nya menjadi http://jsonplaceholder.typicode.com/comments?postId=1.

Option lainnya adalah beforeSend, complete. Dokumentasi lengkapnya ada di api.jquery.com/jquery.ajax

Method $.get(url, success)

Method lain pada jquery adalah $.get yang memiliki dua parameter, url dan success. Sebuah ajax function yang sederhana.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.