× Giới thiệu Lịch khai giảng Tin tức Sản phẩm học viên

AJAX - XMLHttpRequest - Tìm hiểu các thông tin cơ bản

20/02/2024 01:31

Để gửi yêu cầu đến máy chủ, chúng ta sử dụng các phương thức open() và send() của đối XMLHttpRequest. Tìm hiểu sâu hơn trong bài viết dưới đây

Gửi yêu cầu đến máy chủ

Để gửi yêu cầu đến máy chủ, chúng ta sử dụng các phương thức open() và send() của đối XMLHttpRequesttượng:

xhttp.open("GET""ajax_info.txt"true);
xhttp.send();
Method Description
open(method, url, async) Specifies the type of request

method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)

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

Tham số url của open()phương thức là địa chỉ của một 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, như .txt và .xml hoặc các tệp tập lệnh máy chủ như .asp và .php (có thể thực hiện các hành động trên máy chủ trước khi gửi phản hồi lại).


Không đồng bộ - Đúng hay sai?

Yêu cầu máy chủ phải được gửi không đồng bộ.

Tham số async của phương thức open() phải được đặt thành true:

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

Bằng cách gửi không đồng bộ, JavaScript không phải đợi phản hồi của máy chủ mà thay vào đó có thể:

  • thực thi các tập lệnh khác trong khi chờ phản hồi của máy chủ
  • xử lý phản hồi sau khi phản hồi đã sẵn sàng

Giá trị mặc định cho tham số async là async = true.

Bạn có thể xóa tham số thứ ba khỏi mã của mình một cách an toàn.

XMLHttpRequest đồng bộ (async = false) không được khuyến nghị vì JavaScript sẽ ngừng thực thi cho đến khi phản hồi của máy chủ sẵn sàng. Nếu máy chủ bận hoặc chậm, ứng dụng sẽ bị treo hoặc dừng.


NHẬN hoặc ĐĂNG?

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

Tuy nhiên, hãy luôn sử dụng các yêu cầu POST khi:

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

NHẬN yêu cầu

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

Ví dụ

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

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

Ví dụ

xhttp.open("GET""demo_get.asp?t=" + Math.random());
xhttp.send();
Hãy tự mình thử »

Nếu bạn muốn gửi thông tin bằng GETphương thức này, hãy thêm thông tin vào URL:

Ví dụ

xhttp.open("GET""demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Hãy tự mình thử »

Cách máy chủ sử dụng đầu vào và cách máy chủ phản hồi yêu cầu sẽ được giải thích trong chương sau.


 

ĐĂNG yêu cầu

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

Ví dụ

xhttp.open("POST""demo_post.asp");
xhttp.send();
Hãy tự mình thử »

Để ĐĂNG dữ liệu như biểu mẫu HTML, hãy thêm tiêu đề HTTP bằng setRequestHeader(). Chỉ định dữ liệu bạn muốn gửi trong send()phương thức:

Ví dụ

xhttp.open("POST""ajax_test.asp");
xhttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Method Description
setRequestHeader(header, value) Adds HTTP headers to the request

header: specifies the header name
value: specifies the header value

Yêu cầu đồng bộ

Để thực hiện yêu cầu đồng bộ, hãy thay đổi tham số thứ ba trong open()phương thức thành false:

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

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

Vì mã sẽ đợi máy chủ hoàn thành nên không cần có onreadystatechange hàm:

Ví dụ

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