AJAX - XMLHttpRequest

Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với máy chủ.

Gửi yêu cầu cho máy chủ

Nếu cần gửi yêu cầu cho máy chủ, chúng ta sử dụng đối tượng XMLHttpRequest open() và send() Phương pháp:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Phương thức Mô tả
open(method, url, async)

Quy định loại yêu cầu

  • method：Loại yêu cầu: GET hay POST
  • url：Vị trí máy chủ (tệp)
  • async：true (đồng bộ) hoặc false (chậm)
send() Gửi yêu cầu cho máy chủ (sử dụng GET)
send(string) Gửi yêu cầu cho máy chủ (sử dụng POST)

GET hay POST?

GET đơn giản và nhanh hơn POST, có thể sử dụng trong hầu hết các trường hợp.

Nhưng, hãy sử dụng POST luôn trong các trường hợp sau:

  • Tệp lưu trữ không phải là tùy chọn (cập nhật tệp hoặc cơ sở dữ liệu trên máy chủ)
  • Gửi dữ liệu lớn cho máy chủ (POST không có giới hạn kích thước)
  • Gửi đầu vào người dùng (có thể chứa ký tự không biết), POST mạnh mẽ và an toàn hơn GET

Yêu cầu GET

Một yêu cầu GET đơn giản:

Mô hình

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Thử trực tiếp

Trong ví dụ trên, bạn có thể nhận được kết quả lưu trữ. Để tránh trường hợp này, hãy thêm một ID duy nhất vào URL:

Mô hình

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Thử trực tiếp

Nếu bạn cần gửi thông tin bằng phương pháp GET, hãy thêm thông tin này vào URL:

Mô hình

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Thử trực tiếp

Yêu cầu POST

Một yêu cầu POST đơn giản:

Mô hình

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Thử trực tiếp

Nếu bạn muốn gửi dữ liệu POST như biểu mẫu HTML, hãy thông qua setRequestHeader() Thêm một phần đầu HTTP. Vui lòng ở trong send() Phương pháp quy định dữ liệu bạn cần gửi:

Mô hình

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Thử trực tiếp

Phương thức Mô tả
setRequestHeader(header, value)

Thêm HTTP đầu vào yêu cầu

  • header：Định nghĩa tên đầu
  • value：Định nghĩa giá trị đầu

url - Tệp trên máy chủ

của phương thức open() url tham số, là địa chỉ tệp trên máy chủ:

xhttp.open("GET", "ajax_test.asp", true);

Tệp này có thể là bất kỳ loại tệp nào, chẳng hạn như .txt và .xml, hoặc tệp script trên máy chủ, chẳng hạn như .asp và .php (họ có thể thực hiện các hoạt động trên máy chủ trước khi gửi phản hồi lại).

异步 - true hay false?

Nếu cần gửi yêu cầu асинхron:open() của phương thức async tham số phải được đặt thành true:

xhttp.open("GET", "ajax_test.asp", true);

Việc gửi yêu cầu асинхрон là một bước tiến lớn đối với các nhà phát triển web. Nhiều nhiệm vụ được thực hiện trên máy chủ rất tốn thời gian. Trước khi có AJAX, việc này có thể dẫn đến ứng dụng bị treo hoặc dừng lại.

Bằng cách gửi theo cách асинхрон, JavaScript không cần chờ phản hồi từ máy chủ mà có thể:

  • Thực hiện các đoạn mã khác trong khi chờ phản hồi từ máy chủ
  • Xử lý phản hồi khi phản hồi sẵn sàng

Thuộc tính onreadystatechange

Bằng cách sử dụng đối tượng XMLHttpRequest, bạn có thể định nghĩa hàm sẽ được thực hiện khi yêu cầu nhận được phản hồi.

Chức năng này được định nghĩa trong đối tượng XMLHttpResponse: onreadystatechange định nghĩa trong thuộc tính:

Mô hình

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Thử trực tiếp

Bạn sẽ học thêm về onreadystatechange trong các chương sau.

Yêu cầu đồng bộ

Nếu cần thực hiện yêu cầu đồng bộ, hãy đặt open() Tham số thứ ba trong phương pháp được thiết lập là false:

xhttp.open("GET", "ajax_info.txt", false);

Đôi khi async = false được sử dụng để kiểm tra nhanh chóng. Bạn cũng có thể thấy yêu cầu đồng bộ trong mã JavaScript cũ hơn.

Do mã sẽ chờ máy chủ hoàn thành, vì vậy không cần hàm onreadystatechange:

Mô hình

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Thử trực tiếp

Chúng tôi không khuyến khích sử dụng XMLHttpRequest đồng bộ (async = false), vì JavaScript sẽ dừng thực thi cho đến khi phản hồi từ máy chủ sẵn sàng. Nếu máy chủ bận rộn hoặc chậm, ứng dụng sẽ treo hoặc dừng lại.

XMLHttpRequest đồng bộ đang được loại bỏ khỏi các tiêu chuẩn Web, nhưng quá trình này có thể mất nhiều năm.

Công cụ phát triển hiện đại được khuyến khích cảnh báo về việc sử dụng yêu cầu đồng bộ, và khi tình trạng này xảy ra, có thể ném ngoại lệ InvalidAccessError.