Welcome to Abdul Malik Ikhsan's Blog

YQL AND JSON – Cross Domain Request Handling

Posted in Javascript, Teknologi by samsonasik on March 17, 2011
YQL Logo

YQL

YQL ( Yahoo! Query Language ) adalah Bahasa Query yang dibuat oleh Yahoo! ( sebagai bagian dari Yahoo! Developer Network ).  YQL memungkinkan kita untuk mengquery, filter, dan mengkombinasikan data dari sumber-sumber yang berbeda di internet. Statement YQL berupa sintaks yang mirip SQL yang memudahkan developer untuk mempelajarinya.

Untuk mengakses YQL Web Service, aplikasi web kita dapat memanggil HTTP GET, passing YQL statement di URL Parameter seperti contoh berikut :

http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM flickr.photos.search WHERE text="Cat"

Baik, saya akan mencoba memberi sebuah contoh simple penggunaan YQL dengan Ajax request ( menggunakan jQuery javascript library ). Anggaplah kita mempunyai server side application berupa sebuah file php dengan content sebagai berikut  ( dengan domain http://subdomain.yourdomain.com dan file yang diakses adalah file.php ) :

<?php
$data = array('nama' =>
 array('aku','kamu','dia','anda','mereka','saya','SAMSONASIK'));

echo json_encode($data);

Nah, kita akan coba akses dari client secara Ajax, dengan kode sebagai berikut :

<html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">

 $(document).ready(function(){
 $("#crosscaller").click(function(){
 //get current time content ...
 var site = 'http://subdomain.yourdomain.com/file.php?'+(new Date()).getTime();
 //yql ...
 var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&diagnostics=false&_maxage=1';

 // Request that YSQL string, and run a callback function.
 $.ajax({url: yql,
 dataType: 'json',
 jsonp: 'callback',
 jsonpCallback: 'callhandler'
 });
 });
 });

 function callhandler(data) {
 // If we have something to work with...
 if ( data.results[0] ) {
 // Strip out all script tags, for security reasons.
 // BE VERY CAREFUL. This helps, but we should do more.
 data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

 $("#result").html('').html(data);

 var jsondataHTML  = $("#result p").html() ;

 var ItemsJson = JSON.parse(jsondataHTML);

 //get items of json object ...
 alert(ItemsJson.nama[1]);

 }
 // Else, Maybe we requested a site that doesn't exist, and nothing returned.
 else {throw new Error('Failed ...');}
 }

 </script>
 </head>
<body>
 <input type="button"  id="crosscaller" value="get your domain content" />

 <!-- get data -->
 <div id="result"></div>

</body>
</html>

Sehingga jika kita run, akan tampil sebagai berikut :

Image :
http://l.yimg.com/a/i/us/pps/yql128.gif
Referensi :
http://developer.yahoo.com/yql/guide/running-chapt.html
http://icant.co.uk/articles/crossdomain-ajax-with-jquery/
https://gist.github.com/raw/726079/a67c59253fa9700e1d29a5af100b9b2a937f0ad0/yql-cross-domain.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: