Series 1 — Web Fundamentals

Internet → HTTP/HTTPS → DNS → Browser

 

Bài 1 – Internet Fundamentals

 

Khi bắt đầu học Frontend, chúng ta thường tập trung vào HTML, CSS và JavaScript. Tuy nhiên, trước khi tìm hiểu cách xây dựng một website, có một câu hỏi cơ bản mà bất kỳ Frontend Developer nào cũng nên hiểu:

Khi tôi nhập một địa chỉ website vào trình duyệt, điều gì thực sự xảy ra phía sau?

Website không đơn giản chỉ là một tập hợp các file HTML, CSS và JavaScript nằm trên máy tính. Để một website có thể được truy cập từ bất kỳ đâu, nó cần giao tiếp thông qua Internet giữa thiết bị của người dùng và máy chủ chứa website.

Trong bài viết này, chúng ta sẽ tìm hiểu những khái niệm nền tảng của Internet và cách Client – Server giao tiếp với nhau.

1. Internet là gì?

Internet là một mạng lưới khổng lồ kết nối các thiết bị trên toàn thế giới với nhau.

Các thiết bị này có thể là:

• Máy tính
• Điện thoại
• Server
• Router
• Camera
• IoT devices
• Và nhiều thiết bị khác

Thay vì mỗi thiết bị hoạt động độc lập, Internet cho phép chúng trao đổi dữ liệu với nhau.

Có thể hình dung đơn giản:

Computer A
     │
     ▼
   Router
     │
     ▼
  Internet
     │
     ▼
   Server
     │
     ▼
Computer B

Khi bạn gửi một request đến một website, dữ liệu sẽ được truyền qua nhiều thiết bị mạng khác nhau trước khi đến server đích.

2. Internet và Web có phải là một?

Đây là một nhầm lẫn khá phổ biến.

Internet và World Wide Web (Web) không phải là một thứ.

Internet là hạ tầng mạng cho phép các thiết bị giao tiếp với nhau.

Web là một dịch vụ chạy trên Internet, cho phép chúng ta truy cập các website thông qua trình duyệt.

Có thể hiểu đơn giản:

Internet
│
├── World Wide Web
├── Email
├── Online Gaming
├── File Transfer
└── Other Services

Ví dụ, khi bạn truy cập:

https://example.com

Bạn đang sử dụng World Wide Web, và Web đang sử dụng Internet để truyền dữ liệu.

3. Client và Server

Một trong những khái niệm quan trọng nhất khi tìm hiểu Web là:

Client – Server Model

Client

Client là thiết bị hoặc ứng dụng gửi yêu cầu đến server.

Ví dụ:

• Chrome
• Microsoft Edge
• Firefox
• Safari
• Mobile App

Khi bạn mở một website bằng Chrome, Chrome đóng vai trò là Client.

Server

Server là máy tính hoặc hệ thống máy tính có nhiệm vụ cung cấp dữ liệu hoặc dịch vụ cho client.

Ví dụ:

Client
   │
   │ Request
   ▼
Server
   │
   │ Response
   ▼
Client

Client yêu cầu dữ liệu → Server xử lý → Server trả dữ liệu về Client.

4. Ví dụ thực tế

Giả sử bạn mở:

https://example.com

Trình duyệt của bạn sẽ gửi yêu cầu đến server đang lưu trữ website.

Có thể đơn giản hóa quá trình thành:

Bạn
 │
 ▼
Browser
 │
 │ Request
 ▼
Internet
 │
 ▼
Server
 │
 │ Response
 ▼
Internet
 │
 ▼
Browser
 │
 ▼
Website

Server có thể trả về các tài nguyên như:

• HTML
• CSS
• JavaScript
• Images
• JSON
• Fonts
• Videos

Browser sau đó xử lý những dữ liệu này và hiển thị website cho người dùng.

5. IP Address là gì?

Để các thiết bị có thể giao tiếp với nhau trên mạng, chúng cần có một địa chỉ để xác định.

