Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bahasan Mengenai Pengenalan Ajax Sudah Pernah Dibahas Pada

    Diunggah oleh

    Bayu Januar
    7 tayangan3 halaman
    heeee formalitas gan

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    heeee formalitas gan

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan3 halaman

    Bahasan Mengenai Pengenalan Ajax Sudah Pernah Dibahas Pada

    Diunggah oleh

    Bayu Januar
    heeee formalitas gan

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Bahasan mengenai pengenalan Ajax sudah pernah dibahas pada Mengenal Ajax dan JQuery.

    Pada postingan kali ini saya


    akan membahas sedikit bagaimana implementasi AJAX pada aplikasi website secara sederhana saja ya??? okee???
    Secara garis besar, Ajax digunakan untuk pertukaran data secara diam-diam antara aplikasi web yang disisi client dengan
    aplikasi web yang berada di sisi server. Namun sebelum proses pertukaran data dilakukan, terlebih dahulu harus dibentuk
    sebuah objek untuk melakukan pertukaran data tersebut di javascript. Objek tersebut dinamakan XMLHTTPRequest.
    Oke, tanpa perlu banyak basa-basi lagi, saya akan memulai memberikan contoh pembuatan pertukaran data. Disini saya
    menggunakan PHP sebagai bahasa di sisi server. Oleh sebab itu, diharapkan bagi yang mau mencoba ini paling tidak, dikit
    banyak mesti ngerti PHP ya???
    Buatlah file ajax.js dengan isi sebagai berikut:

    //--------------------------------------------------------------function buatHTTPReq()
    {
    var http;
    if(window.XMLHttpRequest)
    {
    http = new XMLHttpRequest();
    }
    else
    {
    http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return http;
    }

    //--------------------------------------------------------------function tukerData(permintaan, idobjek)


    {
    var req;
    req = buatHTTPReq();
    req.onreadystatechange = function(){
    if(req.readyState==4 && req.status==200)
    {
    document.getElementById(idobjek).innerHTML = req.responseText;
    }
    };
    req.open("GET", permintaan, true);
    req.send();
    }
    //---------------------------------------------------------------

    Pada coding diatas, fungsi buatHTTPReq() digunakan untuk membuat objek XMLHTTPRequest, kemudian pada fungsi
    tukerData() digunakan untuk meminta data ke server dengan metode GET, kemudian hasil permintaan data akan ditampilkan
    pada idobjek. Setelah dibuat coding diatas, maka buatlah sebuah file proses.php dengan isi contoh sebagai berikut:
    <?php
    echo "tulisan ini hasil permintaan dengan ajax";
    ?>
    Setelah membuat proses.php diatas, barulah buat file index.html untuk menguji ajax yang telah dibuat dengan isi sebagai
    berikut:
    <html>

    <head>
    <title> Implementasi Ajax </title>
    <script

    type="text/javascript" src="ajax.js"></script>

    </head>
    <body>
    <div id="hasil_ajax"></div>
    <button onclick="tukerData('proses.php','hasil_ajax')"> Proses
    </button>
    </body>
    </html>
    Oke.. silahkan dicoba dengan aktifkan terlebih dahulu server apache agar proses.php nya berjalan dengan baik, dan gunakan
    file yang index.html untuk mencoba aplikasinya.
    Hasil dari aplikasi tersebut akan menampilkan tulisan "tulisan ini hasil dari permintaan ajax" setelah menekan tombol proses,
    hal tersebut terjadi karena proses pertukaran data secara diam-diam, yaitu meminta ke proses.php dan ditampilkan pada
    objek hasil_ajax. Kalo dicoba dengan data yang kecil di komputer lokal tentunya tidak akan terasa banyak dengan proses
    yang non ajax, namun kalo dibuat dengan data yang diminta besar dan di letakan via internet tentunya akan sangat terasa
    proses yang terjadi dengan proses yang non ajax.

    Kesimpulan
    Dari penerapan AJAX yang telah dilakukan, dapat ditarik beberapa kesimpulan seperti:
    1.

    Dalam penerapan Ajax diperlukannya objek XMLHttpRequest untuk browser IE7+, Safari, Opera, Chrome, Firefox
    dan ActiveXObject("Microsoft.XMLHTTP") untuk IE

    2.

    Objek XMLHTTP merupakan pustaka yang sudah diintegrasikan pada webbrowser yang memiliki kegunaan seperti
    pertukaran data secara GET / POST

    3.

    Pada saat terjadinya pertukaran data hanya melakukan proses pada bagian tertentu saja, tidak merubah seluruh
    halaman penuh, sehingga meningkatkan kecepatan.

    4.

    Pada objek XMLHttpRequest maupun XMLHTTP memiliki struktur yang hampir sama. Memilki
    event onreadystatechange yang berguna untuk mengetahui response pertukaran data akan, sedang dan sudah
    berlangsung.

    5.

    Memiliki Method open() untuk menentukan cara/metode dan kemana pertukaran data harus terjadi

    6.

    memiliki Method send() untuk memulai pertukaran data.

    7.

    Dalam penggunaannya dihalaman HTML, ajax digunakan pada bagian bahasa Javascript

    8.

    Pertukaran data yang dilakukan dengan menggunakan teknik AJAX ini haruslah dengan file yang berada pada satu
    server yang sama.

    Kemudian lakukanlah jurus utak-atik untuk membuat aplikasi web yang lebih keren lagi. Semoga dapat menjadi referensi yang
    bermanfaat dalam membangun aplikasi web yang interaktif.

    Dan ini jquerynya


    <DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $

    (function()
    {
    alert('test jquery succes');
    }
    );

    </script>
    </head>
    <body>
    </body>
    </html>

    Anda mungkin juga menyukai