HTML5 – URL

HTML5 – URL

HTML5中的URL,即统一资源定位符,在互联网中广泛应用。在具体开发中,URL可以用在很多地方,比如a标签的href属性、img标签的src属性等等。在HTML中,URL用字符串来表示,它包含协议、主机、端口以及资源路径等信息。

URL的基本结构

一个URL由四个部分组成:

  • 协议(protocol) – 决定了要如何处理要获取的文件或者数据。通常是http或https协议。
  • 主机名(hostname) – 指定了提供服务的机器名或者IP地址。
  • 端口(port) – 指定了要使用的端口号(这个部分可以省略,默认为使用80端口)。
  • 资源路径(resource path) – 定义了需要获取的特定资源的位置,以及任何查询参数(query parameter)。

下面是一个例子:

http://www.example.com:8080/path/to/file.html?query=123&search=hello

这个URL表示了一个使用http协议访问www.example.com机器上位于8080端口的文件/file.html,并且有查询参数query和search。

URL的编码

在URL中,一些字符需要被编码,在URL中使用百分比编码来代替特殊符号。URL编码是将不安全的字符用%后跟两个表示该字符ASCII码的十六进制数来替换的过程。例如,空格字符被%20替换,加号字符被%2B替换,等号字符被%3D替换。

在JavaScript中,可以使用encodeURI()encodeURIComponent()两个API进行URL编码操作。

encodeURI()函数用于对完整的URL进行编码,除ASCII字母、数字、标点符号(- _ . ! ~ * ‘ ( ))外,所有字符都将被替换成%XX格式。不过,该函数不会对“/”,“:”和“#”进行编码。下面是一个例子:

var uri = "http://www.example.com/\:8080/path/to/file.html";
var encodedUri = encodeURI(uri);
console.log(encodedUri); // "http://www.example.com/:8080/path/to/file.html"

encodeURIComponent()函数用于对URL中的参数进行编码。该函数将字母、数字、标点符号和以下字符(- _ . ! ~ * ‘ ( ))以外的所有字符替换成%XX格式,包括用于URL的特殊字符如“/”,“:”,“#”和“?”。下面是一个例子:

var uri = "http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30";
var encodedName = encodeURIComponent("Mr. John Smith");
var encodedAge = encodeURIComponent("30");
var encodedUri = uri + "?name=" + encodedName + "&age=" + encodedAge;
console.log(encodedUri);
// http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30

URL的解码

在JavaScript中,可以使用decodeURI()decodeURIComponent()两个API进行URL解码操作。

decodeURI()函数用于对完整的URL进行解码,将被编码的字符还原成原始字符。不过,该函数不会对“/”,“:”和“#”进行解码。下面是一个例子:

var encodedUri = "http://www.example.com/:8080/path/to/file.html";
var uri = decodeURI(encodedUri);
console.log(uri); // "http://www.example.com/:8080/path/to/file.html"

decodeURIComponent()函数用于对URL中的参数进行解码。下面是一个例子:

var encodedName = "Mr.%20John%20Smith";
var encodedAge = "30";
var encodedUri = "http://www.example.com/path/to/file.html?name=" + encodedName + "&age=" + encodedAge;
var name = decodeURIComponent(encodedName);
var age = decodeURIComponent(encodedAge);
console.log(name); // "Mr. John Smith"
console.log(age); // "30"

URLSearchParams对象

在HTML5中,引入了一个新的URL处理API – URLSearchParams对象。这个对象可用于处理URL中的查询参数,并提供了多个方法来处理这些参数。

下面是一个例子:

var urlSearchParams = new URLSearchParams("?name=Mr.%20John%20Smith&age=30");
console.log(urlSearchParams.get("name")); // "Mr. John Smith"
console.log(urlSearchParams.get("age")); // "30"

以上代码创建了一个URLSearchParams对象,并从其中获取了查询参数“name”和“age”的值。

除了基本的get方法,还有以下方法:

  • set(key, value) – 设置指定key的value值,如果存在,则覆盖原值。
  • append(key, value) – 在指定key的末尾追加一个value值。
  • delete(key) – 删除指定key的所有values。
  • getAll(key) – 返回一个指定key的所有values的数组。
  • has(key) – 如果存在指定key,则返回true,否则返回false。

下面是一个使用URLSearchParams对象的示例:

var urlSearchParams = new URLSearchParams("?category=shoes&size=xl&size=l&color=red");
urlSearchParams.set("size", "m");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red"
urlSearchParams.append("size", "s");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red&size=s"
urlSearchParams.delete("color");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&size=s"
console.log(urlSearchParams.getAll("size")); // ["m", "s"]
console.log(urlSearchParams.has("category")); // true
console.log(urlSearchParams.has("color")); // false

结论

在HTML5中,URL作为互联网的重要部分,有着广泛的应用。了解URL的基本结构和编码原理,可以更好地理解URL的作用和使用方式。在JavaScript中,使用encodeURI()和decodeURI()可以对URL进行编解码操作,使用URLSearchParams对象可以方便地处理URL中的查询参数。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程