From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/url_api/index.html | 123 +++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 files/zh-cn/web/api/url_api/index.html (limited to 'files/zh-cn/web/api/url_api/index.html') diff --git a/files/zh-cn/web/api/url_api/index.html b/files/zh-cn/web/api/url_api/index.html new file mode 100644 index 0000000000..cecc627edd --- /dev/null +++ b/files/zh-cn/web/api/url_api/index.html @@ -0,0 +1,123 @@ +--- +title: URL API +slug: Web/API/URL_API +translation_of: Web/API/URL_API +--- +

{{DefaultAPISidebar("URL API")}}

+ +

URL API是一个URL标准的组件，它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念，并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留application/x-www-form-urlencoded {{Glossary("MIME type")}} 。

+ +

URL的概念和用法

+ +

URL标准的主要内容是由URL的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义，并指定了解析IP地址和DOM地址的算法。大多数开发人员更感兴趣的是API本身。

+ +

使用URL组件

+ +

给指定的URL创建一个 {{domxref("URL")}} 对象将解析URL并通过其属性对其组成部分的快速访问。

+ +
let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
+let host = addr.host;
+let path = addr.pathname;
+
+ +

上面的代码片段为您正在阅读的文章创建一个URL对象，然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中，这些字符串的值分别是developer.mozilla.org 和/en-US/docs/Web/API/URL_API。

+ +

修改URL

+ +

URL对象的大部分属性都是可设置的；您可以向它们写入新值来更改对象所表示的URL。例如，要创建一个URL对象并设置它的用户名：

+ +
let myUsername = "someguy";
+let addr = new URL("https://mysite.com/login");
+addr.username = myUsername;
+
+ +

设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值，而且更新整个URL。执行上面的代码片段后， {{domxref("URL.href", "addr.href")}} 的返回值是https://someguy@mysite.com/login。对于任何可写属性都是如此。

+ +

查询

+ +

 {{domxref("URL.search", "search")}} 属性在URL上包含URL的查询字符串部分。例如，如果URL是https://mysite.com/login?user=someguy&page=news，那么search 属性的值是?user=someguy&page=news。您还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值：

+ +
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);
+}
+ +

例如，在上面的代码片段中，从查询中提取用户名和目标页面，并将其传递给适当的函数，站点代码使用这些函数登录并将用户路由到站点的目的页面。

+ +

URLSearchParams中的其他函数允许修改改、添加和删除键和值，甚至对参数列表进行排序。

+ +

URL API 接口

+ +

URL API是一个简单的API，它的名字只有几个接口：

+ +
+ +
+ +

该规范的旧版本包括一个名为{{domxref("URLUtilsReadOnly")}}的接口，该接口已经合并到{{domxref("WorkerLocation")}} 接口中。

+ +

例子

+ +

如果希望处理URL中包含的参数，可以手动进行处理，但是创建一个URL对象更容易。下面的fillTableWithParameters()函数接受一个表示{{HTMLElement("table")}}的   {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中，每个行对应参数中找到的键，第一列包含键，第二列包含值。

+ +

注意，在生成表之前调用  {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。

+ +
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);
+  };
+}
+ +

在 found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向URL添加参数，就可以在表中看到它们。例如，试试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态描述
{{SpecName('URL')}}{{Spec2('URL')}}WHATWG 规范
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.URL")}}

+
+ +

另见

+ + -- cgit v1.2.3-54-g00ecf