AJAX + Web Services

CS 330: Intro to programming with JavaScript

1

Outline

1. Template Literals
2. Intro to Ajax + Fetch

2

1. Review: Template Literals

• Template literals are strings that allow you to embedded expressions
• They’re convenient for generating larger chunks of HTML from lists of objects
• Uses the “backtick character”

​

​

​

3

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

let name = 'Walter';

console.log( ` Some string.

Can be multiple lines.

Can have expressions ${2 + 2}� ${name} ` );

4

1. Review: Template Literals

• Example 1: Simple
• Example 2: With a For / Of Loop

​

​

​

5

2. Intro to AJAX

AJAX

• AJAX: Stands for Asynchronous JavaScript and XML
• Enables JavaScript to make server requests and (optionally) update the current screen
• Not easy to tell that information is even being transmitted to/from a server
• Came on the scene ~2004 (made popular w/Google Mail and Google Maps)

​

Now Ajax (lowercase) as a generic term for any client-side process which fetches data from a server and updates the DOM dynamically without a full-page refresh.

6

2. Intro to Fetch

JavaScript’s Fetch API

• The Fetch API is a newer instantiation of asynchronous server-client web communication
• Provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set (improving upon AJAX)

​

​

7

Source: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Fetch Example

const url = 'https://www.apitutor.org/youtube/simple/?q=skateboarding+dog+&type=video';

fetch(url)� .then((response) => { � // takes a response stream and reads it to completion� return response.json(); � }) � .then((myJson) => { � // once entire data stream has been retrieved, you can execute� // code that makes use of the data� console.log(myJson); � });

​

​

8

Practice: Download Lecture Files

https://hci330.github.io/winter2020/course-files/lectures/lecture08.zip

9