gaand/jquery-ajax-get

jQuery AJAX GET

Prerequisites

• http-study
• json-study

Objectives

Make HTTP requests using curl, the browser address bar, and AJAX for:

• A resource collection.
• A specific resource.

Use response data in future requests

Preparation

Set up the client:

1. Fork and clone this repository.
2. Create and checkout a new branch (training).
3. Install dependencies with npm install.

We'll make requests of and receive responses from an HTTP server we'll set up together:

1. Open a new terminal (window or tab).
2. Change into ~/wdi/tmp.
3. Fork and clone library-api.
4. Change into the new directory.
5. Install dependencies with bundle install.
6. Add secrets to config/secrets.yml.
7. Create a database with rake db:create.
8. Create a database schema with rake db:migrate
9. Add data to the database with rake db:seed db:example
10. Run the HTTP server with rails server.

We're now ready to make requests.

Retrieving data from an API

AJAX

What's in a name?

AJAX at MDN.

The jQuery.ajax() interface.

Components of HTTP

1. URL structure
2. Request verbs
3. HTTP request and response

Connecting to the library-api

GET /books

Retrieve a list of books from the API

Browser book collection demonstration

Entering http://localhost:3000/books into the chrome address bar.

Browser book collection code along

If not already installed in chrome, let's add a JSON formatting utility.

Curl book collection demonstration

curl is a command line utility for making http requests. We'll use curl to retrieve the book collection.

Curl book collection code along

Let's write that curl command into a script.

AJAX book collection code along

We'll take a stepped approach:

1. Add a form to index.html.
2. Add a submit input to the form.
3. Add a submit handler to the form in the document ready event in assets/scripts/index.js.
4. Add a collection success and fail handler to assets/scripts/ui.js.
5. Add a book collection retrieval method to assets/scripts/library-api.js.
6. Invoke the collection retrieval method from the submit handler passing the success and fail callbacks.

GET /books/:id

Retrieve a book from the API

Browser single book demonstration

Entering http://localhost:3000/books/1 into the chrome address bar.

Browser single book code along

Entering http://localhost:3000/books/<integer> into the chrome address bar.

Curl single book demonstration

We'll use curl to retrieve the one book at a time.

Curl single book code along

Let's write that curl command into a script.

AJAX single book code along

Again, we'll take a stepped approach:

1. Add a text input for a book id to the form in index.html.
2. Retrieve the value of the id, if any, in the submit handler.
3. Branch on that value in the submit handler.
4. Add a single book success and fail handler to assets/scripts/ui.js.
5. Add a single book retrieval method to assets/scripts/library-api.js.
6. Invoke the single book retrieval method from the submit handler passing the success and fail callbacks.

The "A" in AJAX

The A in AJAX stands for asynchronous. Let's explore some implications of asynchronous behavior.

License

Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.