Web Design II

Lecture 9: AJAX, JSON, and APIs

This week will be discussing AJAX (Asynchronous JavaScript and XML) and the data format JSON (JavaScript Object Notation) to load data into our webpage without reloading the entire page. We will also talk about APIs (application programming interfaces) allow your website to interact with other third party databases like Facebook, Twitter and Instagram to pull in live data and present it on your own website. Today we will look at how to use a commonly available API. We will also be taking a deeper look at "Timing your events" and related scoping and DOM issues. These are concepts we have touched on before but become more prevalent and necessary to understand as you use jQuery and AJAX technologies.

In Class Assignment

Write a JSON dataset, that includes at least one nested element. Using alert and console, call name/value pairs within your JSON dataset.

Home Work

This week find an API and connect to it. Have the API write to the console and determine the correct path for accessing the data you wish to use. Then write this data element to html page.


Here is the lecture for this week

Here is example code from this week's lecture (I have commented the code to further illustrate the concepts and ideas discussed):

Suggested Reading

  • Chapter 8 in "Javascript and JQuery"

Here are some various resources to support the concepts covered in this week's lecture:

If our artists are not versed in technology, who will imagine what we can become, who will ask what we should not be?