Getting Data From a Server
As mentioned in the earlier sidebar, “Getting Your Data,” Ajax limits from where you can read data. After all, you don’t want everyone in the world reading any file you have, right? But there are some cases where a company may want people to read files and then be able to create their own content on their own sites. For instance, Flickr (as seen in the previous examples) lets your server get their XML files and what you do next is only up to your imagination.
But sometimes you don’t have that kind of access to a server—so Flickr has made files available in another format: JavaScript Object Notation, known as JSON (pronounced like the name Jason). The neat trick here is in the HTML file, Script 13.10; the JavaScript file (Script 13.11) just takes advantage of it.
To read and parse server data:
1. | <script type="text/javascript" src="http://api.flickr.com/services/feeds/photoset.gne?nsid=23922109@N00&set=72157600976524175 &format=json"></script> Remember how we said earlier that a script can only read files from the same server on which it resides? That’s still true—but there’s nothing that says that you can’t call a script file that itself is on another server. In this case, the script is on the api.flickr.com machine, and therefore, it can read in data from that server. Script 13.10. The trick to your JavaScript is adding the remote script tag to this HTML page.
Script 13.11. Our JavaScript file can be short because most of the work is being done by the remote server.
| ||
2. | document.getElementById("pictureBar").innerHTML = imgDiv;Back over in the JavaScript file, this single line of code puts all the images onto the page when it loads, as seen in Figure 13.5. Figure 13.5. Not only do the images come from Flickr’s servers, but so does the data used to create the page.
| ||
3. | function jsonFlickrFeed(flickrData) {By now, you’re surely wondering where all the code is that sets up the images, and here’s the other part of the slick functionality: it’s mostly in the data file itself (Script 13.12). What JSON gets you is a data file that contains code that JavaScript recognizes. In this case, the data file says that it’s expecting to find a function named jsonFlickrFeed(), so here we’ve created one. Whatever name we give the parameter coming in is where the data itself is stored. | ||
4. | for (var i=0; i<flickrData.items.length; i++) {
imgDiv += "<img src='";
imgDiv += flickrData.items[i].media.m.replace(/_m/g,"_s");
imgDiv += "' alt='" + flickrData.items[i].title + "' />";
}Because we have the data in a format that JavaScript already understands, we don’t have much work to do. Here, we loop through all the images in the items array, building one large text string that will (in step 2, above) be displayed on the screen. Each element in items has a variety of information about an image, but all we want is the URL, which is stored in media.m. And once again, a little bit of regular expression magic turns our medium-sized image into a thumbnail. |
Script 13.12. An excerpt of the JSON file—note that it’s about half the size of the XML file, while including all the same data.
jsonFlickrFeed({
"title": "Content from Paradise Ridge Sculpture Grove",
"link": "http://www.flickr.com/photos/dorismith/sets/72157600976524175",
"description": "The <a href="http://www.paradiseridgewinery.com/">Paradise Ridge Winery</a> not only has great wines, but they also have a sculpture garden. We visited on 22 July 2007.",
"modified": "2007-07-24T05:19:08Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "IMG_0045.JPG",
"link": "http://www.flickr.com/photos/dorismith/882590644/in/set-72157600976524175/",
"media": {"m":"http://farm2.static.flickr.com/1063/882590644_5a4a0d89f3_m.jpg"},
"date_taken": "2007-07-22T13:42:49-08:00",
"description": "<p><a href="http://www.flickr.com/people/dorismith/">Dori Smith</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/dorismith/882590644/" title="IMG_0045.JPG"><img src="http://farm2.static.flickr.com/1063/882590644_5a4a0d89f3_m.jpg" width="240" height="180" alt="IMG_0045.JPG" /></a></p> ",
"published": "2007-07-24T05:19:08Z",
"author": "[email protected] (Dori Smith)",
"author_id": "23922109@N00",
"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures"
},
{
"title": "IMG_0032.JPG",
"link": "http://www.flickr.com/photos/dorismith/882568164/in/set-72157600976524175/",
"media": {"m":"http://farm2.static.flickr.com/1335/882568164_72eee9b41f_m.jpg"},
"date_taken": "2007-07-22T13:35:09-08:00",
"description": "<p><a href="http://www.flickr.com/people/dorismith/">Dori Smith</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/dorismith/882568164/"title="IMG_0032.JPG"><img src="http://farm2.static.flickr.com/1335/882568164_72eee9b41f_m.jpg" width="240" height="180"alt="IMG_0032.JPG" /></a></p> ",
"published": "2007-07-24T05:15:14Z",
"author": "[email protected] (Dori Smith)",
"author_id": "23922109@N00",
"tags": "winery sonomacounty sculptures dorismith paradiseridge paradiseridgesculptures"
}
]
}) |
✓ Tips
If you’re wondering why JSON sounds slightly familiar, we introduced it when covering Object Literals in Chapter 11. The JSON format itself is a subset of the object literal. And if JSON doesn’t sound familiar, you might want to go back and review that section to learn more.
You won’t always use exactly the URL that’s in step one; in fact, if you do, you’ll just get the same results shown on this page. Flickr allows you to put in many combinations of tags, sets, and groups so that you’ll get personalized results. Go to Flickr, find the Web page that matches what you want in your images file, and find the feed directions on that page. Once you’ve got that, just add &format=json to the end of the URL, and you should be set.