Web Application Development
INF3048 – S6
HTTP and RESTful Communication between
Web Clients and Servers
Jacques Robin and Camilo Correa © 2023-2024
Outline
The request-response communication pattern between a web
front-end client and a web back-end server
The HyperText Transfer Protocol (HTTP)
The REpresentational State Transfer (REST)
REST(ful) API
The Fetch browser API to request resource from a web client
to a web server
json-server: a simple tool to fake a REST API
postman: a simple tool to fake a REST API client and debug
the REST API server
The Request-Response Pattern
All front-end back-end communications are initiated from the front-end
(a.k.a., pull only)
The front-end sends a request object for a resource available from the
back-end
The server answers to the request by sending a response object which
payload contains the requested resource
The Request-Response Pattern
The requested resource can be anything:
A server-side generated (a.k.a., prerendered) HTML page
A CSS style sheet
A JavaScript module
JSON data
A static media file (image, audio, video)
The code of a 2D or 3D graphic or animation to be executed by the
front-end, etc.
It can be:
Persistently stored in the back-end, or
Dynamically generated by the back-end from other resources accessible
to the server
The Request-Response Pattern
Figure source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
The HyperText Transfer Protocol (HTTP)
An application layer protocol
Basic version is simple
But extensible through headers
Using HTTP, the interaction
between:
The browser (or more generally user
agents) where the frontend of a web
app is running, and
The web server
(software and hardware), where the
backend of the web app is running Figure source:
Can be mediated by multiple intervining https://developer.mozilla.org/en-US/docs/Web/HTTP/Ov
erview
machines and software called web
proxies
That perform functions like:
Content caching to improve content load speed
Load balancing
Authentication
Content filtering (for security, parental control, etc.)
Logging
etc.
HTTP Messages
Reminder: URL structure
Reminder: URL Examples
HTTP Messages
HTTP Methods (a.k.a. verbs)
GET to fetch a resource at a given URL
The response to a GET request contains the resource in its body property
POST to create a new resources at a given URL
The body of a POST request contains the resource to create on the server
at the given URL
The resource has been typically created by the user filling an HTML form
The default MIME type of the body is:
application/x-www-form-urlencoded
It can be more legibly separated by using the alternative
multipart/form-data MIME type
Examples:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST#example
The choice between the two can be indicated in:
The enctype attribute of a <form> element
The formenctype attribute of an <input> or <button> element
HTTP Methods
PUT to either:
Update an existing resources with a new value at the given URL, or
Create a new resources if there was non on the server at the given URL
The response to a creation PUT is 201 (Created)
The response to a update PUT is 200 (OK)
Example:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PU
T#example
PUT differs from POST by being idempotent:
After successive PUT requests sent with the same URL and payload the
server is in the same state than after a single such request
After successive POST requests sent with the same URL and payload,
creates multiple copies of the resource on the server
HTTP Methods
DELETE to delete a resource from a given URL
HEAD to prefetch only the headers that would come with a
GET request at a given URL
Useful for GET request conditional upon the header content
GET, DELETE and HEAD are idempotent
REpresentational Stateless Transfer (REST)
Scientifically:
Architecture pattern from Roy Fielding’s 2000 PhD thesis
Independent of the web
Specialization of client-server pattern
Maximize decoupling between client and server to allow a wide
heterogeneity of different clients to use the same service
Request-Response client-server interaction
Request content by name independently of type and underlying
implementation
Response is a textual representation of the resource
Stateless: client state not stored on server but sent by client in each
request needing it to be properly processed by the server
REpresentational Stateless Transfer (REST)
Vernacularly for web development:
Communication protocol is HTTP
Requested content name is a URL
Textual response representation uses a mark-up language
HTML, JSON, YAML, XML, etc.
HTTP verbs are loosely matched to CRUD DB operations for requests that
are direct DB access with no mediating calls to complex business logic
functions:
POST → Create resource (not idempotent)
GET → Read resource
PUT→ Update resource
DELETE → Delete resource
Upsert DB operation and resource nesting (e.g., collections of items structured as
attribute sets) make the difference between Create and Update not very crisp
Hence, usage of POST vs. PUT in RESTful API is rarely strictly followed
Resource structural nesting can be reflected by URL route nesting
With PUT item id must be sent by the client
While with POST it can be created by the server and returned in the response
Session information in URL and cookies are not strictly RESTful
HTTP Status Codes
https://www.restapitutorial.com/httpstatuscodes.html
The Fetch API of web browsers
Built-in API of web browsers to communicate with a remote
web service over the network using HTTP requests and
responses
Asynchronous since based on JavaScript promises
The fetch() window method takes as argument either:
Just the URL of a web resource in case of a simple GET request
Since GET is the default HTTP method when none is specified
or both URL and an HTTP request object, which can be constructed
using new and specifies the HTTP method and many other optional
properties
or just a request object which must then include the resource URL as a
property
Since a URL can be a local file path, fetch can be used to retrieve and
update data locally
In such case, the promise returned always resolves with a response since
no network is involved and hence no network error can occur
The Fetch API of web browsers
A call to fetch() returns a promise which:
Resolves into another promise which resolves into an HTTP Response
object which includes the resource fetched by the method at that URL
The json() method of the response object returns the response body in
textual form
Rejects into a network error if one occurs
To be safe, fetch calls should thus appear into:
A try-catch structure with async-await
or a raw promise then-catch structure without async-await
fetching a resource at a non-existing URL does not rejects the returned
promise, but resolves it with a response with a status property such as
404 Not Found
Example of simplest fetch(url) call
const getTodos = async () => {
const response = await fetch('todos/luigi.json')
const data = await response.json()
return data
}
getTodos()
.then(data => console.log('resolved:', data))
.catch(err => console.log('rejected:', err.message))
Source: the Net Ninja YouTube channel: Asychronous JS #11
Example of fetch(url, request) call
async function putData(url = "", data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: "PUT", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
putData("https://example.com/answer", { answer: 42 }).then((data) => {
console.log(data); // JSON data parsed by `data.json()` call
JSON Server
NPM package that makes data formatted as JSON files
locally stored on one's computer folder
to be accessible through REST requests
from the front-end side of a web application
It wraps the JSON files containing the data with a local
development web server and a REST API endpoint
allowing testing the REST requests made from the front-end
of a web application
before or independently from the back-end development
JSON Server: installation and
data structure convention
To install it: npm install -g json-server
To simulate a database, structure your JSON files with:
Each top-level key corresponding to a table name in a relational
database or a collection name in a document database
Each top-level value being an array of nested JSON objects, each one
representing a record (a.k.a, row) in a relational database table or a
document in a document database collection
Each such nested JSON object must have a special "id" property that
uniquely identifies it
JSON server: example JSON file following
conventional structure
{
"posts": [
{
"id": 1,
"likes": 30,
"title": "Welcome to the new blog",
"body": "Hello world"
},
{
"id": 2,
"likes": 15,
"title": "How to be a Net Ninja",
"body": "Hi word!"
},
{
"title": "New Quasabase course coming soon!",
"body": "Hello Quasabase!",
"likes": 20,
"id": 3
},
{
"title": "Mario Kart Live review",
"body": "Hello Mario!",
"likes": 69,
"id": 4
}
],
"polls": [
{
"id": 1,
"question": "Do you prefer Vue or React?",
"answerA": "Vue",
"answerB": "React"
}
]
}
JSON server: listening to HTTP requests
In root project folder, running:
json-server --watch <JSON File Path>
makes json-server responds to requests at URL:
http://localhost:3000/<Top Level JSON File Key>
To fetch a specific collection in the file just do:
fetch(http://localhost:3000/<Top Level JSON File Key> + id)
For a POST request of a JSON object without an id property,
json-server adds a new id property automatically to the record
being posted, as a remote web server would do
JSON Server: sorting GET request example
const container = document.querySelector('.blogs')
const renderPosts = async (term) => {
let uri = 'http://localhost:3000/posts?_sort=likes&_order=desc'
const res = await fetch(uri)
const posts = await res.json()
let template = ''
posts.forEach(post => {
template += `
<div class="post">
<h2>${post.title}</h2>
<p><small>${post.likes} likes</small></p>
<p>${post.body.slice(0, 200)}...</p>
<a href="/details.html?id=${post.id}">Read more</a>
</div>
`
})
window.addEventListener('DOMContentLoaded', () => renderPosts());
Source: the Net Ninja YouTube channel: Up & Running with JSON Server
JSON Server: text search request example
const container = document.querySelector('.blogs')
const searchForm = document.querySelector('.search')
const renderPosts = async (term) => {
let uri = 'http://localhost:3000/posts?_sort=likes&_order=desc'
if (term) {uri += `&q=${term}`}
const res = await fetch(uri)
const posts = await res.json()
let template = ''
posts.forEach(post => {
template += `
<div class="post">
<h2>${post.title}</h2>
<p><small>${post.likes} likes</small></p>
<p>${post.body.slice(0, 200)}...</p>
<a href="/details.html?id=${post.id}">Read more</a>
</div>
`
})
window.addEventListener('DOMContentLoaded', () => renderPosts());
Source: the Net Ninja YouTube channel: Up & Running with JSON Server
JSON Server: POST request example
const form = document.querySelector('form')
const createPost = async (e) => {
e.preventDefault()
const doc = {
title: form.title.value,
body: form.body.value,
likes: 0,
}
await fetch('http://localhost:3000/posts', {
method: 'POST',
body: JSON.stringify(doc),
headers: { 'Content-Type': 'application/json' }
})
window.location.replace('/')
}
Source: the Net Ninja YouTube
form.addEventListener('submit', channel: Up & Running with JSON Server
createPost);
JSON Server: DELETE request example
const id = new URLSearchParams(window.location.search).get('id')
const container = document.querySelector('.details')
const deleteBtn = document.querySelector('.delete')
const renderDetails = async () => {
const res = await fetch('http://localhost:3000/posts/' + id)
if (!res.ok) {window.location.replace("/")}
const post = await res.json()
const template = `
<h1>${post.title}</h1>
<p>${post.body}</p>
`
container.innerHTML = template;
}
deleteBtn.addEventListener('click', async () => {
const res = await fetch('http://localhost:3000/posts/' + id, {
method: 'DELETE'
});
window.location.replace("/");
})
Source: the Net Ninja YouTube channel: Up & Running with JSON Server
window.addEventListener('DOMContentLoaded', renderDetails);
HTTP Cross-Origin Resource Sharing (CORS)
Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
CORS
Origin of a web resource: the triple (scheme, domain, port) of its URL
By default, web browsers enforce the same-origin security policy
restricting JavaScript code loaded from one origin to make HTTP
request to another origin, to prevent cross-site scripting attacks
e.g., the JavaScript inside the HTML page initially requested to server
with origin O1, contains a call to Fetch making a request to another
server of origin O2 to get some JSON data
e.g., access public API from dev server
HTTP CORS headers are meant to allow cross-origin requests
overriding the same-origin default
They require value modifying requests such as PUT and DELETE
coming from another origin to be preceded by so-called preflight
OPTION request
The CORS headers in the response to the OPTION request will tell
the client what URL is allowed to modify the resource with what
method
CORS
Example: clone the jsonServerWebStoragePersistent branch of
GitLab calcquasarstudents repository,
https://gitlab.esiea.fr/webdev/calcquasarstudents/-/tree/JsonS
erverWebStoragePersistent?ref_type=heads
Launch the calculator app using "quasar dev" or "npm run
dev" on one terminal
On another terminal launch json-server using
"npm run json-serve"
In the browser running the calculator app, open More Tools /
Developer Tools and then the Network tab and in it the All
subtab
Then click on a GET button of the app: only one get request
appears
CORS
Check the Headers tab, then the
properties:
General /
Referrer Policy property
Response Headers /
Access-Contol-Allow-Methods
Response Headers /
Access-Contol-Allow-Origin
Request Headers /
Host
Request Headers /
Origin
Request Headers /
Referer
and the Response tab
CORS
The Response Headers:
Access-Control-Allow-Methods: GET, HEAD, PUT, PATCH, POST, DELETE
Access-Control-Allow-Origins: *
are set in such permissive way by json-server, because it is a tool to fake
a real API for HTTP Request testing during development
For security reasons, these values should not be used in
production
Now click on a PUT button on the app
This time 2 new requests appear on the All subtab
One OPTIONS request with no Payload and an empty
Response containing only the specification of the CORS policy
in the Response Headers
One PUT request containing the Payload with the new value
to update
CORS
OPTIONS Request:
Headers:
Response:
Note that the preflight
OPTIONS Request was sent
automatically by the browser,
not programmed manually
using Fetch
CORS
PUT Request:
Headers:
Response:
More on HTTP
HTTP cookie:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
HTTP Cross-Origin Resource Sharing (CORS):
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
HTTP authentication:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Authenti
cation
HTTP authorization headers:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
/Authorization
HTTP caching:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
HTTP security policy headers:
Postman
A tool to test a REST API without a front-end app
Converse of json-server
Together they allow defining and testing a REST interface
through which the front-end and back-end shall interact,
independently of the implementation of both ends
Provides a GUI to specify HTTP requests to an URL and get
their responses
Download here: https://www.postman.com/downloads/
Postman
