AJAX - Gửi yêu cầu đến máy chủ
Đố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áy chủ
Để gửi yêu cầu đến máy chủ, chúng tôi 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();
| 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) |
NHẬN hay ĐĂNG?
GET đơn giản hơ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 yêu cầu ĐĂNG khi:
- Tệp được lưu trong bộ nhớ cache 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 thông tin đầ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 yêu cầu GET đơn giản:
Thí dụ
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Trong ví dụ trên, bạn có thể nhận được một kết quả được lưu trong bộ nhớ cache. Để tránh điều này, hãy thêm một ID duy nhất vào URL:
Thí dụ
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:
Thí dụ
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
ĐĂNG yêu cầu
Một yêu cầu ĐĂNG đơn giản:
Thí dụ
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Để ĐĂNG dữ liệu như biểu 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 ():
Thí dụ
xhttp.open("POST", "demo_post2.asp", true);
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 |
Url - Tệp trên máy chủ
Tham số url của phương thức open (), là địa chỉ của 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, như .txt và .xml hoặc tệp kịch bản 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 trở 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
Thuộc tính onreadystatechange
Với đối tượng XMLHttpRequest, bạn có thể xác định một hàm sẽ được thực thi khi yêu cầu nhận được câu trả lời.
Hàm được định nghĩa trong thuộc tính onreadystatechange của đối tượng XMLHttpResponse:
Thí dụ
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();
Tệp "ajax_info.txt" được sử dụng trong ví dụ trên, là một tệp văn bản đơn giản và trông giống như sau:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Bạn sẽ tìm hiểu thêm về onreadystatechange trong chương sau.
Yêu cầu đồng bộ
Để thực hiện một yêu cầu đồng bộ, hãy 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 để 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 hàm onreadystatechange:
Thí dụ
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Không nên sử dụng XMLHttpRequest đồng bộ (async = false) 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.
Synchronous XMLHttpRequest đang trong quá trình bị xóa 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ụ dành cho nhà 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ể đưa ra ngoại lệ InvalidAccessError khi nó xảy ra.