Exercise 3 - AJAX

XML

This is my XML example. When you click the button, it loads the XML document, looks for each element and constructs a sentence from the Name, Date and Time of each one. I have used jQuery just to make the code a bit shorter and commented the code to make it more human-readable.

I think this is a good example because it is simple but clearly shows XML data being dynamically loaded into a page.

View XML: Link to the XML file
View Code: Link to the Javascript

JSON

This is my JSON example. I have some CSS that aligns divs above eachother inside a main div. All it needs is the Div making, the colour choosing and telling how far from the top it should be. So in the JSON file, it has an ID for each layer of my burger and a colour. A simple iterator then works out how far from the top each layer should be. The Javascript loads in the JSON file, Creates a div, assigns the attributes and then repeats until there is no more data. I used an Image colour picker to match the colours of Burger King's WiFi symbol.

I like this example as it has a nice design, is quite simple and makes something fun. The burger is just data and boxes but it looks pretty cool at the end of it all.

View JSON: Link to the JSON file
View Code: Link to the Javascript

JSONP

Unfortunately, the remote site no longer exists so this example does not work.

This example loads in some coordinates and a fill colour from a JSONP file on antoher domain. The Javascript creates a canvas element, Loads in the data and draws a rectangle based on the data.

I feel this is a good example as, not only does it work, but it shows that data can interact with Canvas.

View JSONP: Link to the JSONP file
View Code: Link to the Javascript

References

Snippets of code from other websites have been linked to in code comments.

  1. Burger King Restaurants Launch Whopper Wi-Fi | AT&T (no date). Available at: http://about.att.com/story/burger_king_restaurants_launch_whopper_wifi.html (Accessed: 24 March 2015).
  2. doginabathtub, bhrossman, Tryxster, RedSquaree, UltimateOreo, heavyfuel, AutoModerator, Jobeanie123, malkovichjohn, TheOneInTheHat, skepticalDragon, Ghost_Shadow, ksaxton92, Phoenixfight, Kinkzoz, ryzellon, kbean826, deterredhumbrubric, zenCbot, JillH1995 and Quiwundi (no date) Burger King’s WiFi symbol is a burger • /r/mildlyinteresting. reddit. Available at: http://www.reddit.com/r/mildlyinteresting/comments/2tgc5a/burger_kings_wifi_symbol_is_a_burger/ (Accessed: 24 March 2015).
  3. mkyong (no date) How to access JSON object in JavaScript. Available at: http://www.mkyong.com/javascript/how-to-access-json-object-in-javascript/ (Accessed: 24 March 2015).
  4. Way, J. (no date) ‘Quick Tip: Use jQuery to Retrieve Data From an XML File - Tuts+ Code Tutorial’. Code Tuts+. Available at: http://code.tutsplus.com/tutorials/quick-tip-use-jquery-to-retrieve-data-from-an-xml-file--net-390 (Accessed: 24 March 2015).
  5. (no date a). HTML Image Color Picker. Available at: http://imagecolorpicker.com/ (Accessed: 24 March 2015).
  6. (no date b). Available at: https://css-tricks.com/absolute-positioning-inside-relative-positioning/ (Accessed: 24 March 2015).