Menggunakan obyek navigasi AJAX pada Javascript

NAVIGASI DENGAN AJAX (MATERI TAMBAHAN)
Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada Javascript. AJAX, Asynchronous Javascript and XML. AJAX bukan merupakan bahasa pemrograman baru, melainkan kumpulan kelas Javascript yang dapat digunakan salah satunya untuk menampilkan halaman lain tanpa merubah keseluruhan halaman saat ini

Dengan obyek ini perpindahan halaman dapat dilakukan tanpa menghilangkan halaman yang sedang dibuka saat ini. Ini perbedaan antara menampilkan halaman dengan AJAX dan cara sebelumnya. Dimana pada saat menunggu halaman yang akan ditampilkan, halaman saat ini tetap terlihat, karena prosesnya terjadi dilatar dan tidak terlihat oleh user.

jQuery merupakan salah satu librari yang dapat digunakan untuk menerapkan AJAX ini dengan perintah-perintah yang lebih sederhana. Librari disini maksudnya adalah kumpulan kelas atau obyek yang didalamnya juga berisi fungsi, variabel dan konstanta. Dengan menyertakan librari ini dalam program akan dapat menambah kemampuan aplikasi sebagaimana fitur yang ditawarkan dalam librari tersebut.

Website http://jquery.com berisi link untuk mendownload librarinya dan juga ada banyak tutorial yang diberikan yang dapat diikuti untuk penerapan jQuery pada pemrograman halaman web. Sampai saat buku ini ditulis jQuery saat ini telah sampai pada versi 2.0.3.

Berikut ini merupakan contoh penerapan librari jQuery untuk menampilkan  halaman lain menggunakan AJAX. Contoh program :
 

File: halaman1.html

<div>Halaman 2 akan ditampilkan dibawah ini menggunakan
AJAX
jQuery.</div>
<div id="hal2">Loading...</div>
<button onclick="tampilkanWeb()">Muat web</button>
<script src="jquery-2.0.3.js"></script>
<script>
function tampilkanWeb(){
$('#hal2).load("halaman2.html");
}
</script>
File: halaman2.html

Ini contoh halaman 2.<br>
Selamat datang di Halaman 2.<br>
 

Tampilan halaman 1. html setelah memuat halaman 2. html pada div
dengan id hal2

Dari hasil percobaan ini dapat dilihat bahwa perubahan hanya terjadi pada tag <div> dengan id hal2 dan tidak pada alamat URL di browser, yang tetap berada pada halaman 1. html. Skrip ini dapat dijalankan apabila ditempatkan sebagai aplikasi server menggunakan web server seperti Apache (dengan menginstall aplikasi XAMPP atau sejenisnya) atau dengan menambahkan argumen --allowfile- access-from-files pada eksekusi browser Google Chrome seperti terlihat pada tampilan berikut

Penambahan argumen eksekusi pada browser Google Chrome

Setelah menambahkan argumen diatas, halaman HTML dapat dibuka kembali menggunakan browser 

Halaman dengan librari AJAX pada browser Google Chrome

Google Chrome yang sudah dimodifikasi ini. Hasilnya jika berhasil menambahkan argumen eksekusi diatas adalah sebagai berikut.