How the front-end and back-end exchange data

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which describes how the front-end and back-end exchange data?

A The front-end sends a request and the back-end returns a response

B The back-end sends a request and the front-end processes the database

2. Which sub-system displays the response to the user?

A The front-end

B The back-end

3. A front-end sends a booking to a REST API. Which format could the data be sent in?

A JSON or XML

B Only plaintext passwords

4. Which is the correct order of the request and response cycle?

A Response returned, request sent, front-end processes it, back-end displays it

B Request sent, back-end processes it, response returned, front-end displays it

5. What does HTTPS do to the data exchanged between front-end and back-end?

A Compresses it so it can never be changed

B Encrypts it so an interceptor cannot read it

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1requests.post(url, json=order)		AThe front-end sends a request carrying JSON data to the back-end API
2response.json()		Bhttps://shop.example.com/api/orders
3Encrypting the exchange so an interceptor cannot read the request or response		CThe back-end must also validate, because requests can bypass the front-end or be altered in transit.
4The back-end validates incoming data and refuses a bad request with an error response		Dif quantity <= 0: return 400
5The back-end reads the form and decides what the front-end page looks like		EThe back-end processes the request and returns data in a response. The front-end is responsible for displaying it to the user.
6Validate in the front-end only, so the back-end can trust every request		FReads the back-end's JSON response so the front-end can display it

Definitions

request and response

Fill in the Blanks

Complete each line of code by filling in the missing parts.

response = requests.____(url, json=data)

url = "_____://shop.example.com/api/items"

response = requests.get(url) items = response.____()

if response.___________ == 200: print("Request worked")

if age < 0 __ age > 120: return "Invalid age", 400

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A import requests

B url = "http://shop.com/api"

C r = requests.get(url)

D data = r.json()

E print(data["name"])

Question 2

A d = {"user": "Ava"}

B url = "https://x.com/login"

C r = requests.get(url, json=d)

D print(r.status_code)

Question 3

A fetch("/api/scores")

B .then(r => r.json())

C .then(d => show(d.json()))

D .catch(e => alert(e))

Question 4

A def handle(req):

B data = req.json

C reply = {"ok": True}

D return reply

Question 5

A def check(age):

B if age < 0 or age > 120:

C return False

D return False

Answer Key

How the front-end and back-end exchange data

Section A: Quick Questions

A — The front-end sends a request and the back-end returns a response

A — The front-end

A — JSON or XML

B — Request sent, back-end processes it, response returned, front-end displays it

B — Encrypts it so an interceptor cannot read it

Section B: Match the Pairs

requests.post(url, json=order) → The front-end sends a request carrying JSON data to the back-end API

response.json() → Reads the back-end's JSON response so the front-end can display it

Encrypting the exchange so an interceptor cannot read the request or response → https://shop.example.com/api/orders

The back-end validates incoming data and refuses a bad request with an error response → if quantity <= 0: return 400

The back-end reads the form and decides what the front-end page looks like → The back-end processes the request and returns data in a response. The front-end is responsible for displaying it to the user.

Validate in the front-end only, so the back-end can trust every request → The back-end must also validate, because requests can bypass the front-end or be altered in transit.

Section C: Definitions

request and response — The front-end sends a request (often to a REST API) with JSON or XML data; the back-end processes it and returns a response that the front-end displays.

Section D: Fill in the Blanks

response = requests.post(url, json=data)

url = "https://shop.example.com/api/items"

response = requests.get(url)
items = response.json()

if response.status_code == 200:
    print("Request worked")

if age < 0 or age > 120:
    return "Invalid age", 400

Section E: Spot the Error

B — The URL uses http, so the exchange between front-end and back-end is not encrypted. It should be https:// so the request and response are protected in transit.

C — Sending JSON data to the back-end to be processed needs a POST request. GET is for retrieving data, so it should be requests.post(url, json=d).

C — The previous .then() already parsed the response with r.json(), so d is a usable object. Calling d.json() again causes an error. It should be show(d).

B — json is a method, so it needs brackets to run. Without them, data holds the method itself instead of the JSON sent by the front-end. It should be req.json().

D — The back-end validation function returns False for every age, so valid data is always rejected. After the invalid check fails, the last line should return True.