Ajax & APIs

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

• Describe APIs and how to make calls and consume API data.
• Intro to AJAX.
• Access public APIs and get information back.
• Implement an Ajax request with Fetch.
• Create an Ajax request using jQuery.

Agenda

• Homework Review
• Web Services
• APIs
• HTTP Refresher
• Understanding Rest APIs
• AJAX

Homework Review

Classroom Resources

Ajax & APIS

• APIs: (Application Programming Interfaces) are used to provide functionality from a server in a specific manner using a simplified syntax.
• Web Services allow two or more applications built on various programming languages to communicate with each other via the World Wide Web.
• HTTP (HyperText Transfer Protocol) is the protocol (set of rules) used by the World Wide Web. It defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.

Web Services

Web Services

A Web Service is a resource that’s made available over the internet.

• Allows us to get data from external servers that we can incorporate into our web site or app.
• Web services require a network.

Web Services

Web Services

• Your app can incorporate data from the response from the Web Service.

Open Web Services Examples

Web Services may be written in a variety of languages. They expose data via their APIs and communicate via the same protocols used for the World Wide Web.

APIs

API

An API is the code that governs the access point(s) for the server.

Web Service API

Web Service API

Endpoints

Storing Data

• When data is persisted, it is stored so that it can be accessed even after a program has completed. Usually, we mean storing the data in a database.
• In computer programming, create, read, update, and delete (CRUD) are the four basic functions of persistent storage.

What we need to know to use an API

An API might require authentication

API Key

• Non-guessable character string generated by a cryptography algorithm.

API Request with authorisation

Keep your API credentials private

• Don’t post to a public code repo.
• Don't share with other developers outside of your organisation.
• Don't leave you API key in a code comment!

Your app might experience a delayed response

Your request may result in an error

HTTP

HTTP (hypertext transfer protocol)

• System of rules for how web pages are transmitted between computers.
• Defines the format of messages passed between HTTP clients and HTTP servers.

HTTP (hypertext transfer protocol)

• Client sends a request to the server.
• Server sends a response back to a client.

Anatomy of a URL

HTTP Request and Response

HTTP (hypertext transfer protocol)

HTTP Request Structure

HTTP Response Structure

HTTP Status Codes

Understanding REST APIs

RESTful APIs

7 Restful Routes

7 Restful Routes

7 Restful Routes

Ajax

AJAX

AJAX

• AJAX is a method of building interactive applications for the Web that processes user requests immediately, without re-rendering a whole page.

AJAX - Advantages 😀

AJAX - Disadvantages 🙁

Vanilla JavaScript Ajax

FETCH = Ajax request in vanilla JavaScript

fetch(url)
    .then((response) => {
	  if (!response.ok) throw Error(response.statusText);
	  return response.json();
    })
    .then((responseData) => {
	  const data = JSON.stringify(responseData);
	  // do something with the data
    });
							

jQuery Ajax

jQuery AJAX Method

Learning Objectives - Review

• Describe APIs and how to make calls and consume API data.
• Understand API calls.
• Consuming and working with API data.
• Intro to AJAX.
• Access public APIs and get information back.
• Implement an Ajax request with Fetch.
• Create an Ajax request using jQuery.

Look Ahead to Next Lesson

• Describe what asynchronous means in relation to JavaScript
• Pass functions as arguments to functions that expect them.
• Write functions that take other functions as arguments.
• Build asynchronous program flow using Fetch