Mengimplementasikan AJAX pada Blogger

Tabel Konten
  1. HTML 
  2. jQuery 
Ajax Image

Mungkin beberapa dari kalian ada yang pernah memperhatikan/membaca komentar-komentar lama Saya atau perkataan lama Saya yang pernah Saya ucapkan, yang menyatakan bahwa kita tidak bisa mengimplementasikan AJAX pada blogspot. Saya ingin menyangkal semua perkataan Saya itu dan ingin mengatakan bahwa AJAX memungkinkan untuk diimplementasikan pada blogspot!

Untuk membuktikannya, coba Anda klik tombol di bawah ini:

Klik Untuk Memuat Halaman dengan AJAX

Tombol di atas cuma contoh awal, jadi hasil yang termuat jelas akan tampak sangat berantakan. Untuk membaca artikel ini lagi, mohon muat ulang halaman ini setelah Anda melihat efek yang terjadi.

Seperti yang kita semua tahu bahwa AJAX hanya berlaku untuk domain lokal, itu memang benar. Selama ini sepertinya Saya terlalu paranoid atau bahkan skeptis mengenai kekuatan blogspot yang sangat terbatas sehingga Saya tidak menyadari bahwa apapun bentuknya, asalkan URL yang digunakan untuk memuat adalah URL lokal, maka bisa dipastikan kita bisa mengimplementasikan AJAX pada platform tersebut. Karena bisa atau tidaknya kita di dalam mengimplementasikan AJAX sama sekali tidak ditentukan oleh kemampuan CMS Blogger bukan merupakan CMS, melainkan blog service.

Berikut ini adalah kode yang Saya gunakan:

HTML 

<div id="loading-text"></div>
<div id="container"></div>
<a id="ajax-button-example" href="/search/label/jQuery?max-results=10">Klik Untuk Memuat Halaman dengan AJAX</a>

jQuery 

$('#ajax-button-example').on("click", function() {
    var url = this.href;
    $('#loading-text').html('<span>Memuat halaman...</span>');
    $('#container').load(url, function() {
        $('#loading-text').html('');
    });
    return false;
});

Hanya penerapan jQuery .load() yang sangat mendasar. Jika sebelumnya Anda sudah pernah belajar mengenai seluk-beluk jQuery AJAX pasti Anda akan dengan mudah mengerti mengenai ini.

Ke depannya, mungkin akan ada beberapa tutorial/info mengenai pengimplementasian AJAX pada platform blogspot. Tapi Saya masih butuh waktu untuk memantapkannya. Begitulah.

18 Komentar

  • kamu info

    mantap mas :-bd

  • IRIL SAGITA

    kak, kalau mau buat .load() menjadi link http://www.dte.web.id/p/cari-artikel.html?q=.load() pada postingan gimana kak ?

    tujuannya utuk menautkan search entry pada postingan seperti yang ada disini.

    • Taufik Nurrohman

      Kalau untuk fasilitas menampilkan hasil penelusuran secara langsung, menggunakan feed posting sebenarnya juga sudah cukup. Pakai $.ajax() atau $.getJSON()

  • Unknown

    Wah semakin menarik pembahasannya..
    di tunggu versi detailnya..

    Sukses Selalu untuk Mas Taufik :-bd

  • bond

    inovasi baru buat blogger.. THANKSSS....

  • Anonim

    maaf kang keluar dari bahasan, cuma mau kasih tau

    nontifikasinya kayaknya error tuh, pas diklik nga bisa menampilkan koment terakhir :P

    • Taufik Nurrohman

      Sudah FIX. Terima kasih banyak <:) Kuman-kuman sudah ditemukan dan berhasil diberantas!

  • Suwardi

    Sekarang jadi penyimak yang baik saja deh dulu dan kalau ada waktu akan coba di blog Lab alias blog yang mengunakan akun lama...

  • Anonim

    mas kalo mau buat infinite scroll di blog gmn .jadi waktu di hompage di scroll kebawh muncul postingan lagi kaya wordpress 7:(

  • Yusril Ibnu Maulana

    Keren \o/ , tapi sayang masih "ada blog di dalam blog", ditunggu perkembangannya :D

  • kawsar

    i dont reely understand what this does?

    where exactly does the html code go?

    im guessing this loads the label pages via ajax but on your demo page everything refreshes i dont see ajax load

  • budkalon

    Kok ada logo DTE pegang golok? Serem banget 7:(

Komentar telah ditutup.