Đó là IP Address – Internet Protocol Address.

Ví dụ:

142.250.xxx.xxx

Hoặc với IPv6:

2001:db8::xxxx

Có thể hình dung IP giống như địa chỉ của một thiết bị trên mạng.

Ví dụ trong đời sống:

Người gửi
   ↓
Địa chỉ nhà
   ↓
Người nhận

Trong mạng:

Client
   ↓
IP Address
   ↓
Server

Tuy nhiên, người dùng không muốn phải nhớ những dãy số IP dài và khó nhớ.

Chúng ta cần một cách dễ sử dụng hơn.

Đó chính là Domain Name.

6. Domain là gì?

Domain là tên miền mà con người có thể dễ dàng ghi nhớ để truy cập một website.

Ví dụ:

google.com
github.com
facebook.com

Thay vì phải nhớ:

142.xxx.xxx.xxx

chúng ta chỉ cần nhớ:

google.com

Nhưng một câu hỏi xuất hiện:

Nếu server giao tiếp bằng IP, làm thế nào google.com được chuyển thành IP?

Đây chính là lúc DNS xuất hiện.

DNS sẽ được tìm hiểu kỹ hơn trong bài tiếp theo.

7. Dữ liệu được truyền trên Internet như thế nào?

Khi gửi một lượng dữ liệu lớn qua Internet, dữ liệu thường được chia thành những phần nhỏ hơn gọi là Packets.

Ví dụ:

Original Data
████████████████████████

        ↓

Packet 1
██████

Packet 2
██████

Packet 3
██████

Packet 4
██████

Các packet được truyền qua mạng và đến đích, sau đó được xử lý để tạo lại dữ liệu cần thiết.

Điều này cho phép mạng có thể truyền nhiều loại dữ liệu khác nhau giữa rất nhiều thiết bị.

8. Internet không phải là một đường truyền duy nhất

Một hiểu lầm khác là tưởng tượng Internet giống như một đường dây trực tiếp:

Computer ─────────────── Server

Thực tế phức tạp hơn nhiều.

Dữ liệu có thể đi qua nhiều router và network khác nhau:

Client
  │
  ▼
Router
  │
  ▼
ISP
  │
  ▼
Router
  │
  ▼
Network
  │
  ▼
Router
  │
  ▼
Server

Mỗi router có nhiệm vụ giúp chuyển tiếp packet đến nơi cần đến.

Vì vậy, Internet có thể được hiểu là một mạng lưới của rất nhiều mạng lưới khác nhau.

9. ISP là gì?

ISP – Internet Service Provider là nhà cung cấp dịch vụ Internet.

Ví dụ, khi bạn sử dụng Internet tại nhà hoặc trên điện thoại, bạn đang kết nối Internet thông qua một ISP.

Mô hình đơn giản:

Your Device
     │
     ▼
   Router
     │
     ▼
    ISP
     │
     ▼
  Internet
     │
     ▼
   Server

ISP cung cấp kết nối giúp thiết bị của bạn có thể giao tiếp với các mạng khác trên Internet.

10. Vậy khi truy cập một Website, điều gì xảy ra?

Đến đây chúng ta có thể ghép các khái niệm lại với nhau.

Giả sử bạn nhập:

https://example.com

Quá trình đơn giản hóa sẽ là:

1. Bạn nhập URL
        ↓
2. Browser xử lý yêu cầu
        ↓
3. DNS tìm IP tương ứng với Domain
        ↓
4. Browser kết nối đến Server
        ↓
5. Browser gửi Request
        ↓
6. Server xử lý Request
        ↓
7. Server gửi Response
        ↓
8. Browser nhận dữ liệu
        ↓
9. Browser hiển thị Website

Ở đây chúng ta mới chỉ nhìn ở mức tổng quan.

Trong thực tế, giữa các bước này còn có rất nhiều cơ chế như:

