Saturday, January 19, 2013

Mengimplementasikan AJAX pada Blogger

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.

Labels: , , ,

18 Comments:

At Saturday, January 19, 2013 at 5:19:00 PM GMT+7, Blogger kamu info said...

mantap mas :-bd

 
At Saturday, January 19, 2013 at 9:11:00 PM GMT+7, Blogger IRIL SAGITA said...

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.

 
At Saturday, January 19, 2013 at 9:43:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Saturday, January 19, 2013 at 9:57:00 PM GMT+7, Blogger IRIL SAGITA said...

Caranya ?

 
At Saturday, January 19, 2013 at 11:52:00 PM GMT+7, Blogger Unknown said...

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

Sukses Selalu untuk Mas Taufik :-bd

 
At Sunday, January 20, 2013 at 6:36:00 AM GMT+7, Blogger bond said...

inovasi baru buat blogger.. THANKSSS....

 
At Sunday, January 20, 2013 at 10:44:00 AM GMT+7, Anonymous Anonymous said...

maaf kang keluar dari bahasan, cuma mau kasih tau

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

 
At Sunday, January 20, 2013 at 9:48:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Tuesday, January 22, 2013 at 3:30:00 PM GMT+7, Blogger Suwardi said...

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

 
At Sunday, January 27, 2013 at 2:17:00 PM GMT+7, Anonymous Anonymous said...

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

 
At Sunday, January 27, 2013 at 6:27:00 PM GMT+7, Blogger Taufik Nurrohman said...

Pakai JSON saja: /2012/11/memperbaharui-pemuatan-json-berdasarkan.html
Feed posting nanti diset menjadi default, bukan summary. Tidak mungkin bisa dijelaskan di area komentar.

 
At Monday, January 28, 2013 at 7:49:00 PM GMT+7, Anonymous Anonymous said...

postingin aja mas haha

 
At Wednesday, February 13, 2013 at 7:29:00 PM GMT+7, Blogger budkalon said...

iya, :) posting aja

 
At Sunday, March 10, 2013 at 7:34:00 PM GMT+7, Blogger Yusril Ibnu Maulana said...

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

 
At Monday, May 13, 2013 at 5:58:00 AM GMT+7, Blogger kawsar said...

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

 
At Monday, May 13, 2013 at 1:50:00 PM GMT+7, Blogger Taufik Nurrohman said...

Works fine for me :\
Just click the button, don't open it in new tab. Or, try click this link to load a comment item based on comment permalink:

/2013/04/widget-blogger-untuk-menampilkan-daftar.html?showComment=1368415953261#c7237788095186558105

 
At Monday, May 13, 2013 at 1:57:00 PM GMT+7, Blogger Taufik Nurrohman said...

/2013/03/infinite-scroll-experiment-with-blogger.html

 
At Friday, May 31, 2013 at 10:52:00 PM GMT+7, Blogger budkalon said...

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

 

Post a Comment

<< Home