PWEB-2018-5-AJAX-JQuery

AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Lebih lanjut tentang Ajak klik link Ajax berikut.

Untuk deklarasi AJAX dengan menggunakan jQuery adalah dengan memanggil function .ajax(). Bentuk scriptnya adalah:

$.ajax();

Tetapi script di atas tidak akan berfungsi karena kita tidak meletakkanya setelah DOM ready dan tidak mempunyai option yang dibutuhkan untuk request. Adapun option dan method yang dibutuhkan dalam AJAX memakai jQuery antara lain:

1. URL, menentukan alamat URL mana yang akan direquest oleh HTTP Request (AJAX)type, tipe request yang akan dijalankan, apakah POST atau GET
2. BeforeSend, event yang dilakukan ketika HTTP Request akan diproses
3. Complete, event yang dilakukan ketika HTTP Request selesai dijalankan, namun tidak melihat apakah request sukses atau gagal
4. Success, event yang dilakukan ketika HTTP Request selesai dan berhasil dijalankan dan mempunyai nilai balik yaitu data hasil request
5. Data, data yang dikirim ke server ketika request dan diolah di server. Data ini akan diperlakukan berdasarkan 2 type yang ditentukan, yaitu GET atau POST.

Untuk pemanggilan options tersebut, caranya dengan memasukkan ke dalam function ajax tadi berbentuk struktur objek javascript. Contoh:

Di atas adalah contoh penggunaan AJAX sederhana yang melakukan request ke file lakukan_proses.php, data yang dikirim adalah inputan dari sebuah form yang mempunyai id form (ingat selection id dengan CSS, sama aja). Sebelum proses dijalankan, tampilkan gambar loading, kemudian setelah request selesai dijalankan dan membawa timbal balik html, maka sembunyikan loading, dan tampilkan alert yang berisi html timbal balik (response) dari server.

Materi

1 ppt-ajax with-j_query from Fajar Baskoro

Tutorial

2 panduan lengkap php ajax j query from Fajar Baskoro

Absensi

Latihan

Submit Form Without Page Refresh

Link Tutorial

Link Demo

Contoh Lain Tutsplus.com

Referensi

1. https://fajarbaskoro.blogspot.com/2018/10/pweb-2018-mengenal-teknologi-ajax.html
2. http://jagocoding.com/tag/serial-ajax-dengan-jquery
3. http://jagocoding.com/tutorial/99/AJAX_dengan_jQuery_Part_1
4. https://www.malasngoding.com/pengertian-dan-cara-menggunakan-bootstrap/
5. https://www.duniailkom.com/tutorial-belajar-jquery-bagi-pemula/
6. https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/