• DNS Resolution
• TCP
• TLS
• HTTP/HTTPS
• Routing
• Request/Response
• Browser Rendering

Các khái niệm này sẽ được tìm hiểu trong những bài tiếp theo.

11. Tổng kết

Qua bài viết này, chúng ta đã xây dựng được những khái niệm nền tảng đầu tiên:

Internet	Mạng lưới kết nối các thiết bị trên toàn thế giới
Web	Dịch vụ chạy trên Internet để truy cập website
Client	Thiết bị/ứng dụng gửi request
Server	Hệ thống cung cấp dữ liệu hoặc dịch vụ
IP Address	Địa chỉ dùng để xác định thiết bị trên mạng
Domain	Tên dễ nhớ đại diện cho website
DNS	Hệ thống phân giải Domain thành IP
Packet	Đơn vị dữ liệu được truyền qua mạng
ISP	Nhà cung cấp dịch vụ Internet

 

Điều quan trọng nhất cần nhớ không phải là thuộc lòng từng định nghĩa, mà là hiểu được mối quan hệ:

              INTERNET
                  │
        ┌─────────┴─────────┐
        │                   │
      Client              Server
        │                   │
        │     Request       │
        ├──────────────────►│
        │                   │
        │     Response      │
        │◄──────────────────┤
        │
      Browser
        │
        ▼
     Website

Và đây mới chỉ là bước đầu.

Ở bài tiếp theo, chúng ta sẽ đi sâu vào một câu hỏi quan trọng:

Browser biết Server nào cần gửi request bằng cách nào khi chúng ta chỉ nhập một Domain như google.com?

Đó chính là lúc chúng ta cần tìm hiểu DNS & Domain.

 

Bài 2 – HTTP/HTTPS – Cách Browser và Server giao tiếp

 

HTTP/HTTPS – Client và Server giao tiếp với nhau như thế nào?

Ở bài trước, chúng ta đã tìm hiểu Internet, Client, Server, IP Address và Domain.

Một câu hỏi tiếp theo rất tự nhiên là:

Client và Server giao tiếp với nhau bằng cách nào?

Khi bạn mở một website, trình duyệt cần gửi yêu cầu đến server. Server sau đó xử lý yêu cầu và trả dữ liệu về cho trình duyệt.

Để hai bên có thể hiểu được nhau, chúng ta cần một protocol – giao thức.

Trong Web, giao thức quan trọng nhất chính là HTTP.

1. Protocol là gì?

Protocol có thể hiểu đơn giản là một tập hợp các quy tắc giúp các thiết bị giao tiếp với nhau.

Ví dụ trong đời sống, khi hai người giao tiếp, cả hai cần thống nhất một ngôn ngữ.

Person A
   │
   │ Ngôn ngữ chung
   ▼
Person B

Trong mạng máy tính cũng tương tự:

Client
   │
   │ Protocol
   ▼
Server

Nếu Client và Server không tuân theo cùng một quy tắc, chúng sẽ không thể giao tiếp một cách chính xác.

Có rất nhiều protocol được sử dụng trên Internet, nhưng khi nói về Web, chúng ta đặc biệt quan tâm đến:

• HTTP
• HTTPS

2. HTTP là gì?

HTTP – HyperText Transfer Protocol là giao thức được sử dụng để truyền tải dữ liệu giữa Client và Server trên Web.

Nói đơn giản:

HTTP quy định cách Client gửi Request và Server trả Response.

Mô hình cơ bản:

Client
   │
   │ HTTP Request
   ▼
Server
   │
   │ HTTP Response
   ▼
Client

Ví dụ khi bạn truy cập:

https://example.com

Browser có thể gửi một HTTP Request đến server.

Server xử lý request và trả về HTTP Response.

3. Request và Response

Đây là hai khái niệm quan trọng nhất khi học HTTP.

Request

Request là yêu cầu được Client gửi đến Server.

Ví dụ:

Browser
   │
   │ "Hãy lấy trang chủ"
   ▼
