Gửi một yêu cầu đến server trong AJAX

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

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

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

xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

GET hoặc POST

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, luôn luôn sử dụng yêu cầu POST khi:

• Tệp lưu trong bộ nhớ cache không phải là một lựa chọn (cập nhật tệp hoặc cơ sở dữ liệu trên máy chủ).
• Gửi một số lượng lớn dữ liệu đến máy chủ (POST không có giới hạn 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.

Yêu cầu GET

Yêu cầu GET đơn giản:

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

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

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

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

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

Yêu cầu POST

Yêu cầu POST đơn giản:

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

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

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

Url – Một tệp trên máy chủ

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

xhttp.open(“GET”, “ajax_test.asp”, true);

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

Không đồng bộ – True hay False?

Yêu cầu máy chủ nên được gửi không đồng bộ. Thông số async của phương thức open() nên đượ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 chờ đợi phản hồi của máy chủ, thay vào đó có thể:

• Thực hiện các tập lệnh khác trong khi chờ phản hồi của máy chủ
• Đối phó với các phản ứng sau khi phản ứng đã sẵn sàng

Thuộc tính onreadystatechange

Với đối tượng XMLHttpRequest, bạn có thể định nghĩa một hàm sẽ được thực hiện khi yêu cầu nhận được một câu trả lời. Hàm được định nghĩa trong thuộc tính onreadystatechange của đối tượng XMLHttpResponse:

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();

Yêu cầu đồng bộ

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

xhttp.open(“GET”, “ajax_info.txt”, false);

Đôi khi async = false được sử dụng để thử nghiệm 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 cho máy chủ hoàn thành, không cần phải có một hàm onreadystatechange:

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

Không nên dùng XMLHttpRequest đồng bộ (async = false) vì JavaScript sẽ ngừng thực hiện cho đến khi đáp ứng của máy chủ đã sẵn sàng. Nếu máy chủ đang bận hoặc chậm, ứng dụng sẽ treo hoặc dừng.

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

Các 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 các yêu cầu đồng bộ và có thể có ngoại lệ InvalidAccessError khi nó xảy ra.