← QCE Digital Solutions Unit 4

How the front-end and back-end exchange data

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.

Part of: QCE Digital Solutions Unit 4 — Digital Methods for Exchanging Data — Module 127

Understanding How the front-end and back-end exchange data in QCE Digital Solutions Unit 4

What it does: The https:// scheme means the request and response travel over an encrypted connection, so a man-in-the-middle cannot read the data. Even when the front-end has already validated the form, the back-end checks again and returns an error status (400 Bad Request) for invalid data. The front-end is what the user sees. It takes the response data and shows it on screen. REST APIs commonly exchange structured data as JSON or XML so both sub-systems can read it. A response can only exist after a request. The back-end processes the request before it replies. Front-end validation gives quick feedback to users but can be skipped. Validating on both sides keeps the system secure and the data correct.

Common mistakes: 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. 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).

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add How the front-end and back-end exchange data to a class →

This module's key terms are also in a printable crossword (Modules 127–333) and word search (Modules 127–401).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

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

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

Matches

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.

Applying

Meanings

Term

request and response

Meaning

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.

Practice

function backEnd(json) {

Testing

Gaps

response = requests.(url, json=data)

Check Answer

Spots

1import requests

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

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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

The front-end starts the exchange with a request. The back-end processes it and sends a response back.

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

A. The front-end ✓

B. The back-end

The front-end is what the user sees. It takes the response data and shows it on screen.

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

REST APIs commonly exchange structured data as JSON or XML so both sub-systems can read it.

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 ✓

A response can only exist after a request. The back-end processes the request before it replies.

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 ✓

HTTPS uses SSL/TLS to encrypt data in transit, protecting the request and response from man-in-the-middle attacks.

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.

Key Term

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.

Fill in the Blanks

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

Hint: Type the HTTP method name used by the front-end to send new data to the back-end.

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

Hint: Type the protocol name that encrypts the exchange between front-end and back-end.

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

Hint: Type the method that converts the JSON body of the response into Python data.

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

Hint: Type the response attribute that holds the number the back-end returns to show success or failure.

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

Hint: Type the logical operator that makes the back-end reject the data when either condition is true.

Spot the 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"])

Line 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.

Question 2

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

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

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

D print(r.status_code)

Line 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).

Question 3

A fetch("/api/scores")

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

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

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

Line 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).

Question 4

A def handle(req):

B data = req.json

C reply = {"ok": True}

D return reply

Line 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().

Question 5

A def check(age):

B if age < 0 or age > 120:

C return False

D return False

Line 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.

Student with a class code? Join your class →