Server

Response

Response là dữ liệu mà Server trả lại cho Client.

Browser
   │
   │ Request
   ▼
Server
   │
   │ Response
   ▼
Browser

Response có thể chứa:

• HTML
• CSS
• JavaScript
• JSON
• Image
• Video
• File
• Hoặc thông tin lỗi

4. HTTP Request gồm những gì?

Một HTTP Request có nhiều thành phần.

Có thể đơn giản hóa thành:

HTTP Request
│
├── Method
├── URL
├── Headers
└── Body

Ví dụ:

GET /users HTTP/1.1
Host: example.com
Accept: application/json

Trong đó:

• GET là HTTP Method
• /users là đường dẫn
• Host và Accept là Headers

Không phải request nào cũng có Body.

Ví dụ GET thường không cần Body, trong khi POST thường có thể gửi dữ liệu trong Body.

5. HTTP Methods

HTTP cung cấp nhiều Method để Client thể hiện mục đích của Request.

Các Method phổ biến:

Method	Mục đích
GET	Lấy dữ liệu
POST	Tạo/gửi dữ liệu
PUT	Cập nhật toàn bộ dữ liệu
PATCH	Cập nhật một phần dữ liệu
DELETE	Xóa dữ liệu

Ví dụ một API quản lý User:

GET
/users
→ Lấy danh sách user

POST
/users
→ Tạo user mới

PUT
/users/10
→ Cập nhật toàn bộ user có ID 10

PATCH
/users/10
→ Cập nhật một phần user có ID 10

DELETE
/users/10
→ Xóa user có ID 10

Đây là những Method mà Frontend Developer sẽ sử dụng rất thường xuyên khi làm việc với API.

6. HTTP Status Code

Sau khi Server xử lý Request, Server cần cho Client biết kết quả.

Thông tin này được thể hiện thông qua HTTP Status Code.

Ví dụ:

200 OK

có nghĩa request đã được xử lý thành công.

Các Status Code thường được chia thành 5 nhóm:

Nhóm	Ý nghĩa
1xx	Informational
2xx	Success
3xx	Redirection
4xx	Client Error
5xx	Server Error

2xx – Thành công

Ví dụ:

200 OK

Request thành công.

201 Created

Tài nguyên mới đã được tạo.

3xx – Redirect

Ví dụ:

301 Moved Permanently

Tài nguyên đã được chuyển sang địa chỉ khác một cách lâu dài.

302 Found

Có thể hiểu đơn giản là tài nguyên hiện đang được truy cập thông qua một địa chỉ khác.

4xx – Client Error

Đây thường là lỗi liên quan đến Request từ phía Client.

Ví dụ:

400 Bad Request

Request không hợp lệ.

401 Unauthorized

Client chưa được xác thực.

403 Forbidden

Client đã được nhận diện nhưng không có quyền truy cập.

404 Not Found

Không tìm thấy tài nguyên.

Ví dụ:

GET /users/999999

nhưng User có ID này không tồn tại.

5xx – Server Error

Đây thường là lỗi xảy ra phía Server.

Ví dụ:

500 Internal Server Error

Server gặp lỗi khi xử lý Request.

Một số lỗi khác:

502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout

7. HTTP Headers là gì?

Headers chứa thêm thông tin về Request hoặc Response.

Ví dụ Request:

GET /users HTTP/1.1
Host: example.com
Accept: application/json
Authorization: Bearer token

Một số Header thường gặp:

Content-Type

Cho biết kiểu dữ liệu được gửi.

Content-Type: application/json

Authorization

Thường được sử dụng để gửi thông tin xác thực.

Authorization: Bearer token

Accept

Cho biết Client muốn nhận kiểu dữ liệu nào.

Accept: application/json

Headers đóng vai trò rất quan trọng khi Frontend giao tiếp với Backend API.

8. Request Body là gì?

Body là phần chứa dữ liệu mà Client muốn gửi đến Server.

