Gửi Request tới Server trong AJAX

Như trong chương trước đã đề cập, đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với một Server. Vậy hoạt động gửi Request tới và nhận Response từ Server diễn ra như thế nào khi sử dụng đối tượng XMLHttpRequest. Chương này chúng ta cùng tìm hiểu khía cạnh thứ nhất: Gửi Request tới Server bởi sử dụng đối tượng XMLHttpRequest.

Gửi Request tới Server trong AJAX

Để gửi một Request tới một Server, chúng ta sử dụng các phương thức open() và send() của phương thức XMLHttpRequest đã được trình bày trong chương trước.

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

Phương thức	Tham số
open(phuong_thuc, url, async)	Xác định kiểu Request. Trong đó tham số phuong_thuc xác định kiểu Request (chẳng hạn GET, POST), tham số URL xác định vị trí file trên Server, tham số async xác định cách xử lý Request: true cho không đồng bộ hoặc false cho đồng bộ.
send()	Gửi Request tới Server (được sử dụng với GET).
send(string)	Gửi Request tới Server (được sử dụng với POST).

Nên sử dụng phương thức GET hay POST ?

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

Tuy nhiên, bạn cần sử dụng phương thức POST để tạo Request khi:

Update dữ liệu của Database trên Server.
Gửi một lượng dữ liệu lớn (phương thức POST không có giới hạn về kích cỡ dữ liệu được gửi, còn GET thì có).
Gửi dữ liệu nhập bởi người dùng (ví dụ như Password). Sử dụng POST thì an toàn hơn GET.

Cached Result là gì ?

Trước khi đi vào tìm hiểu một số ví dụ minh họa về cách gửi Request tới Server bởi sử dụng các phương thức của đối tượng XMLHttpRequest trong AJAX, mình xin giải thích khái niệm Cached Result.

Với các trình duyệt Web, mỗi khi bạn gửi một Request với một URL nào đó (có ID cụ thể) bởi sử dụng phương thức GET và nhận Response từ Server cho yêu cầu này và trình duyệt sẽ lưu phần phản hồi này (tương ứng với URL và ID trên). Lần tới, khi bạn tạo Request cũng với phương thức GET và URL này, thì trình duyệt sẽ tự động trả về Response đã lưu trước đó mà không tạo một Request tới Server nữa. Đây chính là Cached Result (tạm dịch: kết quả đã được lưu giữ vào bộ nhớ trình duyệt và lập trình viên thường gọi hiện tượng này là KÍCH).

Ví dụ sử dụng phương thức GET trong AJAX

Dưới đây là một ví dụ đơn giản để tạo một Request với phương thức GET.

<html>
<body>


<h2>Ky thuat AJAX</h2>


<button type="button" onclick="loadDoc()">Tao Request toi Server</button>


<p id="demo"></p>


<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "demo_get.asp", true);
  xhttp.send();
}
</script>


</body>
</html>

Với ví dụ trên, bạn có thể nhận một Cached Result. Để tránh điều này, bạn nên xác định thêm một ID duy nhất cho URL.

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

Nếu bạn muốn gửi một số thông tin nào đó bởi sử dụng phương thức GET này, bạn thêm thông tin này vào URL.

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

Ví dụ sử dụng phương thức POST trong AJAX

Tiếp theo là ví dụ minh họa cách gửi dữ liệu tới Server bởi sử dụng phương thức POST.

Ví dụ

<html>
<body>


<h2>Ky thuat AJAX</h2>


<button type="button" onclick="loadDoc()">Tao Request toi Server</button>


<p id="demo"></p>


<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("POST", "demo_post.asp", true);
  xhttp.send();
}
</script>


</body>
</html>

Để gửi dữ liệu (giả sử một HTML Form chẳng hạn), bạn sử dụng phương thức setRequestHeader() để thêm một HTTP Header. Sau đó xác định kiểu dữ liệu bạn muốn gửi trong phương thức send() của đối tượng XMLHttpRequest.

Phương thức	Tham số
setRequestHeader(header, value)	Tham số header xác định tên của Header, và tham số value xác định giá trị cho Header

Tham số URL trong phương thức open()

Tham số URL trong phương thức open() xác định địa chỉ của một file trên Server.

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

File này có thể là bất kỳ loại nào (ví dụ .txt hay .xml) hay bất kỳ dạng Script File nào (giống như .asp hoặc .php).

Tham số async của phương thức open()

AJAX là viết tắt của Asynchronous JavaScript and XML (tạm dịch: JavaScript và XML không đồng bộ) và để đối tượng XMLHttpRequest vận hành với kỹ thuật mới AJAX, bạn nên thiết lập tham số async của phương thức open() thành true:

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

Gửi các Request không đồng bộ là một bước cải tiến lớn cho các lập trình viên Web. Nhiều tác vụ cùng được thực hiện trên Server là rất tốn kém. Trước khi có AJAX, việc này có thể gây hiện tượng treo hoặc thậm chí dừng ứng dụng.

Với AJAX, JavaScript không cần phải đợi phản hồi Response được trả về từ Server, thay vào đó nó có thể:

Thực thi các tác vụ khác trong khi đợi Response từ Server.
Sau đó xử lý Response khi đã phần phản hồi này đã sẵn sàng trả về.

Trường hợp 1: async = true

Khi thiết lập tham số async là true, bạn nên xác định một hàm để thực thi khi Response đã sẵn sàng với sự kiện onreadystatechange:

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

Chúng ta sẽ tìm hiểu về sự kiện onreadystatechange trong một chương riêng.

Trường hợp 2: async = false

Việc thiết lập async thành false là một việc thực sự không nên làm và việc này chỉ thích hợp với một số Request nhỏ.

Bạn nên nhớ rằng JavaScript sẽ KHÔNG tiếp tục thực thi cho đến khi Response được trả về đã sẵn sàng. Nếu Server của bạn đang bận hoặc chậm chạp trong việc xử lý nhiều Request thì ứng dụng của bạn có thể bị treo hoặc bị dừng.

Ghi chú: khi thiết lập là false, bạn ĐỪNG viết một hàm để xử lý sự kiện onreadystatechange. Bạn nên đặt phần code ngay sau phương thức send() như dưới đây:

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

Gửi Request tới Server trong AJAX