Hi, my homies
Chào mừng các bạn đến với một post mới, chủ đề cũ, phong cách truyền thống: không sáo rỗng =)))))) à thôi không xàm nữa.
Bài viết này mình sẽ viết chi tiết về cách hoạt động của website... nhưng không phải kiểu "blabla website là gì... gửi yêu cầu rồi máy chủ phản hồi blabla" (cái này lên ChatGPT cho lẹ). Nhưng không viết thế thì viết kiểu gì?
Viết kiểu mà một người đang học lập trình web sẽ quan tâm 😮
Thứ bạn thấy trên trình duyệt khi truy cập website là gì?
Trang web màu sắc sinh động bạn nhìn thấy là kết quả của việc kết xuất (render) các file siêu văn bản (HTML-Hyper Text Markup Language). Hiểu đơn giản nó là các file chứa dữ liệu như các file bạn mở trên máy tính hằng ngày, tuy nhiên nội dung của nó không phải văn bản thông thường mà là một dạng ngôn ngữ đánh dấu mà trình duyệt hiểu và biểu diễn thành các thành phần như nút bấm, đường link, tiêu đề, bảng biểu,... như bạn nhìn thấy trên website.
Ví dụ về nội dung file HTML và cách trình duyệt "hiểu" nó :)
Bên cạnh file HTML, trình duyệt còn có thể kết hợp render các định dạng file khác để website thêm sinh động, dưới đây là một số định dạng file phổ biến mà trình duyệt sử dụng, thường được gọi là các files tĩnh:
- HTML (Hyper text markup language): render ra các thành phần cơ bản của website như nút bấm, bảng biểu, đường link,...
- CSS (Cascading style sheet): xác định kiểu cách cho các thành phần của website (màu sắc, kiểu chữ, ảnh nền,...)
- JS (JavaScript): tạo sự tương tác cho website (xử lý các sự kiện) hoặc thực giao tiếp với các máy chủ qua AJAX (mình nói ở bài khác)
- Các file ảnh, audio, video,...: Trình duyệt cũng hỗ trợ việc biểu diễn các file tĩnh dạng media bên cạnh các dạng file tĩnh bên trên
- Others...
Website thực sự gửi cái gì cho Máy chủ (Server)?
Chúng ta hay nghe cái khái niệm "Website/Trình duyệt gửi yêu cầu cho Máy chủ...", vậy thì yêu cầu ở đây là gì?. Hiểu đơn giản nó là một gói tin như sau:
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Đây chính là thứ gọi là "yêu cầu", là thứ mà trình duyệt gửi cho máy chủ. Trên đây là một ví dụ cụ thể cho một request (yêu cầu) theo giao thức HTTP1, ngoài HTTP thì có thể có nhiều dạng giao thức, tiêu chuẩn khác để giao tiếp trong hệ thống Website, mỗi giao thức sẽ quy định format khác nhau nhưng tạm thời các bạn cứ quan tâm đến HTTP đi vì nó là cái phổ biến nhất.
Máy chủ thực sự làm gì khi nhận được yêu cầu?
Sau khi máy chủ nhận được yêu cầu là gói tin với định dạng nói bên trên, máy chủ sẽ đọc gói tin và xác định xem mục đích của client là gì, từ đó xử lý logic để phản hồi lại yêu cầu đó (ví dụ như lấy thông tin về sản phẩm trình duyệt yêu cầu để trả ra file HTML chứa thông tin sản phẩm đó). Đây chính là logic mà các lập trình viên Back-end phải xử lý :D.
Có một số behaviors (hành vi) phổ biến của máy chủ để phản hồi lại cho trình duyệt:
1. Trả về các files tĩnh .html, .css, .js, .png,... qua network cho trình duyệt.
Trình duyệt khi nhận được các files tĩnh này sẽ thực hiện render như đã nói ở phần trên, quá trình này bạn có thể kiểm tra bằng cách nhấn F12 => mở tab Network trên trình duyệt
Đây là ví dụ khi bạn truy cập trang Bài viết của Techomies :"))
2. Chuyển hướng tới một trang (đường link) khác
Về cơ bản là máy chủ sẽ thực hiện chuyển hướng bạn sang một trang khác thôi :) ví dụ khi thực hiện Đăng nhập xong, Techomies sẽ thực hiện chuyển hướng bạn sang Trang chủ.
3. Trả về dữ liệu trực tiếp
Đây là một trường hợp đặc biệt, máy chủ có thể trả ra dữ liệu trực tiếp dạng text hoặc một định dạng dữ liệu nào đó, phổ biến có thể nói như JSON, XML,... bạn có thể hiểu đây đơn giản là một tiêu chuẩn biểu diễn dữ liệu
Ví dụ về định dạng JSON
Ví dụ về định dạng XML
Thông thường khi trả ra dữ liệu như vậy thì mục đích không phải để trình duyệt trực tiếp render các dữ liệu này lên giao diện. Thay vào đó, các mã JavaScript sẽ có nhiệm vụ nhận các dữ liệu này và xử lý, có thể là hiển thị thông báo hoặc tạo ra mã HTML mới để trình duyệt render (thường sử dụng trong cơ chế AJAX hoặc các mô hình web client-side rendering mà mình sẽ viết rõ ở một bài khác)
Bên trên là 3 behaviors phổ biến của máy chủ để phản hồi lại yêu cầu của máy khách (trình duyệt). Ngoài ra, có các behaviors khác mà bạn sẽ biết khi bắt đầu học lập trình web mình lười chẳng muốn liệt kê ra :)))) Ngoài ra các bạn có thể ghé thăm bài viết về mô hình Client-Server tại đây để hiểu rõ hơn về nó.
