AJAX allows you to retrieve data to use in your frontend code, whether it's coming from your own server, or some other service around the world. The places we retrieve data from are called APIs, which provide data in some machine-readable format. The most popular machine-readable format these days is JSON (which stands for "JavaScript Object Notation"), though there are other formats like XML. This basically means that the data will come back looking like some combination of JavaScript Objects, Arrays, Strings, etc.
The browser has built-in ways to do AJAX (XMLHttpRequest, more recently fetch()), but for simplicity, we will just use jQuery, which normalizes the behavior between browsers. While AJAX can be used to send or receive data, we will just worry about the latter for now (via $.get(), and maybe $.ajax()).
- See: The simple JSON demo
- Read: jQuery's AJAX tutorial
- See: The Instagram API demo
- See: The JSONP demo (live demo)
- Do: The Mashup project, to get practice
You may have heard of "RESTful APIs" before, which (loosely) means that the URLs (a.k.a. endpoints) and HTTP methods they support have a semantic meaning about the data that is being transferred, and the action that's being performed. For example, GET /articles should return a list of articles. POST /articles should create a new article. POST /stuff, which could create articles or users, or retrieve comments, would not be a good example of RESTful API design.