Recently, I was ask to build a prototype to demonstrate cross-domain resource sharing through AJAX and JSON. For those who dont know, cross-domain AJAX request are not allowed by default until the web server handling the request allows it. This is done by sending the "Access-Control-Allow-Origin" header. Following is an example of a client and server peforming CORS.
Server Code:
Ajax Client Code:
Server Code:
<?php
header('Access-Control-Allow-Origin: *');
$Response = array(1,2,3);
echo json_encode($Response);
?>
Ajax Client Code:
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<input type="button" value="test" onclick="testajax()" />
</body>
<script>
function testajax()
{
$.ajax({
crossdomain : true,
type : "text/plain",
type : "GET",
url : "http://www.testerzone.com/test/test.php",
success : function (data){
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
</html>
