Cross Domain Ajax menggunakan jQuery

Request Ajax Lintas domain secara normal tidak mungkin untuk dilakukan karena masalah sekuriti. Tetapi ada beberapa teknik yang dapat digunakan menggunakan server-side proxy, flash proxy, jsonp dan Yql.

1. Server side proxy.

Ini adalah teknik yang paling sederhana. caranya adalah membuat sebuah kode disis server (php,jsp atau jsp) untuk mengambil content yang di inginkan. Jika menggunakan php, maka anda bisa memanfaatkan library curl. Setelah output dari domain lain didapatkan baru diambil ke server. Secara personal cara ini menurut saya sangat me”ribet”kan, karena kita melakukan dua kali proses yaitu ambil di sisi server lalu di passing langi ke client. Contoh pengambilan data dari domain yang berbeda:

class Proxy extends Controller {
 
	function  Proxy()
	{
		parent::Controller();	
	}
 
     function twitter()
     {
		$this->load->library('Curl');
                $data=$this->curl->get('http://twitter.com/users/show/ibnoe.xml');
		echo json_encode($data);	
     }
}

*code menggunakan codeigniter, library curl bisa di dapatkan library curl disini

2. Flash proxy.

Cara ini adalah cara yang menggunakan flash untuk mengambil data. Cara ini mempunyai batasan yaitu domain tujuan harus mempunyai sebuah file “crossdomain.xml” yang berfungsi sebagai penanda bahwa content domain tersebut bisa diakses melalui domain yang berbeda. contoh http://twitter.com/crossdomain.xml

Jika anda tertarik ada dua library yang dapat di gunakan yaitu flXHR (ada jQuery adapter) dan CrossXHR.

3. JSONP

JSONP adalah kepanjangan dari JSON with Padding. JSONP digunakan untuk melengkapi data yang berformat JSON dengan sebuah pola penggunaan yang memungkinkan suatu halaman untuk di gunakan dari server lain. contoh Json sederhana

   {"Nama":"Ibnu Daqiqil","Id":7}

JSON diatas hanya berisi data tampa “padding”. Padding biasanya di sebut juga callback. Sebuah callback dibutuhkan karena json itu hanya sebuah format data dan tidak bisa di eksekusi secara langsung. Biasanya kita menyertakan prefix/padding pada saat memanggil

    <script type='text/javascript' src='http://domain.com/getjson?jsonp=parseResponse'>
</script>

dan hasil yang akan diterima seperti

    parseResponse({"Nama":"Ibnu Daqiqil","Id":7})

callback tersebut akan menjadi sebuah eksekusi fungsi oleh fungsi parseResponse
contoh jsonp di jQuery

$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img />").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
  });
});

4. YQL

YQL adalah kepanjangan dari Yahoo Query Language. Simplenya YQL adalah menyuruh yahoo untuk mengambil web/api yang kita minta lalu di tampilkan dan di retrive dalam bentuk query contoh

SELECT * FROM html WHERE url="{URL}" AND xpath="*"
SELECT * FROM flickr.photos.interestingness(20)

Sudah ada pluggin yang jQuery yang memanfaatkan fitur ini untuk mengenablekan cross domain ajax

$(document).ready(function() {
   $('#container').load('http://google.com'); // SERIOUSLY!
 
   $.ajax({
      url: 'http://news.bbc.co.uk',
      type: 'GET',
      success: function(res) {
          var headline = $(res.responseText).find('a.tsh').text();
          alert(headline);
    }
});
 
  $.get('http://snipplr.com/all/language/jquery', function(res) { 
    $(res.responseText).find('.snippets li h3').each(function() { 
      var anchor = $(this).children('a:last');         
      jQuery('<li />', { //build a li element
        html: jQuery('<a />', { //with a A element inside it
                href: 'http://snipplr.com' + anchor.attr('href'), //set the href for the link
                text: anchor.text() //and the text
              })
      }).appendTo($('#jquery_snippets')); //append it to a list
    });
 
    $('#jquery_snippets li:first').remove(); //remove this first li ("Loading...") when done
  });
});

9 Comments

February 24, 2010 3:02 pm by Pasa Firaya, ST Reply

Berkunjung menjalin relasi.

February 24, 2010 4:45 pm by ibnoe Reply

Hehehe.. salam kenal mas ^^

February 25, 2010 8:31 am by Permana Jayanta Reply

Seperti yang bsia saya mengerti cuma cara pertama ^^. Yang nomor 2, 3 , dan 4 belum bisa membayangkan caranya, mungkin harus dicoba dulu kali ya. btw, salam kenal

February 25, 2010 9:45 am by ibnoe Reply

cara ke 2,3,4 itu udah g pake xhr lagi sebenarnya mas ^^

February 25, 2010 2:11 pm by muridmu Reply

Mantab kali Om... makin sakti aja ... :)
kapan ajarin aku pascal lagi nu??
hehehe teringat masa lalu

February 25, 2010 11:40 pm by ibnoe Reply

Aih suhu merendah pulak..

June 25, 2010 11:01 am by ika Reply

wah.. pas banget, aku lagi perlu ini juga.
Makasi bayk mas, salam kenal.. :)
July 23, 2010 12:20 am by axliz Reply

postingan mantab gan,
saya mau tanya, bagaimana merubah atau enable crossdomain.xml pada blogspot.?
terima kasih
July 24, 2010 2:08 am by axliz Reply

info yang bagus mas
mas saya mau tanya, bagaimana cara mengubah crossdomain.xml di blogspot?
saya sudah cari2 tetep gak bisa, n bingung dimana letak root untuk blogspot.

mohon penjelasannya mas.

terima kasih