掌握 URL 编码技巧，提升 Web 开发能力（十八）

admin
前端开发
2天前
6热度
0评论

在现代 Web 开发中，URL 编码是一项基本但至关重要的技能。本文将详细介绍 URL 编码的基本原理、实现方法以及相关的技术细节，帮助你更好地理解和应用这一技术。

什么是 URL？

URL（Uniform Resource Locator，统一资源定位器）是互联网上每个资源的唯一地址。例如，https://www.example.com 就是一个典型的 URL。Web 浏览器通过 URL 从 Web 服务器请求页面，从而实现用户与互联网资源的交互。

URL 编码的重要性

URL 只能使用 ASCII 字符集进行传输。然而，许多特殊字符和非英文字符不在 ASCII 范围内，因此需要进行编码才能通过互联网正确传输。URL 编码通过将这些字符转换为 ASCII 格式的百分号编码（%XX），确保数据在传输过程中不会丢失或损坏。

URL 编码的基本规则

空格：通常被编码为 %20 或 +。
特殊字符：如 !、@、# 等，会被编码为相应的百分号编码。
非 ASCII 字符：如中文、日文等，会被编码为多个百分号编码。

实践 URL 编码

为了更好地理解 URL 编码，我们可以通过一个简单的示例来演示其工作原理。假设你有一个表单，用户输入的内容需要通过 URL 发送到服务器。当用户点击“提交”按钮时，浏览器会对输入内容进行 URL 编码，然后发送给服务器。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

<title>URL 编码示例</title>
</head>
<body>
    <form action="/submit" method="get">
        <label for="inputText">输入内容:</label>
        <input type="text" id="inputText" name="inputText">
        <button type="submit">提交</button>
    </form>
</body>
</html>

当你在输入框中输入 Hello World! 并点击提交按钮时，浏览器会将 URL 编码为 https://example.com/submit?inputText=Hello%20World%21。

URL 编码函数

不同的编程语言提供了多种方法来进行 URL 编码。以下是几种常见语言的 URL 编码函数示例：

JavaScript

const originalString = "Hello World!";
const encodedString = encodeURI(originalString);
console.log(encodedString); // 输出: Hello%20World!

PHP

$originalString = "Hello World!";
$encodedString = rawurlencode($originalString);
echo $encodedString; // 输出: Hello%20World!

ASP

<%
Dim originalString, encodedString
originalString = "Hello World!"
encodedString = Server.URLEncode(originalString)
Response.Write(encodedString) ' 输出: Hello%20World!
%>

URL 编码参考手册

以下是一些常见字符及其对应的 URL 编码：

ASCII 字符	URL-编码
空格	%20
!	%21
"	%22
#	%23
$	%24
%	%25
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
-	%2D
.	%2E
/	%2F
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3A
;	%3B
<	%3C
=	%3D
>	%3E
?	%3F
@	%40
A	%41
B	%42
C	%43
D	%44
E	%45
F	%46
G	%47
H	%48
I	%49
J	%4A
K	%4B
L	%4C
M	%4D
N	%4E
O	%4F
P	%50
Q	%51
R	%52
S	%53
T	%54
U	%55
V	%56
W	%57
X	%58
Y	%59
Z	%5A
[	%5B
\	%5C
]	%5D
^	%5E
_	%5F
	%60
a	%61
b	%62
c	%63
d	%64
e	%65
f	%66
g	%67
h	%68
i	%69
j	%6A
k	%6B
l	%6C
m	%6D
n	%6E
o	%6F
p	%70
q	%71
r	%72
s	%73
t	%74
u	%75
v	%76
w	%77
x	%78
y	%79
z	%7A
{	%7B
\|	%7C
}	%7D
~	%7E
	%7F

ASCII 控制字符的 URL 编码

ASCII 控制字符最初用于控制硬件设备，但在 URL 中这些字符没有实际用途，因此需要进行编码。

| ASCII 字符 | 描述 | URL-编码 |

| --- | --- | --- | | NUL | 空字符 | %00 | | SOH | 开始标题 | %01 | | STX | 开始文本 | %02 | | ETX | 结束文本 | %03 | | EOT | 结束传输 | %04 | | ENQ | 查询 | %05 | | ACK | 应答 | %06 | | BEL | 铃声 | %07 | | BS | 退格 | %08 | | HT | 水平制表 | %09 | | LF | 换行 | %0A | | VT | 垂直制表 | %0B | | FF | 换页 | %0C | | CR | 回车 | %0D | | SO | 转出 | %0E | | SI | 转入 | %0F | | DLE | 数据链路转义 | %10 | | DC1 | 设备控制 1 | %11 | | DC2 | 设备控制 2 | %12 | | DC3 | 设备控制 3 | %13 | | DC4 | 设备控制 4 | %14 | | NAK | 否定应答 | %15 | | SYN | 同步 | %16 | | ETB | 结束传输块 | %17 | | CAN | 取消 | %18 | | EM | 结束介质 | %19 | | SUB | 替换 | %1A | | ESC | 逃逸 | %1B | | FS | 文件分隔符 | %1C | | GS | 组分隔符 | %1D | | RS | 记录分隔符 | %1E | | US | 单位分隔符 | %1F |

ISO 语言代码

在 HTML 和 XHTML 中，可以通过 lang 属性声明页面的主要语言，这有助于搜索引擎和浏览器更好地理解和处理页面内容。

HTML 示例

html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;英语页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;这是一个英语页面。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

XHTML 示例

