Client-Server Communication over HTTP

CSCI 338: Software Engineering

Fall 2025

1

Agenda

• Intro to Web Services and Web APIs
• Intro to HTTP
• Interacting with a REST APIs
• Intro to the JavaScript fetch API
• Summary

2

Outline

1. Intro to Web Services and Web APIs
2. Intro to HTTP
3. Interacting with a REST APIs
4. Intro to the JavaScript fetch API
5. Summary

Understanding how to work with Web Services & APIs is so useful!

• Many organizations make their data, storage, and compute services available over the web.
• Understanding how to interact with various web services using the HTTP protocol is perhaps one of the most useful, practical skills that you can learn.
• This isn’t just relevant for web browsers – all modern programming languages have a way to encode, decode, and communicate messages over HTTP.

What is a Web API?

API → “Application Programming Interface”

A set of rules that you have to follow to interact with a piece of software

​

Web API

An API that you access via HTTP protocol. Offers a systematic way to:

1. Create update, read, and delete resources over the internet
2. Expose parts of your database to third party clients
3. Allow a web client (or any client) to take advantage of resources distributed across providers, servers, organizations, etc.

​

REST API

A kind of Web API that honors the “REST” endpoint design conventions

5

Many Organizations Publish their Data via Web APIs

• Companies:
• e.g., Spotify, Yelp, OpenAI, etc.
• Government Organizations:
• e.g., NASA, Asheville Open Data Portal, etc.

Outline

1. Project 1 Feedback
2. Intro to Web Services and Web APIs
3. Intro to HTTP
4. Interacting with Web / REST APIs
5. Intro to the JavaScript fetch API
6. Summary

HTTP: Hypertext Transfer Protocol

Web servers communicate through HTTP – a stateless protocol for encoding, decoding, and transmitting messages over the web.

• Stateless mean that no memory is preserved between requests – each request must contain all the information needed on its own to fulfill the request (no stored context).
• HTTP requests and responses have a header (which contains metadata about the request) and a body (which contains the request itself)
• HTTP requests also have methods (GET, POST, PATCH, PUT, DELETE, etc.) – next slide.
• HTTP responses have status codes that tell you whether the request was successful or not.

8

HTTP Methods

Methods tell the server what action they should take (verbs):

9

HTTP Status Codes

Status codes provide information re: whether your request was successful. Here is a list of them. Ones you should be familiar with:

Outline

1. Intro to Web Services and Web APIs
2. Intro to HTTP
3. Interacting with Web / REST APIs
4. Intro to the JavaScript fetch API
5. Summary

Interacting with a Web / REST API: Clients

You can access a REST API via many different clients (including):

1. Through your browser
2. Through Java, C, C++, Python, or any other language
1. In other words, servers talk to other servers via HTTP/S requests
3. cURL or wget (command line tools)
4. Postman
5. And more!

13

PostgreSQL

FastAPI (python service) +�SQLAlchemy �Listening on port 80 / 443

Public Address, Allows Connections From Anywhere

VIEW

MODEL + CONTROLLER

DATABASE

Demo �class-exercises-fall2025/fastapi_demo

14

Sync Fork, Pull Down, Make a new Branch

• Sync fork to pull latest changes
• If applicable: stage and commit your current work on your current branch
• Checkout main
• pull
• Create a new branch called fastapi-exercise-b
• Open the fastapi_demo folder in your code editor

15

Exercises: Python Client

1. On your command line, navigate to fastapi_demo/ui/samples
2. Let’s start with python:
• cd into samples_python
• Run poetry install
• Open 01_create.py
• Change the root url to my server (instead of localhost):�https://bc990ec75ec0.ngrok-free.app/docs
• Run the script: poetry run python 01_create.py
• What happened?

16

Exercises: cURL

• On your command line, navigate to fastapi_demo/ui/samples
• Let’s start with python:
• cd into samples_bash
• Open 01_create.sh
• Change the root url to my server (instead of localhost):�____________________________
• Run the script: bash 01_create.sh
• What happened?

17

Exercises: JavaScript Client

• On your command line, navigate to fastapi_demo/ui/samples
• Let’s start with python:
• cd into samples_javascript
• Open 01_create.js
• Change the root url to my server (instead of localhost):�____________________________
• Run the script: node 01_create.js
• What happened?

18

Outline

1. Intro to Web Services and Web APIs
2. Intro to HTTP
3. Interacting with a REST APIs
4. Intro to the JavaScript fetch API
5. Summary

Intro to Fetch

JavaScript’s Fetch API

• The Fetch API is a newer API for browsers to communicate asynchronously with servers communication (improving upon AJAX – the older way)
• Because this API allows for asynchronous, non-blocking communication with servers, promises were introduced to the JavaScript Language.
• Promises are objects that help programmers manage asynchronous communications.

​

21

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

What is a Promise?

1. Promises exist to handle asynchronous functionality
2. If you request a resource the cloud (i.e., someone else’s computer that lives somewhere else), you don’t know how long it’s going to take to process the request.
1. Slow machine?
2. Network traffic?
3. Patchy WIFI!
3. To handle this, a “promise” allows you to execute a piece of functionality only after the request completes.
• It’s like putting a process on the “back burner” until it completes…and in the meantime your browser is free to do other things.
• Uses the async / await keyword pairs.

Most requests happen in 2 Parts (w/2 Promises)

async function getData () {

const response = await fetch(url);

const data = await response.json();

}

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

• fetch() returns a promise containing the response (a Response object). This is just an HTTP response, not the actual content.
• To extract the body content from the response, we use one of the response’s content methods – in this case the json() method – which also returns a promise with the actual data.

Outline

1. Intro to Web Services and Web APIs
2. Intro to HTTP
3. Interacting with a REST APIs
4. Intro to the JavaScript fetch API
5. Summary

Summary (1 of 2)

1. Web services / REST APIs allow an organization to make their data, storage, and computing services available over the web via a web server.
1. You interact with them via HTTP requests that specify actions via methods (GET=read, POST=create, PATCH=update, PUT=replace, DELETE=delete, etc.)
2. You often need to authenticate with them by including an API key in the header of the HTTP request.
3. Every web service is different – you need to read the provider’s documentation to understand how to use their service.
4. Lots of different clients can make HTTP requests (e.g., web browser, most programming languages, PostMan, the command line, etc.)

Summary (2 of 2)

2. You can interacting with a Web service in most modern programming languages
3. In JavaScript, you can interact with a server by using the browser’s fetch API and promises.
1. The fetch API allows you to issue HTTP requests
2. Promises allow you to be able to handle asynchronous requests
3. The async / await keywords allow you to create functions that can pause code execution until the promise resolves.

Activity: Integration with React

27

React + Data

Set-up:

1. Navigate into fastapi_demo/ui
2. Install the dependencies: npm install
3. Start the bundler / hot reloading service: npm run dev
4. Navigate to http://localhost:5173/

Check out the ui/src directory and take a look at the components

1. Import the Todos component into App and invoke it (by adding a <Todos /> tag).

28