Ví dụ khi đăng ký tài khoản:

POST /users
Content-Type: application/json

Body:

{
  "name": "Khoa",
  "email": "[email protected]",
  "password": "123456"
}

Server nhận dữ liệu này và có thể sử dụng để tạo tài khoản.

Một điểm cần nhớ:

Không phải Request nào cũng cần Body.

Ví dụ:

GET /users

thường chỉ yêu cầu lấy dữ liệu.

Trong khi:

POST /users

thường gửi dữ liệu lên Server.

9. Response gồm những gì?

Tương tự Request, Response cũng có nhiều thành phần:

HTTP Response
│
├── Status Code
├── Headers
└── Body

Ví dụ:

HTTP/1.1 200 OK
Content-Type: application/json

Body:

{
  "id": 1,
  "name": "Khoa"
}

Browser hoặc ứng dụng Frontend có thể đọc Response và sử dụng dữ liệu đó.

10. HTTP trong một Website

Giả sử bạn truy cập:

https://example.com

Có thể hình dung:

Browser
   │
   │ GET /
   ▼
Server
   │
   │ 200 OK
   │ HTML
   ▼
Browser

Browser nhận HTML.

Sau đó Browser có thể tiếp tục gửi thêm Request để lấy:

CSS
JavaScript
Images
Fonts

Ví dụ:

Browser
   │
   ├── GET /index.html
   ├── GET /style.css
   ├── GET /app.js
   ├── GET /logo.png
   └── GET /font.woff2
             │
             ▼
           Server

Đây là một trong những lý do tại sao khi mở một website, Browser có thể tạo ra rất nhiều network requests.

11. HTTP và API

HTTP không chỉ được sử dụng để tải Website.

Nó còn được sử dụng rất nhiều để xây dựng API.

Ví dụ Frontend muốn lấy danh sách sản phẩm:

Frontend
   │
   │ GET /api/products
   ▼
Backend
   │
   │ JSON
   ▼
Frontend

Server có thể trả:

[
  {
    "id": 1,
    "name": "Keyboard",
    "price": 1000000
  },
  {
    "id": 2,
    "name": "Mouse",
    "price": 500000
  }
]

Frontend sau đó sử dụng dữ liệu này để hiển thị giao diện.

Đây chính là nền tảng cho những thứ bạn sẽ gặp khi học:

• fetch()
• Axios
• REST API
• React
• Next.js
• Backend
• NestJS

12. HTTP có an toàn không?

HTTP truyền dữ liệu dưới dạng không được mã hóa bởi TLS.

Điều này có thể tạo ra rủi ro nếu dữ liệu nhạy cảm được truyền qua HTTP.

Ví dụ:

HTTP

Client
   │
   │ Password
   ▼
Internet
   │
   ▼
Server

Nếu dữ liệu không được bảo vệ đúng cách, kẻ tấn công có thể tìm cách đọc hoặc can thiệp vào dữ liệu truyền trên đường đi.

Đây là lý do HTTPS ra đời.

13. HTTPS là gì?

HTTPS – HyperText Transfer Protocol Secure có thể hiểu là HTTP được bảo vệ bằng TLS (Transport Layer Security).

Thay vì:

HTTP
Client ─────────────── Server

HTTPS tạo ra một kết nối được bảo vệ bằng mã hóa:

HTTPS

Client
   │
   │ 🔒 Encrypted Connection
   ▼
Server

HTTPS giúp bảo vệ dữ liệu trong quá trình truyền giữa Client và Server.

14. HTTPS bảo vệ điều gì?

HTTPS chủ yếu cung cấp ba đặc tính quan trọng:

1. Confidentiality – Tính bảo mật

Dữ liệu được mã hóa để người ngoài khó đọc được nội dung truyền đi.

2. Integrity – Tính toàn vẹn

Giúp phát hiện việc dữ liệu bị thay đổi trong quá trình truyền.

3. Authentication – Xác thực

