Website hoạt động như thế nào: Hướng Dẫn Dành Cho Người Mới Bắt Đầu
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.
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:
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ụ đó.
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ì.
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-usVì 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 host là www.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.
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 đó.
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.
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.
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.
Bài viết cùng chuyên mục
Hướng dẫn cài và sử dụng vue-object-to-formdata cho dự án nuxtjs
Hướng dẫn cài đặt và sử dụng v-tooltip trong project nuxt js
Hướng dẫn cài đặt và sử dụng thư viện Elementjs nuxtjs
Việc làm tại Hatonet
- GWS
- Trưởng phòng IT
