Tin Tức

Tổng hợp các bài viết, kinh nghiệm, chia sẻ kiến thức hữu ích về việc làm onsite, nhân sự onsite.

Website hoạt động như thế nào: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

folder Kiến thức công nghệ
today 08/08/2024 17:34
Bạn đã bao giờ tự hỏi web hoạt động như thế nào chưa? Trong phần này, tôi sẽ giải thích chính xác những gì xảy ra ngay khi bạn nhập địa chỉ của một trang web vào trình duyệt và nhấn ENTER. Trong phần này, chúng ta sẽ cùng khám phá một số khái niệm và thuật ngữ quan trọng mà bạn cần biết khi là một nhà phát triển web.
Bạn đã bao giờ tự hỏi web hoạt động như thế nào chưa? Trong phần này, tôi sẽ giải thích chính xác những gì xảy ra ngay khi bạn nhập địa chỉ của một trang web vào trình duyệt và nhấn ENTER.

Trong phần này, chúng ta sẽ cùng khám phá một số khái niệm và thuật ngữ quan trọng mà bạn cần biết khi là một nhà phát triển web.

Giả sử chúng ta mở trình duyệt và truy cập vào một trang web như https :// www. microsoft.com 

Địa chỉ mà chúng ta có trên thanh địa chỉ được gọi là URL, viết tắt của Uniform Resource Locator. Về cơ bản, đây là cách để xác định vị trí của một tài nguyên trên internet.

Các tài nguyên có thể là:

  • Trang Web (Tài Liệu HTML)
  • Hình Ảnh
  • Tập Tin Video
  • Phông Chữ
  • Và nhiều thứ khác.

Google URL

Vậy là chúng ta nhập URL và nhấn ENTER. Chuyện gì xảy ra tiếp theo?

Chà, có hai phần liên quan ở đây:

Client and Server

Trình Duyệt (còn gọi là Client)
Máy Chủ (là máy tính hoặc các máy tính lưu trữ trang web mục tiêu của chúng ta). Chúng ta thường gọi chúng là Web Servers hoặc đơn giản là Servers.
Đây là mô hình mà chúng ta gọi là mô hình client-server. Client yêu cầu một dịch vụ, và server cung cấp dịch vụ đó.

Client-server model

Vậy là, trình duyệt của chúng ta gửi một thông điệp đến máy chủ và nói: "Này! Hãy đưa tôi trang chủ của trang web này."
 
Man typing on a browser
 
Điều này khá giống với cách bạn gửi tin nhắn văn bản cho bạn bè của mình. Bạn có thể tưởng tượng điện thoại của bạn như là client gửi tin nhắn, còn điện thoại của bạn bè là server nhận tin nhắn.
 
Man and woman typing with the man representing the client, and the server representing the server
 

Quay lại ví dụ của chúng ta. Thông điệp này được định dạng dựa trên một giao thức gọi là HTTP (HyperText Transfer Protocol).

Có thể bạn đã từng thấy nó trước đây, nhưng chưa bao giờ biết rõ nó là gì.

Pointing to https in a Google URL

 

Nói một cách đơn giản, HTTP là một giao thức mà các client và server sử dụng để giao tiếp với nhau. Nó không phải là một ngôn ngữ lập trình, mà chỉ là một ngôn ngữ văn bản đơn giản để truyền thông qua internet.

Chúng ta cũng có HTTPS, tức là HTTP cộng thêm mã hóa. Vì vậy, các thông điệp trao đổi giữa client và server được mã hóa trong trường hợp này.

Dưới đây là một ví dụ đơn giản về một thông điệp HTTP:

GET /index.html HTTP/1.1
Host: www.microsoft.com
Accept-Language:en-us
Với thông điệp này, trình duyệt cho máy chủ biết nó đang tìm kiếm gì.

Vì vậy, ở dòng đầu tiên, nó cho biết rằng nó muốn GET một trang hoặc tệp có tên là index.html sử dụng HTTP phiên bản 1.1. index.html thường đại diện cho trang chủ của các trang web.

