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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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'>

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
  });
});

Artikel yang berhubungan

• Comet menggunakan Codeigniter dan JQuery
• Belajar jQuery mudah
• Membuat Validasi Form dengan Jquery
• Mengubah warna homepage menggunakan jQuery
• Melihat Follower dengan Twitter Api
• Membuat Slideshow dengan Apple Styles