HTML - URL Encoding

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới fascininating của URL encoding. Đừng lo lắng nếu bạn mới làm quen với điều này; chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể URL encoding như một chuyên gia!

HTML - URL Encoding

What is URL Encoding? (URL Encoding là gì?)

Trước khi chúng ta vào các ví dụ, hãy hiểu URL encoding là gì và tại sao nó quan trọng.

URL encoding là phương pháp chuyển đổi các ký tự thành định dạng có thể truyền tải qua Internet. Nó giống như cấp cho văn bản của bạn một hộ chiếu đặc biệt để an toàn di chuyển qua web!

Hãy tưởng tượng như bạn đang cố gắng gửi một lá thư có địa chỉ sang trọng bao gồm các ký tự và khoảng trống. Dịch vụ bưu điện có thể sẽ bị困惑! URL encoding giống như viết lại địa chỉ đó theo cách mà mỗi nhân viên bưu điện (hoặc trong trường hợp của chúng ta, mỗi máy chủ web) có thể hiểu.

Example (Ví dụ)

Hãy bắt đầu với một ví dụ đơn giản:

https://www.example.com/my file.html

URL này có một khoảng trống, điều có thể gây ra vấn đề. Khi chúng ta mã hóa nó, nó trở thành:

https://www.example.com/my%20file.html

Thấy %20 đó không? Đó là phiên bản mã hóa của một khoảng trống. Đúng là cool phải không?

ASCII Control Characters Encoding (Mã hóa các ký tự điều khiển ASCII)

Bây giờ, hãy nói về các ký tự điều khiển ASCII. Đây là các ký tự đặc biệt điều khiển cách văn bản được xử lý. Trong URL encoding, chúng ta cần đặc biệt cẩn thận với những ký tự này.

Dưới đây là bảng các ký tự điều khiển ASCII phổ biến và phiên bản mã hóa của chúng:

Character	Encoded
NUL	%00
SOH	%01
STX	%02
ETX	%03

Ví dụ, nếu bạn cần bao gồm một ký tự NUL trong một URL (dù điều này hiếm khi xảy ra), bạn sẽ sử dụng %00.

Non-ASCII Control Characters Encoding (Mã hóa các ký tự điều khiển không phải ASCII)

Các ký tự không phải ASCII là những ký tự ngoài bộ ký tự tiêu chuẩn ASCII, như các chữ cái có dấu hoặc các ký tự từ các bảng chữ cái khác. Những ký tự này cũng cần được xử lý đặc biệt.

Hãy nhìn vào một ví dụ:

https://www.example.com/café

Khi mã hóa, nó trở thành:

https://www.example.com/caf%C3%A9

Ký tự é đã bị thay thế bằng %C3%A9. Điều này đảm bảo rằng các máy chủ trên toàn thế giới có thể chính xác giải mã ký tự này.

Reserved Characters Encoding (Mã hóa các ký tự được保留)

Một số ký tự có ý nghĩa đặc biệt trong URL. Chúng ta gọi chúng là các ký tự được保留, và chúng cần được mã hóa nếu chúng ta muốn sử dụng chúng như các ký tự thông thường.

Dưới đây là bảng các ký tự được保留 và phiên bản mã hóa của chúng:

Character	Encoded
!	%21
#	%23
$	%24
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C

Hãy nhìn vào một ví dụ:

https://www.example.com/search?q=fish&chips

URL này sử dụng & như một bộ phân cách giữa các tham số. Nếu chúng ta thực sự muốn tìm kiếm "fish & chips", chúng ta sẽ cần mã hóa nó như sau:

https://www.example.com/search?q=fish%26chips

Bây giờ máy chủ biết rằng chúng ta đang tìm kiếm "fish & chips"而不是 hai thuật ngữ tìm kiếm riêng biệt!

Unsafe Characters Encoding (Mã hóa các ký tự không an toàn)

Cuối cùng, hãy nói về các ký tự không an toàn. Đây là các ký tự có thể bị hiểu sai bởi các hệ thống khác nhau và luôn luôn cần được mã hóa.

Dưới đây là bảng một số ký tự không an toàn:

Character	Encoded
Space	%20
"	%22
<	%3C
>	%3E
#	%23
%	%25
{	%7B
}	%7D
\|	%7C
\	%5C
^	%5E
~	%7E

Hãy sử dụng chúng trong một ví dụ:

https://www.example.com/search?q=C++ Programming

Khi mã hóa đúng cách, nó trở thành:

https://www.example.com/search?q=C%2B%2B%20Programming

Chúng ta đã mã hóa các dấu + và khoảng trống để đảm bảo chúng được hiểu đúng.

Putting It All Together (Kết hợp tất cả)

Bây giờ chúng ta đã bao gồm tất cả các loại mã hóa, hãy thử một ví dụ phức tạp hơn:

https://www.example.com/search?q=Where's the café? (It's urgent!)

Khi mã hóa đầy đủ, nó trở thành:

https://www.example.com/search?q=Where%27s%20the%20caf%C3%A9%3F%20%28It%27s%20urgent%21%29

Wow, trông khác hẳn! Nhưng bây giờ nó an toàn để truyền tải qua Internet mà không có nguy cơ bị hiểu sai.

Conclusion (Kết luận)

Và thế là bạn đã có nó, các bạn! Bạn vừa bước những bước đầu tiên vào thế giới của URL encoding. Nhớ rằng, mặc dù nó có thể看起来 phức tạp ban đầu, nhưng tất cả đều nhằm đảm bảo rằng các URL của bạn có thể được chính xác giải mã không matter nơi chúng đến trên web.

Hãy nghĩ về URL encoding như một bộ máy dịch universal của Internet. Nó giúp các URL của bạn giao tiếp rõ ràng với các máy chủ trên toàn thế giới, không matter các ký tự đặc biệt hoặc khoảng trống nào chúng chứa.

Trong hành trình tiếp tục của bạn trong phát triển web, bạn sẽ thấy rằng việc hiểu URL encoding rất hữu ích. Nó sẽ giúp bạn tạo ra các liên kết vững chắc, xử lý đầu vào của người dùng một cách an toàn, và thậm chí gỡ rối các vấn đề liên quan đến URL phức tạp.

Tiếp tục thực hành, và sớm thôi URL encoding sẽ trở thành second nature đối với bạn. Chúc các bạn may mắn và các URL của bạn an toàn di chuyển qua web!

Credits: Image by storyset