Cross Domain AJAX with JQuery

Posted in Javascript

Anyone attempting to do cross domain AJAX will be familiar with the following message:

XMLHttpRequest cannot load http://domain.com/page.php. Origin http://yoursite.com is not allowed by Access-Control-Allow-Origin.

However if you own the server you’re AJAXing data from, there’s a simple way to make this possible using a callback. Here’s an example:

server.php (On a different domain):

	$response = 'your response here'.
	if ( !isset($_GET['callback']) ) $_GET['callback'] = '';
	echo $_GET['callback'] . '('.json_encode(array('response'=>$response)).');';

client.php (with JQuery):

$.getJSON('http://yourdomain.com/server.php?callback=?', function(json) {
	alert( json.response );

That’s all there is to it. Remember the ?callback=? URL segment or it won’t work.