Do you ever go into a project with it all mapped out in your head? You’ve got every twist and turn of the code written before you’ve ever sat down to type a line. How many times does it actually work out like that? That was me entering this project. We have a partner who needed to access one of our data stores. We told them we’d build them a custom solution to take advantage of this so I decided I’d develop a nice cross browser friendly application in AJAX that they could drop onto their site which would call these XML files on our servers. It seemed simple enough on the surface.

I put together some quick sample code to get a proof of concept rolling only to hit a wall right out of the gate. My old nemesis, Same Origin Policy, code blocked me from accessing the XML since the file was on a different server than the processing code. Basically, Same Origin Policy prevents you from accessing a file, like our XML data, when you are calling it from a remote server. Its a security mechanism designed to keep the script kiddies from doing harmful javascript injections on your site. Start injecting some AJAX code, and the serious fun begin.

So how can we make these cross domain data calls if the default mechanism within Javascript is setup to thwart us at our every turn? There are a few different options, but the one I choose to pursue transforms our data over to JSON and utilizes a PHP Proxy to talk with our AJAX code.

While I would have preferred to work in XML, since I’ve worked with more XML code over the years than I care to admit, JSON isn’t a bad alternative. While its format is a syntactical departure, its spirit is one in the same with XML. Updating my data routines to encode the new files in JSON was a snap. Here is a sample file:

{"events": [{"city": "Duluth, GA", "date": "7/2/2014", "url": "evtid=22697"},{"city": "Atlanta, GA", "date": "7/4/2014", "url": "evtid=22697" }]}





If you haven’t worked with JSON before, I suggest running your JSON code through a validator so you can make sure you are passing files the remote server can read. Just like with XML, a stray bracket or comma can throw the whole thing in the garbage. While we are discussing tools, I also highly recommend opening up javascript error handling in your browser of choice. WordPress has assembled a pretty detailed explanation of how to do this depending on your browser. Javascript errors will serve you up a blank page with no clues as to where you went wrong. Tools like these are critical to timely and “not chunking your computer out the window” development.

Now that we have our data in a format that we can pass across, let’s take a look at our PHP proxy. You can think of our proxy as a web service. It is functioning as the go between, allowing the two star crossed domain servers to talk with one another. It is a painfully simple little file (see below). We set the header content type to javascript. For this instance, I’m passing in the file name as a querystring parameter (a) then serving it up to the inquiring server through $_GET[‘callback’].

proxy.php

I mentioned that I changed my data generating routine to produce JSON files instead of XML. In reality, I could have accomplished the same thing through the proxy. If I had replaced the last line with these two instead, it would have waived the magic wand over those XML files until they became JSON:

$a = json_decode(json_encode((array) simplexml_load_string($s)),1);
echo $_GET['callback'] . '(' . json_encode($a) . ');';

Now we get to the meat of our little app — actually putting all of the pieces together by calling the JSON via the proxy with AJAX. I’ve tweaked our original implementation to instead serve up details of metro area 5K races (full code implementation is outlined at the bottom of this section). Looking at the code below after we’ve included our jQuery libraries, we set the city we want to get the JSON file for.

Digging a few lines into the code you’ll discover where we make our call to the PHP proxy file:

type: "GET",
url: "http://yourdomain.com/json/proxy.php?a=" + sCity.replace(/ /g,"-") + "&callback=?",
    dataType: "json",

Notice, we are passing in the city via the querystring so the proxy knows which JSON file to serve up. Since we feasibly could hit cities without races, I included a check to see if we had an empty file before we started to swing through the JSON nodes.

    if (jQuery.isEmptyObject(data)){
      $("
  • ").html("
    No 5K Races are Currently Available.
    ").appendTo("#dvContent ul");
    }

    Once we’ve decided that we have JSON data to process, we call our each method to loop through the JSON elements.

    $.each(data['events'],function(){

    There are a few things to notice once we get within our each loop. I have this line commented out, but it was helpful in testing to see if the JSON data was correctly getting passed across. Since its returning an object, we have to run it through the stringify method to actually see what the data is. Having it pop up in an alert is a handy way to get to this.

    alert(JSON.stringify(data));

    I also have times where I only want to show the top X races so I’ve wrapped the data pull within an if conditional so I can limit the output to the top 5 when needed. For readabilities’ sake, I’ve pulled out the JSON values on each cycle through the loop into their own variable, then I spit them out to the page within div tags which gets prettied up by our stylesheets.

          var sDate = this.date;
      var sCity = this.city;
      var sUrl = this.url;
      sDate = sDate.slice(0, -5); // shortens the date by removing the year

    $("
  • ").html("
    " + sDate + "
    " + sCity + "
    Details
    ").appendTo("#dvContent ul");

    Full AJAX Code File

    Now hopefully I’ve ferreted out all of the errors you might run across, but I thought I might mention a few that I stumbled over just in case you might see the same during your testing.

    Uncaught SyntaxError: Unexpected token o
    In an earlier draft of the code, I was trying to do a JSON.parse within our each method. Since we’d already done this, I could just delete this line of code and go along my merry way.

    unexpected token illegal
    For me, this error was triggered when I pulled in the JSON file as a multi-lined string and assign it to the js variable. That won’t fly so as soon as I took out those line feeds, everything fell into line.

    resource interpreted as script but transferred with mime
    This one went back to our proxy file. When I didn’t have the content type properly set as application/javascript, the program threw this red card at me.

    So I hope people find this helpful. I couldn’t find anyone online who had an example of exactly what I was looking for. I had to piece together code from 40 or so different articles to come to this solution. It isn’t difficult, but it does take a little tinkering with. Once you have the pieces singing in harmony, the implementation is a beautiful thing. Happy coding!