html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;英语页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;这是一个英语页面。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

ISO 639-1 语言代码

ISO 639-1 标准为各种语言定义了缩略词，这些代码可以在 HTML 和 XHTML 中的 lang 和 xml:lang` 属性中使用。

语言	ISO 代码
Abkhazian	ab
Afar	aa
Afrikaans	af
Albanian	sq
Amharic	am
Arabic	ar
Aragonese	an
Armenian	hy
Assamese	as
Aymara	ay
Azerbaijani	az
Bashkir	ba
Basque	eu
Bengali (Bangla)	bn
Bhutani	dz
Bihari	bh
Bislama	bi
Breton	br
Bulgarian	bg
Burmese	my
Byelorussian (Belarusian)	be
Cambodian	km
Catalan	ca
Cherokee
Chewa
Chinese (简体)	zh
Chinese (繁体)	zh
Corsican	co
Croatian	hr
Czech	cs
Danish	da
Divehi
Dutch	nl
Edo
English	en
Esperanto	eo
Estonian	et
Faeroese	fo
Farsi	fa
Fiji	fj
Finnish	fi
Flemish
French	fr
Frisian	fy
Fulfulde
Galician	gl
Gaelic (Scottish)	gd
Gaelic (Manx)	gv
Georgian	ka
German	de
Greek	el
Greenlandic	kl
Guarani	gn
Gujarati	gu
Haitian Creole	ht
Hausa	ha
Hawaiian
Hebrew	he, iw
Hindi	hi
Hungarian	hu
Ibibio
Icelandic	is
Ido	io
Igbo
Indonesian	id, in
Interlingua	ia
Interlingue	ie
Inuktitut	iu
Inupiak	ik
Irish	ga
Italian	it
Japanese	ja
Javanese	jv
Kannada	kn
Kanuri
Kashmiri	ks
Kazakh	kk
Kinyarwanda (Ruanda)	rw
Kirghiz	ky
Kirundi (Rundi)	rn
Konkani
Korean	ko
Kurdish	ku
Laothian	lo
Latin	la
Latvian (Lettish)	lv
Limburgish ( Limburger)	li

Lingala	ln		Lithuanian	lt		Macedonian	mk		Malagasy	mg		Malay	ms		Malayalam	ml
Maltese	mt
Maori	mi
Marathi	mr
Moldavian	mo
Mongolian	mn
Nauru	na
Nepali	ne
Norwegian	no
Occitan	oc
Oriya	or
Oromo (Afaan Oromo)	om
Papiamentu
Pashto (Pushto)	ps
Polish	pl
Portuguese	pt
Punjabi	pa
Quechua	qu
Rhaeto-Romance	rm
Romanian	ro
Russian	ru
Sami (Lappish)
Samoan	sm
Sangro	sg
Sanskrit	sa
Serbian	sr
Serbo-Croatian	sh
Sesotho	st
Setswana	tn
Shona	sn
Sichuan Yi	ii
Sindhi	sd
Sinhalese	si
Siswati	ss
Slovak	sk
Slovenian	sl
Somali	so
Spanish	es
Sundanese	su
Swahili (Kiswahili)	sw
Swedish	sv
Syriac
Tagalog	tl
Tajik	tg
Tamazight
Tamil	ta
Tatar	tt
Telugu	te
Thai	th
Tibetan	bo
Tigrinya	ti
Tonga	to
Tsonga	ts
Turkish	tr
Turkmen	tk
Twi	tw
Uighur	ug
Ukrainian	uk
Urdu	ur
Uzbek	uz
Venda
Vietnamese	vi
Volapük	vo
Wallon	wa
Welsh	cy
Wolof	wo
Xhosa	xh
Yi
Yiddish	yi, ji
Yoruba	yo
Zulu	zu

HTTP 状态码

当浏览器从 Web 服务器请求服务时，服务器会返回一个 HTTP 状态码，表示请求的结果。以下是一些常见的 HTTP 状态码及其描述：

1xx: 信息

消息	描述
100 Continue	服务器仅接收到部分请求，如果服务器没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
103 Checkpoint	用于 PUT 或者 POST 请求恢复

2xx: 成功

消息	描述
200 OK	请求成功。
201 Created	请求成功并且服务器创建了新的资源。
202 Accepted	请求已被接受，但尚未处理完成。
204 No Content	服务器成功处理了请求，但没有返回任何内容。

3xx: 重定向

消息	描述
301 Moved Permanently	请求的资源已被永久移动到新位置。
302 Found	请求的资源临时从不同的 URI 响应请求。
304 Not Modified	请求的资源未被修改，客户端可以使用缓存的版本。

4xx: 客户端错误

消息	描述
400 Bad Request	服务器无法理解请求的格式。
401 Unauthorized	请求要求用户的身份认证。
403 Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求。
404 Not Found	请求的资源不存在。

5xx: 服务器错误

消息	描述
500 Internal Server Error	服务器遇到了不知道如何处理的情况。
501 Not Implemented	服务器不支持请求的功能。
502 Bad Gateway	服务器作为网关或代理，从上游服务器收到了无效的响应。
503 Service Unavailable	服务器目前无法使用（由于超载或停机维护）。

总结

通过本文的介绍，你应该对 URL 编码有了更深入的理解。URL 编码是确保数据在互联网上传输时保持完整性和正确性的关键机制。了解并掌握 URL 编码的方法和技术，对于 Web 开发者来说是非常重要的。希望本文对你有所帮助！