This AJAX thingy is all very well when you are working on your own domain. But one of the key things you'll want to do with AJAX is use data from a third party. This requires what is known as a cross domain request ie your server has to call the JSON or XML from another box with another domain.

Facebook have an API which allows use to extract all kinds of data from the masses that they continually farm. For example:

https://graph.facebook.com/search?q=sheffield

This URL call is to what facebook calls the 'graph' API. In this case I am using a query string of q=sheffield to ask for public posts which mention sheffield. If you follow this URL you will be presented with a lovely load of JSON. Now presumably you'll want to use that in your webpage. So next we'll build an example using Javascript's HttpXMLRequest as we have seen done before. We'll use this Javascript.

function showData() {
    var myJson  = JSON.parse(myXHR.responseText);
    var noPost = myJson.data.length;
         for(var i=0; i<noPost;i++){
            document.getElementById('resp').innerHTML +=myJson.data[i].message;
            document.getElementById('resp').innerHTML +="<br>";
         }
}
var myXHR=new XMLHttpRequest();
myXHR.onload = showData;
myXHR.open("GET","https://graph.facebook.com/search?q=sheffield", true);
myXHR.send(null);

View the demo.

Here we loop around the data object in the returned JSON to extract each of the messages. We then insert them into the DOM with getElementById.

Cross Domain Files - crossdomain.xml

The above example is a cross domain call and it works because Facebook have kindly added something called a cross domain file to the allow us to access the data. This is placed in the root of their server. You can see the Facebook crossdomain.xml file here and this is what it looks like:

<cross-domain-policy>
<allow-access-from domain="*" secure="false"/>
<site-control permitted-cross-domain-policies="master-only"/>
</cross-domain-policy>

Notice how it has been set to allow-access-from domain="*", the wildcard * allows all domains to make cross domain calls.

Cross Domain Calls without a crossdomain.xml

Some providers of data do not provide a crossdomain.xml. When this happens your cross domain call will fail. Take this example:

http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&output=json

This is a demo call to Yahoo's local search service. You'll see if I place that address in a URL I get some lovely data.

However, if I place that URL in our sample code as follows:

function showData() {
			document.getElementById('resp').innerHTML = myXHR.responseText;
}
var myXHR=new XMLHttpRequest();
myXHR.onload = showData;
myXHR.open("GET","http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=90210&output=json", true);
myXHR.send(null);

Then in the case of Google Chrome we get this response in the console:

Cross Domain Fail Message

The key message here is 'Origin http://www.mustbebuilt.co.uk is not allowed by Access-Control-Allow-Origin' which indicates that Yahoo are not allowing us to connect to the data.

Using JSON-P

We can fix the above example by using a technique known as JSON-P - that is JSON with padding. The trick here is to wrap the AJAX call in a function call. As such we replace the usual creation of an XMLHttpRequest with a simple <script> tag call as follows:

<script type="text/javascript" src="http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=90210&output=json&callback=yahoo"></script>

The key to the above working is the appending of the &callback=yahoo to the API call. The name yahoo is just convenient to this example, you can call it what you like, as long as it matches a function you create to then handle the response. In the example below you'll see the function called yahoo() and how it expects a parameter (I have called yahooData) that will be the actual data response in JSON format.

<script language="JavaScript" type="text/javascript">
function yahoo(yahooData){
	var noPizzaPlaces = yahooData.ResultSet.Result.length;
	for(var i=0; i<noPizzaPlaces;i++){
		document.getElementById('resp').innerHTML +=yahooData.ResultSet.Result[i].Title;
		document.getElementById('resp').innerHTML +="<br>";
	}	
}
</script>
<script type="text/javascript" src="http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=90210&output=json&callback=yahoo"></script>

Here is the working demo.

So you can now find out where to go for Pizza when in Beverley Hills.

Leave a Comment