- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
? A Bit of History — Where HTTP Came From
Back in 1989, Tim Berners-Lee invented the World Wide Web (WWW). But it wasn’t just websites — it was a system of protocols, and one of them was HTTP: the HyperText Transfer Protocol.
HTTP was designed as a simple way to send hypertext (HTML) documents between computers. This allowed the user to experience a more dynamic and interactive way to access information.
Since then, HTTP has evolved (currently at HTTP/3), but its core idea hasn’t changed:
? Request vs response:
? What Is an HTTP Request and Response?
When your browser opens a website, it sends an HTTP request.
The server replies with an HTTP response.
? Request Structure
An HTTP request typically includes:
A server sends back:
? Request vs Response diagram:
? Example: Making an HTTP Request in TypeScript
Let’s say we want to send a POST request with JSON to an API:
async function sendData() {
const response = await fetch("", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
});
if (!response.ok) {
console.error("Request failed with status:", response.status);
return;
}
const data = await response.json();
console.log("Response data:", data);
}
As we can see the fetch sent a Post Request:
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
}
This includes, of course the three main parts of a HTTP request.
? TCP/IP Model (Where’s HTTP?)
HTTP sits at the Application layer of the TCP/IP model:
Application ← HTTP lives here ?
Transport ← TCP handles the delivery ?
Internet ← IP takes care of addresses ?
Link ← Ethernet/WiFi physically connects
Key Things to Keep in Mind:
HTTP is a stateless protocol.
? Final Thoughts
HTTP may feel invisible, but it’s everywhere. It silently handles the exchange of information between browser and server.
? References
? If you found this article interesting or want to get in touch, I’m active on X
Back in 1989, Tim Berners-Lee invented the World Wide Web (WWW). But it wasn’t just websites — it was a system of protocols, and one of them was HTTP: the HyperText Transfer Protocol.
HTTP was designed as a simple way to send hypertext (HTML) documents between computers. This allowed the user to experience a more dynamic and interactive way to access information.
Since then, HTTP has evolved (currently at HTTP/3), but its core idea hasn’t changed:
That basic principle powers nearly every web app today. Without HTTP, the internet would not look, feel, or behave as it does."Let the client ask, and let the server answer."
? Request vs response:
? What Is an HTTP Request and Response?
When your browser opens a website, it sends an HTTP request.
The server replies with an HTTP response.
? Request Structure
An HTTP request typically includes:
- Start line: Method (GET, POST, PUT, DELETE), path, protocol version
- Headers: Info like content type, length, user-agent, tokens.
- Body: Optional — used in methods like POST or PUT to send information to the server.
A server sends back:
- Start line: Protocol version + status code like so:
1xx - Informational
2xx – Success
3xx – Redirection
4xx – Client Error
5xx – Server Error
- Headers: Metadata like content-type, caching rules
- Body: Often contains the HTML or JSON payload
? Request vs Response diagram:
? Example: Making an HTTP Request in TypeScript
Let’s say we want to send a POST request with JSON to an API:
async function sendData() {
const response = await fetch("", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
});
if (!response.ok) {
console.error("Request failed with status:", response.status);
return;
}
const data = await response.json();
console.log("Response data:", data);
}
As we can see the fetch sent a Post Request:
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
}
This includes, of course the three main parts of a HTTP request.
? TCP/IP Model (Where’s HTTP?)
HTTP sits at the Application layer of the TCP/IP model:
Application ← HTTP lives here ?
Transport ← TCP handles the delivery ?
Internet ← IP takes care of addresses ?
Link ← Ethernet/WiFi physically connects
Key Things to Keep in Mind:
HTTP is a stateless protocol.
- Each request is independent. The server doesn’t remember the last thing you asked.
- The connection is not bidirectional meaning the server cannot send request by himself to the client.
- If you want persistent connections, you need tools like WebSockets, which are also another type of protocol we use daily, like in videogames, videocalls or chats.
? Final Thoughts
HTTP may feel invisible, but it’s everywhere. It silently handles the exchange of information between browser and server.
? References
– The most complete and reliable documentation for web protocols.
– Official reference for making HTTP requests in JavaScript and TypeScript.
? If you found this article interesting or want to get in touch, I’m active on X