URL API
The URL API is a component of the URL standard, which defines what constitutes a valid Uniform Resource Locator and the API that accesses and manipulates URLs. The URL standard also defines concepts such as domains, hosts, and IP addresses, and also attempts to describe in a standard way the legacy application/x-www-form-urlencoded
MIME type used to submit web forms' contents as a set of key/value pairs.
Mô hình URL và cách sử dụng
Phần lớn tiêu chuẩn URL được lấy theo định nghĩa của URL cùng cấu trúc và phân tích cú pháp. Nó cũng bao gồm các định nghĩa về các thuật ngữ khác nhau liên quan đến việc đánh địa chỉ các máy tính trên mạng, các thuật toán để phân tích địa chỉ IP và địa chỉ DOM được chỉ định.
Truy cập component URL
Tạo object URL
đối với một URL đã cho sẽ phân tích cú pháp URL và cung cấp quyền truy cập nhanh vào các thành phần của nó.
let addr = new URL("https://wiki.developer.mozilla.org/vi/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;
Mã trên tạo ra 1 object URL
cho bài viết bạn đang đọc, rồi lấy thuộc tính host
và pathname
. Trong tình huống trên, các giá trị tương ứng lần lượt là wiki.developer.mozilla.org
và /vi/docs/Web/API/URL_API
.
Thay đổi URL
Hầu hết các thuộc tính của URL là cố định; bạn có thể viết các giá trị mới cho chúng để thay đổi URL. Ví dụ: để tạo URL mới và đặt tên người dùng:
let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;
Đặt giá trị của username
không chỉ thay đổi giá trị của thuộc tính, mà còn thay đổi cả đường dẫn URL. Sau khi thực thi đoạn code, giá trị trả về của addr.href
là https://someguy@mysite.com/login
. Điều này đúng với mọi thuộc tính có thể ghi.
Truy vấn
Thuộc tính search
trong URL
chứa các giá trị truy vấn của URL. Lấy ví dụ, nếu đường dẫn URL là https://mysite.com/login?user=someguy&page=news
, thì giá trị của thuộc tính search
là ?user=someguy&page=news
. Bạn có thể kiểm tra các giá trị của mỗi tham số với URLSearchParams
là object của phương thức 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);
}
Với ví dụ trên, username và trang đích được lấy từ query và chuyển vào trong function được dùng để điều hướng người dùng đăng nhập và chuyển tới trang đích mong muốn.
Other functions within URLSearchParams
let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.
URL API interfaces
The URL API is a simple one, with only a couple of interfaces to its name:
Older versions of the specification included an interface called URLUtilsReadOnly
, which has since been merged into the WorkerLocation
interface.
Ví dụ
If you want to process the parameters included in a URL, you could do it manually, but it's much easier to create a URL
object to do it for you. The fillTableWithParameters()
function below takes as input a HTMLTableElement
object representing a <table>
. Rows are added to the table, one for each key found in the parameters, with the first column containing the key's name, and the second column having the value.
Note the call to URLSearchParams.sort()
to sort the parameter list before generating the table.
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);
};
}
A working version of this example can be found on Glitch. Just add parameters to the URL when loading the page to see them in the table. For instance, try https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable
.
Quy chuẩn
Specification | Status | Comment |
---|---|---|
URL | Living Standard | WHATWG specification |
Tương thích trình duyệt
BCD tables only load in the browser