JQuery terutama bagian AJAX-nya secara default tidak bisa menghandle Request AJAX yang berbeda domain, secara bawaan hanya bisa memproses request dari domain yang sama. Ini bukan bug melainkan bagian dari security. Ada berbagai cara untuk melakukan AJAX Request lintas domain, Anda bisa sedikit menggunakan script PHP yang mengambil data web servicenya bisa menggunakan file_get_contents ataupun curl.
Namun terkadang Request AJAX untuk Cross Domain alias domain berbeda betul-betul diperlukan JQuery secara langsung tanpa perantara apapun. Misalnya jika Anda yang sering bermain-main dengan mobile apps programming menggunakan metode hybrid, cordova contohnya. Dimana tidak bisa me-running script php, hanya javascript saja. Lalu bagaimana solusinya ?
Sebetulnya ada beberapa metode solusi dari AJAX Request Cross Domain, namun penulis hanya merekomendasikan metode yang satu ini karena solusi ini dimaintain terus dan tetap bekerja dengan baik sampai saat artikel ini di tulis.
Kita akan menggunakan JQuery plugin jquery-ajaxtransport-xdomainrequest, yang mana JQuery plugin ini bertugas sebagai perantara dalam pengiriman data, namun memiliki beberapa syarat.
1. Hanya menghandle Request bentuk POST atau GET
2. PRotokolnya harus sama HTTP atau HTTPS
3. Harus selalu Asynchronous
Dalam script php nya harus di sisipkan
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
Baik yang pertama harus di persiapkan adalah script php nya yang nantinya digunakan untuk menangani request, anggaplah script php ini sebagai servernya. Isinya kurang lebih seperti ini ...
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
if(isset($HTTP_RAW_POST_DATA)) {
parse_str($HTTP_RAW_POST_DATA,$arr);
$arr['extra']='1. POST Request from ilmuwebsite.com';
echo json_encode($arr);
}
else{
$_POST['extra']='2. POST Request from ilmuwebsite.com';
echo json_encode($_POST);
}
?>
Penulis meletakkannya di
http://www.ilmuwebsite.com/labz/crossdom/index.php
Kemudian bagian clientnya, form yang nantinya mengirim request, Anda bisa meletakkanya di localhost milik Anda
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
</head>
<body>
<input id="postdata" type="button" value="Send X POST" />
<script>
$(document).ready(function()
{
var contentType ="application/x-www-form-urlencoded; charset=utf-8";
if(window.XDomainRequest) contentType = "text/plain";
$("#postdata").click(function()
{
$.ajax({
url:"http://www.ilmuwebsite.com/labz/crossdom/index.php",
data:"name=lokadwiartara&email=lokadwiartara@ilmuwebsite.com",
type:"POST",
dataType:"json",
contentType:contentType,
success:function(data)
{
alert("Data from Server"+JSON.stringify(data));
},
error:function(jqXHR,textStatus,errorThrown)
{
alert("You can not send Cross Domain AJAX requests: "+errorThrown);
}
});
});
});
</script>
</body>
</html>
Kemudian nanti tampilannya akan seperti ini,
jika di klik tombol Send X POST akan menghasilkan
Anda bisa bereksperiment langsung, Semoga bermanfaat
Loka Dwiartara
Ilmuwebsite.com
