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 ta sẽ có một câu hỏi là nó sẽ sử dụng phương thức nào để gửi yêu cầu tới máy chủ đây? Ta sẽ tìm hiểu về nó trong bài này nhé!

1. Gửi yêu cầu đến máy chủ trong Ajax

Như trong bài trước ta đã được học để gửi yêu cầu đến máy chủ, ta sử dụng phương thức open() và send() của đối tượng XMLHttpRequest .

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 ).

Ví dụ:

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

Tham số url của phương thức open() là một địa chỉ đến một tệp trên máy chủ. 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).

2. Sử dụng không đồng bộ – Asynchronous

Yêu cầu được gửi đến 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ộ, Js 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

Chú ý

Giá trị mặc định cho tham số async là async=true . Không nên sử dụng XMLHttpRequest đồng bộ với async=false vì Js 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 dẫn đến nhiều vấn đề không tốt. Đồng thời ta có thể xóa tham số thứ ba một cách an toàn khỏi mã của mình.

Đôi khi để thực hiện một yêu cầu đồng bộ, ta dùng tham số thứ ba trong phương thức open() thành false .Nó được sử dụng để kiểm tra nhanh. Ta cũng sẽ tìm thấy các yêu cầu đồng bộ trong mã Js cũ hơn. Vì mã sẽ đợi máy chủ hoàn thành nên không cần hàm onreadystatechange

<h2>XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Click</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax_info.txt", false);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

Tuy nhiên vẫn nên đặt nó thành true là chủ yếu nhé!

3. Phương thức post và get trong XMLHttpRequest

3.1. Phương thức Get

Phương thức GET thường được sử dụng để lấy hoặc truy xuất một số loại thông tin từ máy chủ mà không yêu cầy bất kì thao tác hoặc thay đổi nào trong cơ sở dữ liệu. Các trình duyệt sẽ lưu trữ kết quả từ GET và nếu cùng một yêu cầu GET được thực hiện lại, chúng sẽ hiển thị kết quả được lưu trong bộ nhớ cache thay vì chạy lại toàn bộ yêu cầu.

Đây không phải là một lỗ hổng trong việc xử lý trình duyệt. Nó được thiết kế cố tình để làm việc theo cách đó để làm cho GET hiệu quả hơn. GET chỉ là lấy thông tin và nó không có nghĩa là thay đổi bất kỳ thông tin nào trên máy chủ. Đó là lý do tại sao yêu cầu lại dữ liệu nên trả về cùng một kết quả.

Ví dụ: với một yêu cầu đơn giản được gửi bằng Get

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="loadDoc()">Yêu cầu dữ liệu</button>
<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp");
  xhttp.send();
}
</script>

</body>
</html>

Trong ví dụ trên, ta 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

<button type="button" onclick="loadDoc()">Yêu cầu dữ liệu</button>

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

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp?t=" + Math.random());
  xhttp.send();
}
</script>

Nếu như không muốn gửi bằng phương thức Get , ta chỉ cần thêm thông tin vào URL

<button type="button" onclick="loadDoc()">Yêu cầu dữ liệu</button>

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

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
  xhttp.send();
}
</script>

Việc server phản hồi lại như thế nào sẽ tìm hiểu ở những bài sau nhé

3.2. Phương thức Post

Phương thức POST chủ yếu được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ web. Post có thể thay đổi dữ liệu. Đó là lý do tại sao các kết quả trả lại từ hai POST giống hệt nhau có thể rất khác nhau hoàn toàn với nhau.

Các giá trị ban đầu trước POST thứ hai sẽ khác với các giá trị trước giá trị đầu tiên. Bởi vì Post ban đầu sẽ được cập nhật ít nhất một số giá trị đó. Do đó, POST sẽ luôn nhận được phản hồi từ máy chủ thay vì giữ một bản sao được lưu trong bộ nhớ cache của phản hồi trước đó.

Ví dụ: một yêu cầu đơn giản được gửi bằng Post

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="loadDoc()">Yêu cầu dữ liệu</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post.asp");
  xhttp.send();
}
</script>

</body>
</html>

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

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

<button type="button" onclick="loadDoc()">Yêu cầu dữ liệu/button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post2.asp");
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Henry&lname=Ford");
}
</script>

3.3. Nên sử dụng Get hay Post?

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. Vì yêu cầu Ajax không xuất hiện trong thanh địa chỉ, khách truy cập sẽ không nhận thấy sự khác biệt khi yêu cầu được thực hiện. Vì vậy một sai lầm mà một số người mới bắt đầu có thể thực hiện là sử dụng hầu hết sử dụng GET chỉ đơn giản bởi vì nó dễ dàng hơn. Sự khác biệt đáng chú ý nhất GET và POST trong Ajax là GET vẫn có cùng giới hạn về lượng dữ liệu có thể được truyền như khi yêu cầu tải trang mới. Một người mới bắt đầu có thể sử dụng POST cho một vài trường hợp mà cần phải truyền thêm thông tin mà phương thức GET cho phép.

Nhưng thay vì chọn giữa GET và POST dựa trên lượng dữ liệu ta đang truyền trong Ajax mà nên chọn dựa trên những gì mà Ajax thực sự đang thực hiện. Tóm lại trong thực tế, không nên chỉ sử dụng những tiêu chí này để chọn giữa GET và POST cho Ajax. Ta còn phải chọn cái nào nên được sử dụng để xử lý các biểu mẫu trên trang web của bạn.

Gửi Request tới Server trong AJAX