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

Tương thích trình duyệt

Xem thêm

• Fetch API
• CSS <url> type