AJAX-based navigation program

I want to create a program that displays a list of dinosaurs. Basically the home screen will show the user that they are on the home screen and give them the selection to display dinosaur information using JSON or XML. For example, the json button would display this.

[{"name":"Staurikosaurus","group":"Saurischia","diet":"Carnivore","period":"Triassic"},   
{"name":"Diplodocus","group":"Saurischia","diet":"Herbivore","period":"Jurassic"},
{"name":"Stegosaurus","group":"Ornithischia","diet":"Herbivore","period":"Jurassic"},
{"name":"Tyrannosaurus","group":"Saurischia","diet":"Carnivore","period":"Cretaceous"}]

And the XML button would display this.

Staurikosaurus Saurischia Carnivore Triassic Diplodocus Saurischia Herbivore Jurassic 
Stegosaurus Ornithischia Herbivore Jurassic Tyrannosaurus Saurischia Carnivore Cretaceous

I was given an API that I could use, but I still don't even know where to start. If you guys know a good website that would explain to me how to do this, or you guys can give me something to get me started I would greatly appreciate it. Is this all done in one file? Ive never worked with AJAX so I'm confused on what to do. Here is the API that I was given.

[Overview]

webService.php provides two types of content: home content (introducing the app's purpose) and   
dinosaur data (packaged as XML and JSON).


[Home Content]

webService.php?content=home

Returns a plain text message explaining the app's purpose.


[Dinosaur Data]

webService.php?content=data

Prompts the user agent for a formatting preference.


[XML Data]

webService.php?content=data&format=xml

Returns dinosaur information encoded as XML

[JSON Data]

webService.php?content=data&format=json

Returns dinosaur information encoded as JSON