Implementasi AJAX pada Website

Untuk mempercantik dan memperingan kinerja website yang kalian develope, kebanyakan para pembuat Website (Developer) mengimplementasikan AJAX dalam pengerjaannya, mengapa? karena dengan AJAX pengunjung tidak perlu merefresh seluruh halaman website dengan teknik ini jauh akan lebih menghemat Bandwith hosting dan ringannya website tersebut saat di akses oleh pengunjung. Lalu apa sih AJAX itu sebenarnya? Ajax adalah Singkatan dari Asynchronous JavaScript and XMLHTTP yaitu suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif, melakukan pertukaran data dengan server dibalik layar sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan (dikutip dari wikipedia).

OK agar kalian g bingung dan kalimat – kalimat diatas keluar dari kontek (Takutnya bergitu) yang kalian harapkan kita coba implementasikan dalam sebuah code.

1. Buat 1 buah file beri nama index.html kemudian isikan seperti dibawah

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html >

    <head>

        <title>jquery Ajax</title>

        <link rel=”stylesheet” type=”text/css” href=”./css/style.css”>

        <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.2.min.js”></script> // saya gunakan jquery sebagai framework javascriptnya

        <script type=”text/javascript”>

            function loading(){ // Tampilkan Loading ketika Ajax berjalan.

                $(‘#loading’).ajaxStart(function(){

                    $(this).fadeIn(400); //jika ajax masih berjalan

                }).ajaxComplete(function(){

                    $(this).fadeOut(400); //hilangkan jika ajax sudah tidak dijalankan

                });

            }

 

            $(function(){

               $(“a”).click(function(){ //ketika Tag a di klik

                    var file = $(this).attr(‘id’); // ambil isi attribut id 

 

                    $(“#right_column”).load(file+”.html”,loading); // panggil file dan masukkan ke id right_column

               });

               $(“#right_column”).load(“home.html”); // ketika pertama kali halaman di buka panggil home.html

            });

        </script>

    </head>

     <body>

         <div id=”wrap”>

            <div id=”header”>

                <div class=”top”>Judul website</div>

                <ul class=”nav”>

                    <li class=”first parent”><a href=”#” id=”home”>Home</a></li>

                    <li class=”parent” id=”scat”><a href=”#” id=”categories”>Categories</a></li>

                    <li class=”parent”><a href=”#” id=”about”>About us</a></li>

                    <li class=”parent”><a href=”#” id=”contact”>Contact us</a></li>

                </ul>

                <div class=”clear”></div>

            </div>

            <div class=”content” id=”content”>

                <div id=”loading”>Loading…</div> //Tampilkan loading ketika Ajax dijalankan

                <div class=”left_column” id=”left_column”>

                    <div class=”box”>

                        <h2>Sub box</h2>

                        <ul>

                            <li>isi box</li>

                            <li>isi box</li>

                        </ul>

                    </div>

                </div>

                <div class=”right_column” id=”right_column“>  //Response dari ajax akan ditempatkan disini                 

                </div>

                <div class=”clear”></div>

            </div>

            <div id=”footer”>

                <a href=”http://www.iso.web.id”>iso.web.id</a> 2011

            </div>

         </div>         

     </body>   

</html>

kemudian buat 4 buah file masih beri nama home.html, about.html, contact.html dan categories.html isi ke 4 file tersebut sesuai dengan keinginan kalian. 
home.html saya isi dengan :
<p>Selamat datang di website saya.</p>
about.html saya isi dengan :
<h2>Tentang saya</h2>
Lorem ipsum dolor sit amet.
contact.html saya isi dengan :
<h2>Kontak kami</h2>
Halaman kontak
categories.html sayan isi dengan
<h2>Kategori</h2>
Lorem ipsum dolor sit amet
keempat file diatas adalah file – file hasil Response yang dipanggil melalui teknik AJAX, apabila file yang di panggil tersebut diketemukan browser akan menampilkan isi dari file-file tersebut.

 

Bagaimana mudah bukan mengimplementasikan AJAX pada sebuah website, kalian tidak perlu susah payah membuat Javascript murni untuk pengimplementasian AJAX  (Terbentur masalah Cross Browser) , gunakan Framework javascript untuk mempermudah dan memperingan kerja kalian dan yang terpenting Framework javascipt biasanya sudah support Cross Browser (jquery, dojo, Mootools dll).

 

DEMO | DOWNLOAD

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!