Teknik JQuery Menyederhanakan AJAX

Biar Anda percaya, sekarang akan saya buktikan bagaimana jQuery mampu menyederhanakan kode-kode Ajax. Kita ambil contoh kasus sederhana, yaitu menampilkan jam dari server.

Pertama, buat dulu skrip php untuk mengambil waktu dari server.

Skrip jam.php

  <?php
       date_default_timezone_set ("Asia/Jakarta");
         $jam = date("H:i:s");
         echo "$jam WIB";
  ?>


Untuk mengujinya, coba jalankan skrip jam.php di browser, maka akan tampil jam saat ini dari server.


Selanjutnya, kita akan membuat versi ajaxnya, perhatikan skrip berikut :

Skrip jam_ajax.php

<html>
    <head>
        <script language= "javascript">
            var XMLHttpRequestObject = false;
            if (window.XMLHttpRequest){
            XMLHttpRequestObject = new XMLHttpRequest();
            } else if (window.ActiveX0bject) {
            XMLHttpRequestObject =
                    new ActiveXObject("Microsoft.XMLHTTP");
            }
           
            function getjam (sumberdata, divID) {
                if (XMLHttpRequest0bject) {
                    var obj = document.getElementById(divID);
                    XMLHttpRequestObject.open("GET",sumberdata);
                    XMLHttpRequestObject.onreadystatechange = function () {
                        if (XMLHttpRequest.readyState == 4 &&
                                XMLHttpRequestObject.status == 200) {
                            obj.innerHTML = XMLHttpRequestObject.responseText;
                            setTimeout("getJam('jam.php','divjam')",1000);
                        }
                    }
                    XMLHttpRequestObject.send(null);
                }
            }
            window.onload=function (){
                setTimeout("getJam('jam.php','divjam')",1000);
            }
                </script>
            < /head>
    </body>
        <div id="divjam"></div>
    </body>
                    < /html>

Sekarang coba jalankan skrip jam_ajax.php di browser, maka akan jam saat ini dari server.

Sepintas hasil dari skrip jam.php dengan jam_ajax.php. Perbedaanya terletak pada detik yang ditampilkan oleh skrip jam.php terlihat statis, karena untuk memperoleh detik-detik berikutnya, Anda harus melakukan refresh/reload pada browser. Sedangkan detik yang di tampilkan oleh skrip jam_ajax.php lebih dinamis, dimana detiknya berjalan/berdetik secara terus menerus.

Dan terakhir, tentu kita akan membuat versi jQuerynya, perhatikan skrip berikut :

Skrip jam_jQuery.php 

<html>
    <head>
        <script src="jquery-1.4.js"></script>
        <script>
        $(document). ready(function () {
            setInterval(function () {
                $('#divjam').load('jam.php?acak='+Math.random());
            }, 1000); //refresh tiap 1detik
        })</script>
    </head>
    <body>
        <div id="divjam"></div>
    </body>
</html>


Sekarang coba jalank.an skrip jam_jquery.php di browser, maka akan tampil jam saat ini dari server. Hasilnya persis dengan skrip yang di haslkan oleh skrip jam_ajax.php.

Tentu ada perbedaanya dong ? Ya uyalah, pertama perhatikan skripnya . Skrip jam_ajax.php lebih panjang di bandingkan jam_jquery.php,tapi hasil yang di inginkan sama persis, pilih mana hayo ? TEntu Jquery dong.

Kedua, coba jalankan skrip jam _ajax.php di browser selain mozila firofex, misalnya INternet Explorer (IE). Hasilnya sama persis dengan skrip jam.php, dimana detiknya tidak berdetak,artinya teknologi Ajax tidak berjalan dengan baik di browser IE (masalah kompatibilitas browser)

Namun, kalau Anda jalankan skrip jam_jquery.php di IE, maka detiknya tetap berdetak/berjalan dengan baik, artinya teknologi Ajax yang di bungkus oleh jQuery support dengan browser selain Mozilla Firofex.

Cukup dengan kedua alasan tersebut, jQuery dapat di jadikan pilihan utama dalam membuat website berteknologi Ajax .. dalam hal ini,Anda harus setuju dengan saya, kalau tidak .. mending ke laut aja deh :) 

Catatan : 

  •  Tentu Anda masih bingung dengan skrip-skrip Ajax dan jQuerynya ya, tapi tenang aja bro, kita akan segera mempelajarinya pada sub-sub berikutnya.
  •  Skrip jam_ajax.php tentu dapat Anda jalankan di browser IE dengan catatan Anda harus mendambahkan header cache di skript jam.php 
       Contohn skripnya sbagai berikut (Perhatikan teks yang berwarna merah)

Skrip jam.php (penambahan header cache)
<?php
      header ("Content-Type :  text/plain") ;
      header ("Cache-Control : no-cache, must-revalidates") ;
      header ("Expires : Mon, 13 May 1985 07 : 07 : 07 GMT ") ;

     //  Expires yang terpenting di isi dengan  tanggal yang sudah
    //   kadaluarsa  (bukan tanggal hari ini)

  \ date_default_timezone_set ("Asia/Jakarta");
         $jam = date("H:i:s");
         echo "$jam WIB";
  ?>



~~~~~~~~ ~~~ Semoga Bermanfaat Untuk Anda ~~~~~~~~~~~~~~~
 


1 Response to "Teknik JQuery Menyederhanakan AJAX"

  1. How do I gamble with the internet? - Dr. Mike's Casino & Hotel
    However, many of the 하남 출장안마 world's most popular gambling websites do not offer online 경주 출장샵 gambling 안양 출장샵 services. 춘천 출장안마 In addition, online 창원 출장마사지 gambling is not as popular as its

    ReplyDelete

click duit