• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Pengertian Ajax dan Contoh Penggunaan Ajax pada Website

05‘09
May

noimg.jpg

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 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 moderen (Web 2.0).

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. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. 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

Gambar Proses Ajax

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

Gambar Proses Biasa

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 XMLHttpRequest.

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. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html

<html>
<head>
<title>Contoh AJAX title>

</head>
<body>

Request File Dari HTML

File request.html akan ditampilkan disini
</body> </html>

Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:

    Text ini ditampilkan dengan metode proses request <strong>Ajax</strong>

Berikut saya terangkan

Awalnya kita perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:

function GetXmlHttpObject(){
	var xmlHttp=null;
	try {
	//Untuk Browser Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
	//Untuk Browser Internet Explorer
		try {
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

Pertama-tama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX untuk membuat XMLHttpRequest kita harus membuat kode xmlHttp = new ActiveXObject("Microsoft.XMLHttp");

Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url); yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: xmlHttp.send(null);

xmlHttp.onreadystatechange = function() merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request file yang telah kita lakukan. xmlHttp.readyState memiliki 4 status yaitu:

  • 0 Request kita belum dibuat
  • 1 Request kita sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)
  • 2 Request kita sudah dikirim tapi hasil belum diterima
  • 3 Request kita sedang diproses dikomputer klien
  • 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya

xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200)


Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = xmlHttp.responseText Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan centercol, ini kode ketika kita mengisi obj dengan centercol, var obj = document.getElementById(centercol).


Terakhir Kita memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: <input type="button" value="Tampilkan Request" onclick="getpages('request.html' ,'centercol')">.

Selamat mencoba

Anda juga mungkin suka dengan artikel ini :

Komentar

  • (07 Mar 2014 04:26:23)

  • k417 (16 Feb 2014 10:09:03)

    keren ajax ya :D
    fungsi try sama catch buat apaan sih min?

  • Ando (11 Jul 2013 05:07:50)

    Ajax memang keren, dari tampilan dan kecepatan memang paling bisa diandalkan. Makasi atas info ini. Cukup banyak menambah wawasan

  • yo (03 Jul 2013 01:46:08)

    untuk jQuery seperti apa penggunaannya? saya sudah coba seperti contoh tapi file html nya tidak mau keluar meskipun sudah satu folder. oiya, mau nanya contoh diatas apa berguna juga untuk memanggil jsp? nuhun...

  • orz (27 Jun 2013 08:40:07)

    Bagus juga nih,,
    mas, saya perlu source code untuk routing algoritma A Star di aplikasi saya..katanya pake ajax ya?? Bisa jelaskan? makasih.

» Muat Komentar Sebelumnya (28 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff