blob: cecc627eddfef11be62bfeb6c4f6abba2b90a863 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: URL API
slug: Web/API/URL_API
translation_of: Web/API/URL_API
---
<p>{{DefaultAPISidebar("URL API")}}</p>
<p>URL API是一个URL标准的组件，它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留<code>application/x-www-form-urlencoded</code> {{Glossary("MIME type")}} 。</p>
<h2 id="URL的概念和用法">URL的概念和用法</h2>
<p>URL标准的主要内容是由URL的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义，并指定了解析IP地址和DOM地址的算法。大多数开发人员更感兴趣的是API本身。</p>
<h3 id="使用URL组件">使用URL组件</h3>
<p>给指定的URL创建一个 {{domxref("URL")}} 对象将解析URL并通过其属性对其组成部分的快速访问。</p>
<pre class="brush: js notranslate">let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;
</pre>
<p>上面的代码片段为您正在阅读的文章创建一个<code>URL</code>对象，然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中，这些字符串的值分别是<code>developer.mozilla.org</code> 和<code>/en-US/docs/Web/API/URL_API</code>。</p>
<h3 id="修改URL">修改URL</h3>
<p><code>URL</code>对象的大部分属性都是可设置的；您可以向它们写入新值来更改对象所表示的URL。例如，要创建一个URL对象并设置它的用户名：</p>
<pre class="brush: js notranslate">let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;
</pre>
<p>设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值，而且更新整个URL。执行上面的代码片段后， {{domxref("URL.href", "addr.href")}} 的返回值是<code>https://someguy@mysite.com/login</code>。对于任何可写属性都是如此。</p>
<h3 id="查询">查询</h3>
<p> {{domxref("URL.search", "search")}} 属性在URL上包含URL的查询字符串部分。例如，如果URL是<code>https://mysite.com/login?user=someguy&page=news</code>，那么<code>search</code> 属性的值是<code>?user=someguy&page=news</code>。您还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值：</p>
<pre class="notranslate">let addr = new URL("https://mysite.com/login?user=someguy&page=news");
try {
loginUser(addr.searchParams.get("user"));
gotoPage(addr.searchParams.get("page"));
} catch(err) {
showErrorMessage(err);
}</pre>
<p>例如，在上面的代码片段中，从查询中提取用户名和目标页面，并将其传递给适当的函数，站点代码使用这些函数登录并将用户路由到站点的目的页面。</p>
<p><code>URLSearchParams</code>中的其他函数允许修改改、添加和删除键和值，甚至对参数列表进行排序。</p>
<h2 id="URL_API_接口">URL API 接口</h2>
<p>URL API是一个简单的API，它的名字只有几个接口：</p>
<div class="index">
<ul>
<li></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/URL"><code>URL</code></a></li>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/URLSearchParams"><code>URLSearchParams</code></a></li>
<li></li>
</ul>
</div>
<p>该规范的旧版本包括一个名为{{domxref("URLUtilsReadOnly")}}的接口，该接口已经合并到{{domxref("WorkerLocation")}} 接口中。</p>
<h2 id="例子">例子</h2>
<p>如果希望处理URL中包含的参数，可以手动进行处理，但是创建一个URL对象更容易。下面的<code>fillTableWithParameters()</code>函数接受一个表示{{HTMLElement("table")}}的 {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中，每个行对应参数中找到的键，第一列包含键，第二列包含值。</p>
<p>注意，在生成表之前调用 {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。</p>
<pre class="brush: js notranslate">function fillTableWithParameters(tbl) {
let url = new URL(document.location.href);
url.searchParams.sort();
let keys = url.searchParams.keys();
for (let key of keys) {
let val = url.searchParams.get(key);
let row = document.createElement("tr");
let cell = document.createElement("td");
cell.innerText = key;
row.appendChild(cell);
cell = document.createElement("td");
cell.innerText = val;
row.appendChild(cell);
tbl.appendChild(row);
};
}</pre>
<p>在 <a href="https://url-api.glitch.me/">found on Glitch</a>上可以找到这个例子的工作版本。只要在加载页面时向URL添加参数，就可以在表中看到它们。例如，试试<code><a href="https://url-api.glitch.me/?from=mdn&excitement=high&likelihood=inconceivable">https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable</a></code>。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">描述</th>
</tr>
<tr>
<td>{{SpecName('URL')}}</td>
<td>{{Spec2('URL')}}</td>
<td>WHATWG 规范</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">此页面上的兼容性表是由结构化数据生成的。如果您想贡献数据，请查看<a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a>并向我们发送pull request。</div>
<p>{{Compat("api.URL")}}</p>
</div>
<h2 id="另见">另见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
<li>CSS {{cssxref("<url>")}} type</li>
</ul>
|
