Pengertian Ajax dan Contoh Penggunaan Ajax pada Website

Apakah Ajax itu ? para Web Designer dan Programmer tentu sudah sering mendengar kata-kata tersebut dan sudah menjadi teknologi wajib yang harus digunakan dalam membuat sebuah website moderen dan Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. dinamis.

Mengapa Harus Ajax ?

Pada website tradisional biasa jika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat karena pada saat itu browser sedang meminta/merequest data dari web server dan hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. Saat ini Ajax sudah menjadi teknologi yang wajib diterapkan bagi website-website modern

Asal Mula Bahasa Pemrograman Ajax

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini

Pada mekanisme di atas, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukkan pada gambar berikut

Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangan AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 hal yaitu HTML-(XHTML), Javascript, XML dan juga server side programming seperti PHP dan lain sebagainya.

Aplikasi Website dengan Ajax

Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut. Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut dengan XMLHttpRequest suatu halaman web dapat direquest dari server dan diterima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas, Mozilla Firefox keatas dan Opera 8 keatas. Ajax merupakan penggabungan teknologi-teknologi Javascript, HTML/XHTML, XML, CSS dan Server Side Client. Jadi jika anda belum menguasai salah satu dari teknologi tersebut disarankan untuk anda mempelajari dahulu sebelum melanjutkan pemahaman tentang ajax.

Contoh aplikasi Ajax

Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Aplikasi menggunakan ajax ini akan saya gabungkan pada aplikasi tugas besar saya beberapa minggu kemudian. Untuk memulainnya silahkan anda buat sebuah File php dan tuliskan kode dibawah ini lalu simpan dengan nama indek.php

Selanjutnya tuliskan kode dibawah ini lalu simpan dengan nama get.php

Kemudian tuliskan kode dibawah ini lalu simpan dengan nama koneksi.php. kode ini dugunakan untuk mengoneksikan antara php dengan mysql.

tuliskan kode dibawah ini lalu simpan dengan nama select.js.

karena aplikasi ini menggunakan database maka saya akan membuat batabase dengan nama ppdb. Selanjutnya buat table baru dengan nama rayon yang memiliki field id_rayon , rayon dan table sekolah yang memiliki field id_sekolah, sekolah, alamat, id_rayon.

Perlu diketahui semua file berekstensi .php, .js harus disimpan dalah sebuah folder yang berada pada folder htdoc di xampp. Jika semua sudah selesai coba jalankan aplikasi tersebut. 

Aplikasi ini berjalan apabila pada bagian combobox itu dipilih salah satu maka akan muncul sebuah tampilan dalam bentuk tabel yang berada pada rayon yang dipilih tersebut.

project bisa didownload Disini

Sumber : http://www.w3function.com/blog/?p=det&idn=23 

Terimakasih atas referensinya kepada sumber yang terkait.