Dalam teknologi web-service yang saat ini sedang marak-maraknya, kita mengenal sebuah metode yang disebut dengan Ajax (Asynchronous JavaScript and XML), yaitu sebuah metode dimana teknologi web aplikasi menjadi lebih interaktif. Ajax memungkinkan sebuah aplikasi meminta data kepada server lewat jalan belakang tanpa harus merubah sebuah halaman web menjadi halaman web yang lain.
Dalam teknologi ajax, ada sebuah peraturan yang harus dipatuhi oleh developer atau programmer ketika membuat sebuah web aplikasi yang menggunakan ajax sebagai data retriever-nya, peraturan itu adalah, bahwa sumber dari data yang akan diambil harus berada dalam domain yang sama, jadi jika sumber data berasal dari domain yang berbeda maka request data tersebut tidak akan pernah berhasil.
Oleh karena Ajax adalah sebuah implementasi metode request data yang dilakukan oleh klien (client side), maka peraturan itupun juga diimplementasikan oleh para pembuat browser, seperti Mozilla, Google Chrome, Opera, dan browser-browser lainnya. Itu artinya jika para developer atau programmer memaksakan diri untuk membuat sebuah aplikasi ajax yang bisa cross domain maka ia harus melakukan trik-trik tertentu agar web aplikasi yang ia buat dengan implementasi ajax mampu berkomunikasi meski bukan dalam sebuah domain yang sama (cross domain).
Untuk memahami konsep ajax yang tidak membolehkan request data lewat cross domain, mari kita lakukan sebuah percobaan kecil. Kita akan membuat sebuah aplikasi klien dengan menggunakan Javascript untuk bisa membaca sebuah sumber berita yang berformat news web feed atau biasa kita kenal dengan RSS. Kode-kode ini sebenarnya sederhana, kita hanya membuat sebuah aplikasi ajax kecil yang mampu membaca xml dan kemudian mem-parsing-nya menjadi sebuah konten yang bisa terbaca dengan baik, berikut kode aplikasinya.
Dalam teknologi ajax, ada sebuah peraturan yang harus dipatuhi oleh developer atau programmer ketika membuat sebuah web aplikasi yang menggunakan ajax sebagai data retriever-nya, peraturan itu adalah, bahwa sumber dari data yang akan diambil harus berada dalam domain yang sama, jadi jika sumber data berasal dari domain yang berbeda maka request data tersebut tidak akan pernah berhasil.
Oleh karena Ajax adalah sebuah implementasi metode request data yang dilakukan oleh klien (client side), maka peraturan itupun juga diimplementasikan oleh para pembuat browser, seperti Mozilla, Google Chrome, Opera, dan browser-browser lainnya. Itu artinya jika para developer atau programmer memaksakan diri untuk membuat sebuah aplikasi ajax yang bisa cross domain maka ia harus melakukan trik-trik tertentu agar web aplikasi yang ia buat dengan implementasi ajax mampu berkomunikasi meski bukan dalam sebuah domain yang sama (cross domain).
Untuk memahami konsep ajax yang tidak membolehkan request data lewat cross domain, mari kita lakukan sebuah percobaan kecil. Kita akan membuat sebuah aplikasi klien dengan menggunakan Javascript untuk bisa membaca sebuah sumber berita yang berformat news web feed atau biasa kita kenal dengan RSS. Kode-kode ini sebenarnya sederhana, kita hanya membuat sebuah aplikasi ajax kecil yang mampu membaca xml dan kemudian mem-parsing-nya menjadi sebuah konten yang bisa terbaca dengan baik, berikut kode aplikasinya.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var url = "rss.xml"; //url to read rss
var xmlHttp;
var strContent = "";
function loadXML() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", url, false);
xmlHttp.send();
var xmlDoc = xmlHttp.responseXML;
var x = xmlDoc.getElementsByTagName('item');
for (i = 0; i < x.length; i++) {
strContent += "<b><u>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</u></b><br>";
strContent += "Description : " + x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue + "<br>";
strContent += "<a href='" + x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue + "'>read more</a><br>";
strContent += "<p><hr>";
}
document.getElementById("isi").innerHTML = strContent;
}
</script>
</head>
<body>
<input type="button" value="Read XML" onclick="loadXML()"><br>
<p>
<div id="isi" style="border:1px solid black;background-color:yellow;width:500px">
</div>
</body>
</html>
Untuk aplikasi ini awalnya kita akan mencoba membaca news web feed yang berformat xml dan ada dalam domain yang sama dengan aplikasi ajax yang kita buat ini. Caranya adalah bukalah sebuah link rss feeder seperti contoh dibawah ini http://news.google.com/?output=rss kemudian klik kanan pada halaman tersebut dan pilih view page source, simpan seluruh source tersebut dengan nama rss.xml, letakkan file xml tersebut dalam lokasi yang sama dengan aplikasi ajax kita ini.
Pada kode aplikasi ajax kita diatas ada sebuah variabel bernama url, dan variabel tersebut kita isi dengan nilai rss.xml yaitu file source news web feed yang kita simpan tadi. Dalam skenario ini, sumber dari data yang ingin di-retrieve menggunakan metode ajax ada dalam domain yang sama, sehingga seharusnya aplikasi ajax kita berjalan dengan baik dan mampu membaca semua isi berita tersebut. Silahkan anda coba dan buktikan sendiri, untuk tahu bagaimana hasilnya.
Sekarang mari kita rubah sedikit kode aplikasi ajax kita, gantilah nilai dari variabel url dengan http://news.google.com/?output=rss, dan coba anda jalankan kembali aplikasi itu, maka seharusnya aplikasi itu tidak akan berjalan dengan baik, sebab letak resource data dengan aplikasi itu sendiri berbeda domainnya.
Jika saja aplikasi yang kita buat ini masuk dalam tahap live-production, suatu hal yang amat merepotkan jika setiap saat kita harus me-retrieve sumber data rss google news tersebut dan kemudian menyimpannya ke dalam domain kita sendiri, apalagi jika aplikasi tersebut bisa kita modifikasi agar sumber data rss bisa lebih dari satu (multiple source).
Lalu bagaimana cara kita memanipulasi aplikasi tersebut? Kita harus bisa memanipulasi seolah-olah sumber data rss tersebut agar ada dalam domain kita. Kita membutuhkan sebuah aplikasi bantuan yang bisa me-relay sumber data tsb sehingga seakan-akan berada dalam domain kita sendiri. Aplikasi yang bisa me-relay suatu sumber data yang berasal dari domain proxy yang tidak sama dengan kita, disebut dengan aplikasi . Aplikasi ini membaca sumber data, dan kemudian menuliskan kembali sumber data tersebut secara temporer
Kita singkat cerita tentang browsing sana-sini untuk cari aplikasi proxy yang kita butuhkan tersebut, anda dapat mencarinya sendiri kode-kode contoh aplikasi proxy tersebut, banyak tersebar di internet, tinggal sesuaikan saja dengan bahasa pemograman yang anda ingin buat. Untuk percobaan ini saya menggunakan PHP untuk membuat program aplikasi proxy tersebut, dan berikut kode-kode php yang saya temukan.
Pada kode aplikasi ajax kita diatas ada sebuah variabel bernama url, dan variabel tersebut kita isi dengan nilai rss.xml yaitu file source news web feed yang kita simpan tadi. Dalam skenario ini, sumber dari data yang ingin di-retrieve menggunakan metode ajax ada dalam domain yang sama, sehingga seharusnya aplikasi ajax kita berjalan dengan baik dan mampu membaca semua isi berita tersebut. Silahkan anda coba dan buktikan sendiri, untuk tahu bagaimana hasilnya.
Sekarang mari kita rubah sedikit kode aplikasi ajax kita, gantilah nilai dari variabel url dengan http://news.google.com/?output=rss, dan coba anda jalankan kembali aplikasi itu, maka seharusnya aplikasi itu tidak akan berjalan dengan baik, sebab letak resource data dengan aplikasi itu sendiri berbeda domainnya.
Jika saja aplikasi yang kita buat ini masuk dalam tahap live-production, suatu hal yang amat merepotkan jika setiap saat kita harus me-retrieve sumber data rss google news tersebut dan kemudian menyimpannya ke dalam domain kita sendiri, apalagi jika aplikasi tersebut bisa kita modifikasi agar sumber data rss bisa lebih dari satu (multiple source).
Lalu bagaimana cara kita memanipulasi aplikasi tersebut? Kita harus bisa memanipulasi seolah-olah sumber data rss tersebut agar ada dalam domain kita. Kita membutuhkan sebuah aplikasi bantuan yang bisa me-relay sumber data tsb sehingga seakan-akan berada dalam domain kita sendiri. Aplikasi yang bisa me-relay suatu sumber data yang berasal dari domain proxy yang tidak sama dengan kita, disebut dengan aplikasi . Aplikasi ini membaca sumber data, dan kemudian menuliskan kembali sumber data tersebut secara temporer
Kita singkat cerita tentang browsing sana-sini untuk cari aplikasi proxy yang kita butuhkan tersebut, anda dapat mencarinya sendiri kode-kode contoh aplikasi proxy tersebut, banyak tersebar di internet, tinggal sesuaikan saja dengan bahasa pemograman yang anda ingin buat. Untuk percobaan ini saya menggunakan PHP untuk membuat program aplikasi proxy tersebut, dan berikut kode-kode php yang saya temukan.
<?php
// PHP Proxy
// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
// Author: Paulo Fierro
// January 29, 2006
// usage: proxy.php?url=http://mysite.com/myxml.xml
$session = curl_init($_GET['url']); // Open the Curl session
curl_setopt($session, CURLOPT_HEADER, false); // Don't return HTTP headers
curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // Do return the contents of the call
$xml = curl_exec($session); // Make the call
header("Content-Type: text/xml"); // Set the content type appropriately
echo $xml; // Spit out the xml
curl_close($session); // And close the session
?>
Simpan file tersebut dengan nama proxy.php dan kemudian tempatkan file tersebut berada dalam satu lokasi domain dengan aplikasi kita, kemudian kita modifikasi sedikit program ajax rss reader yang kita buat diatas hanya dengan mengganti nilai pada variabel url menjadi :
var url="php_proxy.php?url=http://news.google.com/?output=rss";Kemudian coba kembali program ajax rss reader kita. Dan seharusnya kita bisa menikmati berita melalui program ajax rss reader kita dengan baik.
Demikianlah percobaan kecil kita untuk saat ini. Terima kasih dan semoga bermanfaat
Demikianlah percobaan kecil kita untuk saat ini. Terima kasih dan semoga bermanfaat
Menteng, 09 Februari 2011
Josescalia
2 comments:
ooohhhh, baru tau saya apa itu AJAX.. kayaknya menarik juga untuk dipelajari disamping FBML.. hehehe
salam dari www.egablog.web.id ..
Think you preennt artikel nya akan aku coba praktekan di blogku by salam suksess slalu kee..
Post a Comment