Now we know how HTTP works, and how to host sites it's time to look at creating more in-depth backends. In this session we will get more specific with HTTP and look at examples of using it. Additionally we will look at creating and consuming API's which will make communicating between sites possible!
Here are a list of the additional resources from the slides
- HTTP requests/responses
- HTTPIE
- Pages on pages on pages
- How you should probably do this (multiple fetches)
- Ezcv flask integration
A header at the end of the day is just text, and it looks like this:
GET /beginner HTTP/1.1
Host: schulichignite.comThe first thing is the method, then the slug, then the HTTP version, then the host, then all the other header info
When sending data via a POST request, you also have a body, here’s an example of a form submission
POST /form HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: <needs to be calculated>
name=kieran&age=24*The Content-Type is a MIME type
When sending data via a POST request, you also have a body, here’s an example of a JSON body
POST /calgary HTTP/1.1
Host: weather.com
Content-Type: application/json
Content-Length: <needs to be calculated>
{“date”:”11/29/2022”}*The Content-Type is a MIME type
The first line is the status code, and status message. Then come the response headers, then the response body after 1 line of nothing!
200 OK
Date: Tue, 29 Nov 2022 20:34:20 GMT
Content-Type: text/html; charset=utf-8
Server: cloudflare
<!doctype html><html><head></head><body><h1>Hello World</h1></body></html>Basically the same as the HTML example, except a different MIME type
200 OK
Date: Tue, 29 Nov 2022 20:34:20 GMT
Content-Type: text/json; charset=utf-8
Server: cloudflare
{"name":"kieran", "age":24}
Error states 400-599, will often have no response body. They can sometimes have pages to handle errors that are HTML pages, but not always
404 Not Found
Date: Tue, 29 Nov 2022 20:34:20 GMTHere’s an example with HTML
404 Not Found
Date: Tue, 29 Nov 2022 20:34:20 GMT
Content-Type: text/html; charset=utf-8
Server: cloudflare
<!doctype html><html><head></head><body><h1>She's broken bud :(</h1></body></html>HTTPie is a great testing tool for creating HTML requests and reading responses!
Iframes create a WHOLE NEW DOCUMENT inside the current one. This document has all the same capabilities as a normal one.
A similar effect can be achieved with this JS
html = "<head></head><body><p id='text'>Hello!</p></body>"
parser = new DOMParser(); // Parses HTML
doc = parser.parseFromString(html, 'text/html');
// Use the document and parse it like we normally do in JS
text = doc.getElementByID("text")
console.log(text.innerHTML) // logs 'Hello!'This code will basically collect all of the requests together and parallelize them
So now the alex request and megan request happen simultaneously instead of one after the other!
users = [] // Initialize empty array
// Get the promise from the initial requests
const alexRequest = fetch(`https://kieranwood.ca/session-8-api/json/users/alex.json`
).then((response) =>
response.json()
)
const meganRequest = fetch(`https://kieranwood.ca/session-8-api/json/users/megan.json`
).then(
(response) => response.json()
)
// Process promises asynchronously
users = await Promise.all([alexRequest, meganRequest])
console.log(users)You can initialize ezcv to where ezcv generates the HTML and then flask serves it. You can do this by
ezcv init <name> --flask