If you're using AJAX with a form and you want to pass a JSON object to one of the jQuery's AJAX methods used to process the request, you will probably wonder how this could be done. Basically, you should convert your form values to a plain array, loop through all the items in the array and finally return a plain object literal. Let's see the details.
Converting RSS to JSON requires only a sufficient knowledge of the json_encode() function and one of the XML libraries and extensions that come shipped together with PHP. In this post I'll show you a basic routine to convert an RSS feed to a JSON file using the PHP's DOM extension.
The $.getJSON() method of jQuery provides an easy way to retrieve a JSON resource to be used in your documents. Unfortunately, this method doesn't provide an option to test whether the returned data has been fetched normally and is ready to be used. Instead of using $.ajax() as an alternative, you can enhance this method with a simple check on data to verify the correct parsing of the resource. Let's see how to implement this enhancement.
The following video shows how to create and implement your own public API using JSON as the default data exchange format. The core of your API will be made up by PHP. This is a really useful tutorial.
In this post I'm going to show you how to create an image slideshow where all the images are fetched via AJAX. To accomplish this, we'll create a PHP script that loops through all the images of a directory, stores them into an array, sorts this array by date and finally returns a JSON object. If you're not accustomed to PHP programming, don't worry: it's sufficient to say that the main work is done by the json_encode() function combined with the appropriate HTTP header (here set to application/json) and that the PHP script must be put in the same directory of your images. Said that, here's the core of our slideshow:
XML is a descriptive markup language. What's more, XML is able to provide detailed descriptions of complex data structures. Many developers think that JSON is enough for them, but they're wrong. JSON is useful when you have to describe simple data structures, because JSON is not extensible. For such reason, JSON turns out to be perfect when the resource you're describing doesn't change much over time. But for dynamic structure, the extensibility of XML plays a major role. For example, JSON is excellent for a resource such as an RSS feed. This kind of resource has a predefined set of elements and attributes which is always the same on the entire web. On the contrary, JSON is inadequate when it comes to describe a complex framework or application.
This video is a very detailed introduction to the use of JSON and XML with the Facebook API using PHP as development language. It's very useful if you want to have an overall idea about how the entire structure of the Facebook API works with JSON and XML.
Check out this SlideShare Presentation:
Interesting video tutorial.
Check out this SlideShare Presentation:
Parsing a JSON Flickr feed with jQuery is not so simple as it could seem, because this requires a firm knowledge of two factors: the feed URL and the correct syntax to use with the jQuery's getJSON() method. First the URL, that must be in this form:
http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?
where id is your Flickr ID and lang is your preferred language. However, the key parameter is jsoncallback.
Without this, your script will fail and it'll return null. Second, the syntax of the jQuery's method:
$.getJSON(url, function(data){});
where data is a reference to your JSON object. Now, let's test something:
$(document).ready(function() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=31968388@N02&lang=it-it&format=json&jsoncallback=?',
function(data) {
var ul = $('<ul></ul>');
var html = '';
$.each(data.items, function(i,item) {
html += '<li><h3>' + item.title + '</h3><p><a href="'+item.link+ '"><img src="'+item.media.m+ '"/></a></p></li>';
});
ul.html(html);
$(ul).appendTo('body');
});
});
You can see the result here. As you can see, preliminary requirements are more difficult to understand than the actual implementation.
Interesting tutorial.