TLS sử dụng chứng chỉ số để giúp Client xác minh danh tính của Server.

Có thể ghi nhớ:

HTTPS
 │
 ├── Confidentiality
 ├── Integrity
 └── Authentication

15. HTTP và HTTPS khác nhau như thế nào?

HTTP	HTTPS
Không sử dụng TLS để bảo vệ kết nối	Sử dụng TLS
Dữ liệu không được TLS mã hóa	Dữ liệu được mã hóa trong kết nối
Kém an toàn hơn	An toàn hơn
Không phù hợp với dữ liệu nhạy cảm	Được sử dụng rộng rãi trên Web hiện đại

 

Ngày nay, HTTPS là tiêu chuẩn phổ biến đối với website và các dịch vụ Web.

16. URL có những thành phần nào?

Khi làm việc với HTTP, chúng ta thường xuyên gặp URL.

Ví dụ:

https://example.com/products?id=10

Có thể chia thành:

https://
   │
   └── Protocol / Scheme

example.com
   │
   └── Domain

/products
   │
   └── Path

?id=10
   │
   └── Query Parameter

Một URL có thể chứa:

• Scheme
• Domain
• Port
• Path
• Query Parameters
• Fragment

Ví dụ:

https://example.com:443/products?id=10#reviews

Đây là một khái niệm rất quan trọng vì URL xuất hiện ở hầu hết mọi nơi trong Web.

17. Toàn bộ quá trình

Bây giờ chúng ta có thể ghép kiến thức của bài trước với HTTP/HTTPS.

Khi người dùng truy cập một website:

User
 │
 │ Nhập URL
 ▼
Browser
 │
 │ Tìm Server
 ▼
DNS
 │
 │ IP Address
 ▼
Server
 │
 │ HTTP/HTTPS Request
 ▼
Server xử lý
 │
 │ HTTP Response
 ▼
Browser
 │
 │ HTML / CSS / JS / Images
 ▼
Website

Trong thực tế, quá trình này còn có nhiều bước hơn.

Nhưng đây là mô hình nền tảng mà một Frontend Developer cần hiểu.

18. Những gì Frontend Developer cần nhớ

Không cần học HTTP theo kiểu thuộc lòng tất cả Status Code hay Header.

Quan trọng nhất là hiểu:

Client

Gửi Request.

Server

Nhận và xử lý Request.

Request

Có thể chứa:

Method
URL
Headers
Body

Response

Có thể chứa:

Status Code
Headers
Body

HTTP Methods

GET
POST
PUT
PATCH
DELETE

Status Codes

2xx → Success
3xx → Redirect
4xx → Client Error
5xx → Server Error

HTTPS

HTTP + TLS

giúp bảo vệ quá trình giao tiếp giữa Client và Server.

 19. Kết luận

HTTP là một trong những nền tảng quan trọng nhất của Web.

Khi học Frontend, chúng ta sẽ liên tục làm việc với HTTP mà đôi khi không nhận ra:

Browser
   ↓
HTTP Request
   ↓
API
   ↓
HTTP Response
   ↓
JavaScript
   ↓
UI

Khi sử dụng fetch():

fetch("/api/products");

thực chất chúng ta đang yêu cầu Browser thực hiện một HTTP Request.

Khi làm việc với React hoặc Next.js, chúng ta vẫn đang giao tiếp với Server thông qua những cơ chế mạng này.

Vì vậy, hiểu HTTP sẽ giúp chúng ta hiểu tốt hơn:

• API
• REST
• Fetch
• Axios
• Authentication
• Cookies
• CORS
• React Data Fetching
• Next.js Data Fetching
• Backend

Ở bài tiếp theo, chúng ta sẽ giải quyết một câu hỏi rất quan trọng:

Khi Browser chỉ biết google.com, làm thế nào nó tìm được địa chỉ IP của Server?

Để trả lời câu hỏi đó, chúng ta sẽ tìm hiểu DNS và Domain.