Ở dòng thứ hai, chúng ta có thể thấy hostwww.microsoft.com.

Ở dòng thứ ba, chúng ta có thể thấy ngôn ngữ en-us mà client có thể chấp nhận. Trong trường hợp này, đó là tiếng Anh.

Đừng lo lắng về việc phải ghi nhớ bất kỳ điều gì trong số này. Điều tôi muốn bạn hiểu ở đây là thông điệp này được cấu trúc dựa trên giao thức HTTP mà các client và server có thể hiểu.

Vậy nên, máy chủ nhận được thông điệp này và xác định những gì client đang yêu cầu. Sau đó, nó sẽ gửi lại một thông điệp cho client.

Client and server communicating back and forth

Thông điệp đầu tiên được gọi là yêu cầu HTTP (HTTP request).
Client sending an HTTP request to the Server
Thông điệp thứ hai được gọi là phản hồi HTTP (HTTP response).
Client sending a request to the server and the server sending the response
Mỗi lần trao đổi dữ liệu sử dụng giao thức HTTP đều bao gồm hai thông điệp: một yêu cầu và một phản hồi.

Vậy phản hồi chứa những gì? Dưới đây là một ví dụ đơn giản:

HTTP/1.1 200 OK
Date: 6th April 2023
Content-Type: text/html


<!DOCTYPE html>
<html>
...
</html>
 

Trên dòng đầu tiên, chúng ta thấy phiên bản của giao thức HTTP được sử dụng, theo sau là một số (200), là mã trạng thái. Mã 200 có nghĩa là thành công hoặc OK.

Ngay bên dưới, chúng ta có thể thấy ngày và giờ của phản hồi.

Tiếp theo, chúng ta thấy loại nội dung mà máy chủ gửi lại cho client, trong trường hợp này là text/html.

Sau đó, chúng ta có thể thấy mã HTML, hoặc Tài Liệu HTML, đại diện cho trang chủ của www.microsoft.com. Dĩ nhiên, mã HTML thực tế dài hơn rất nhiều.

Khi trình duyệt đọc tài liệu HTML này, nó xây dựng cái mà chúng ta gọi là DOM (Document Object Model). Đừng để cái tên cầu kỳ này làm bạn lo lắng. Đây là mô hình đại diện cho các đối tượng hoặc phần tử trong tài liệu HTML của chúng ta.

Những phần tử này là gì? Tất cả các khối xây dựng của trang như đoạn văn bản, hình ảnh, liên kết, và những thứ khác. Bạn sẽ thấy chúng hoạt động trong phần tiếp theo.

Khi trình duyệt đọc tài liệu HTML được trả về từ máy chủ, nó phát hiện các tham chiếu đến các tài nguyên khác trong tài liệu này, chẳng hạn như hình ảnh, phông chữ và các thứ khác.

Mỗi tài nguyên này đều có một địa chỉ hoặc URL. Vì vậy, đối với mỗi tài nguyên, trình duyệt gửi một yêu cầu HTTP riêng biệt đến máy chủ để lấy tài nguyên đó.

The browser sending an HTTP request to the server to fetch that resource

Nhiều yêu cầu HTTP này được gửi song song, giúp chúng ta xem trang nhanh nhất có thể.

Khi trình duyệt đã nhận đủ các tài nguyên cần thiết, nó sẽ bắt đầu hiển thị tài liệu HTML.

 Browser rendering the HTML document

Hiển thị một tài liệu HTML có nghĩa là trình bày nó. Đây là một thuật ngữ kỹ thuật thường được sử dụng.

Tóm lại, trình duyệt của chúng ta gửi một yêu cầu HTTP đến máy chủ và nhận một phản hồi HTTP. Phản hồi HTTP này chứa một tài liệu HTML.

Client sending an HTTP request to the server and receives an HTTP response which contains an HTML document

Trình duyệt đọc tài liệu HTML để xây dựng một DOM (Document Object Model) và hiển thị trang.

Browser reads the HTML document to construct a DOM