Tutorial Ajax Request Cross Domain Menggunakan JQuery

Tutorial Ajax Request Cross Domain Menggunakan JQuery


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 ?

Tutorial : "Jurus Terlarang Website Bot Development, Cara Otomatisasi Semua Pekerjaan Online Tanpa Operator"
Studi kasus membuat 5 jenis Web Bot. 1. Bot kirim pesan masal dan autoposting di Instagram, 2. bot pencari pasukan reseller di Tokopedia, 3. pencari buyer di Bukalapak, 4. Mengumpulkan No HP di OLX, 5. Bot Kirim Pesan Masal Whatsapp . Penjualan terbatas, ditutup jika sudah mencapai kuota. Lengkapnya kunjungi store.ilmuwebsite.com)


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
ajax cross domain request

Anda bisa bereksperiment langsung, Semoga bermanfaat

Loka Dwiartara
Ilmuwebsite.com

Artikel Terkait :