Bạn Đã Biết Sử Dụng AJAX Với jQuery Chưa?

Bạn Đã Biết Sử Dụng AJAX Với jQuery Chưa?

AJAX không còn xa lạ và đã trở thành một phần không thể thiếu trong thiết kế website và là một trong các module thành công nhất từ trước đến giờ. Trước khi đi vào các phương thức của AJAX trong jQuery thì mình sẽ điểm lại một số khái niệm cơ bản.

AJAX là gì?

AJAX là từ viết tắt của từ Asynchronous JavaScript And XML - Bất đồng bộ trong Javascript và XML. 

  • Asynchoronous (Bất đồng bộ): Bất đồng bộ có nghĩa là một chương trình có thể xử lý không theo tuần tự các hàm, không có quy trình, có thể nhảy đi bỏ qua bước nào đó. Ích lợi dễ thấy nhất của bất đồng bộ là chương trình có thể xử lý nhiều công việc một lúc.
  • Javascript: Đây là một ngôn ngữ lập trình rất phổ biến hiện nay. Trong số rất nhiều chức năng của nó là khả năng quản lý nội dung động của website và hỗ trợ tương tác với người dùng.
  • XML: Đây là một dạng ngôn ngữ gần giống với HTML, tên đầy đủ là eXtensible Markup Language. Nếu HTML được dùng để hiển thị dữ liệu, XML được thiết kế để chứa dữ liệu.

Với AJAX, một máy khách (tức là trình duyệt) có thể liên lạc với một máy chủ web và gửi yêu cầu để nhận được dữ liệu. Sau đó, nó sẽ xử lí phản hồi của máy chủ và tạo ra sự thay đổi trên trang web mà không cần phải tải lại hoàn toàn trang web đó.

Bạn nên đọc bài viết này để tìm hiểu về AJAX căn bản trước khi đọc vài viết này nhé!

jQuery làm được gì cho AJAX?

Jquery cung cấp một số phương thức để thực hiện các chức năng ajax.

Với các phương thức jQuery AJAX, chúng ta có thể yêu cầu các text, HTML, XML và JSON từ server sử dụng cả giao thức HTTP GET và HTTP POST, chúng ta cũng có thể lấy dữ liệu từ bên ngoài trực tiếp vào trong phần tử được chọn.

Nếu không có jQuery, việc viết mã AJAX có thể hơi phức tạp:  Viết mã AJAX thông thường có thể hơi phức tạp, vì các trình duyệt khác nhau có cú pháp khác nhau để triển khai AJAX. Điều này có nghĩa là bạn sẽ phải viết thêm mã để kiểm tra các trình duyệt khác nhau. Tuy nhiên, nhóm jQuery đã giải quyết việc này để chúng ta có thể viết chức năng AJAX chỉ với một dòng mã duy nhất.

Các phương thức cơ bản của jQuery AJAX

Dưới đây mình sẽ giới thiệu về các phương thức cơ bản trong jQuery AJAX

1. jQuey Load

Phương thức load() tải dữ liệu từ máy chủ và đưa dữ liệu trả về vào phần tử đã chọn.

Cú pháp:

$(selector).load(URL,data,callback);

Trong đó:

  • URL: Chỉ định URL mà bạn muốn lấy dữ liệu
  • data: Cặp key/value gửi đi cùng với yêu cầu.
  • callback: Tên của một hàm sẽ được thực thi sau khi hoàn tất phương thức load().

Ví dụ: 

Ta có nội dung của tệp ví dụ: "demo_test.txt"

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

Ví dụ sau đây tải nội dung của tệp "demo_test.txt" vào một phần tử <div> cụ thể:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

Tham số callback chỉ định một hàm gọi lại để chạy khi phương thức load() hoàn tất. Hàm gọi lại có thể có các tham số khác nhau:

  • responseTxt: chứa nội dung kết quả nếu gọi thành công.
  • statusTxt: chứa trạng thái của việc gọi.
  • xhr: chứa đối tượng XMLHttpRequest.

Ví dụ sau hiển thị một hộp thông báo sau khi phương thức load() hoàn tất. Nếu phương thức load() thành công, nó sẽ hiển thị "Nội dung bên ngoài đã được tải thành công!" Và nếu không thành công, nó sẽ hiển thị thông báo lỗi:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("Nội dung bên ngoài đã được tải thành công!");
      if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

2. jQuery Get/Post

Hai phương pháp thường được sử dụng để phản hồi yêu cầu giữa máy khách và máy chủ là: GET và POST.

  • GET: Yêu cầu dữ liệu từ một tài nguyên cụ thể.
  • POST: Gửi dữ liệu được xử lý tới một tài nguyên cụ thể.

Về cơ bản, GET được sử dụng để lấy một số dữ liệu từ máy chủ. POST cũng có thể được sử dụng để lấy một số dữ liệu từ máy chủ. Tuy nhiên, phương thức POST KHÔNG BAO GIỜ lưu trữ dữ liệu và thường được sử dụng để gửi dữ liệu cùng với yêu cầu.

a. jQuery $.get() Method

Phương thức $.get() yêu cầu dữ liệu từ máy chủ bằng phương thức HTTP GET.

Cú pháp:

$.get(URL,callback);

Trong đó:

  • URL: Chỉ định URL bạn muốn yêu cầu.
  • callback: Tên của một hàm sẽ được thực thi sau nếu yêu cầu thành công.

Ví dụ sau sử dụng phương thức $.get() để truy xuất dữ liệu từ một tệp trên máy chủ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("demo_test.asp", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

Tham số đầu tiên của $.get()URL mà chúng ta muốn yêu cầu: ("demo_test.asp"). 

Tham số thứ hai là một hàm gọi lại. Tham số gọi lại đầu tiên giữ nội dung của trang được yêu cầu và tham số gọi lại thứ hai giữ trạng thái của yêu cầu.

Tip: Tệp ASP trông như thế này ("demo_test.asp"):

<%
response.write("This is some text from an external ASP file.")
%>

b. jQuery $.post() Method

Phương thức $.post() yêu cầu dữ liệu từ máy chủ bằng phương thức HTTP POST.

Cú pháp: 

$.post(URL,data,callback);

Trong đó:

  • URL: Chỉ định URL bạn muốn yêu cầu.
  • data: Chỉ định một số dữ liệu để gửi cùng với yêu cầu.
  • callback: Tên của một hàm sẽ được thực thi sau nếu yêu cầu thành công.

Ví dụ:

Tham số đầu tiên của $.post()URL mà chúng ta muốn yêu cầu: ("demo_test_post.asp"). 

Sau đó, mình chuyển một số dữ liệu để gửi cùng với yêu cầu (tên và thành phố). Tập lệnh ASP trong "demo_test_post.asp" đọc các tham số, xử lý chúng và trả về một kết quả. Tham số thứ ba là một hàm gọi lại. Tham số gọi lại đầu tiên giữ nội dung của trang được yêu cầu và tham số gọi lại thứ hai giữ trạng thái của yêu cầu.

Tip: Tệp ASP trông như thế này ("demo_test_post.asp"):

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

Làm thế nào để sử dụng AJAX tối ưu?

Có những lúc chúng ta muốn sử dụng AJAX một cách thuần nhất. Như là việc chỉ rõ những gì phải thực hiện trong một request hơn là chỉ GET POST và LOAD. Trong các trường hợp như vậy thì chúng ta sử dụng $.ajax().là một trong những hàm phổ biến nhất của Jquery.

Function $.ajax()

Hàm $.ajax() của JQuery được sử dụng để thực hiện các request HTTP bất đồng bộ (async). Nó đã được thêm vào thư viện này từ rất lâu, tồn tại từ phiên bản 1.0. Ba hàm $.get(), $.post() và $.load() được đề cập ở trên có thể coi là một hàm $.ajax() với những thiết lập có sẵn. Sau đây là cú pháp tổng quát của hàm $.ajax():

$.ajax({name:value, name:value, ... })

Các tham số chỉ định một hoặc nhiều cặp tên/giá trị (key/value) cho yêu cầu AJAX.

Các cặp tên/giá trị có thể có trong bảng dưới đây:

  • async: Giá trị Boolean cho biết liệu yêu cầu có được xử lý bất đồng bộ hay không. Mặc định là true
  • beforeSend(xhr): Một hàm gọi lại để chạy trước khi yêu cầu được gửi đi
  • cache: Giá trị Boolean cho biết liệu trình duyệt có nên lưu vào bộ nhớ cache các trang được yêu cầu hay không. Mặc định là true
  • complete(xhr,status): Một hàm được thực thi khi request kết thúc (sau khi hàm gọi lại success và error được thực thi).
  • contentType: Loại nội dung được sử dụng khi gửi dữ liệu đến máy chủ. Mặc định là: "application/x-www-form-urlencoded"
  • context: Một object được dùng làm ngữ cảnh (this) của tất cả các hàm gọi lại liên quan đến Ajax.
  • data: Chỉ định dữ liệu được gửi đến máy chủ.
  • dataFilter(data,type): Một hàm được sử dụng để xử lý dữ liệu phản hồi thô của XMLHttpRequest.
  • dataType: Kiểu của dữ liệu mong muốn được trả về từ server.
  • error(xhr,status,error): Một hàm sẽ được gọi khi yêu cầu không thành công.
  • global: Dùng để thiết lập xem có gọi các hàm xử lý sự kiện Ajax toàn cục cho request này hay không.
  • ...

Bạn có thể xem danh sách đầy đủ ở đây: https://www.w3schools.com/jquery/ajax_ajax.asp

Thực tế sử dụng của một vài thiết lập

Ở phần này chúng ta sẽ được xem hàm $.ajax() và một vài thiết lập hoạt động như thế nào.

Chúng ta sẽ bắt đầu với một demo đơn giản so sánh giữa $.load() và $.ajax():

$('#main-menu a').click(function(event) {
   event.preventDefault();
 
   $('#main').load(this.href + ' #main *', function(responseText, status) {
      if (status === 'success') {
         $('#notification-bar').text('The page has been successfully loaded');
      } else {
         $('#notification-bar').text('An error occurred');
      }
   });
});

Cũng là đoạn code trên nhưng chúng ta sử dụng $.ajax():

$('#main-menu a').click(function(event) {
   event.preventDefault();
 
   $.ajax(this.href, {
      success: function(data) {
         $('#main').html($(data).find('#main *'));
         $('#notification-bar').text('The page has been successfully loaded');
      },
      error: function() {
         $('#notification-bar').text('An error occurred');
      }
   });
});

Ở đây bạn có thể thấy rằng dạng thứ nhất của $.ajax() được sử dụng, URL để gửi request được thiết lập với tham số đầu tiên và sau đó là object các thiết lập. Còn khi chúng ta sử dụng $.ajax(), có 2 thiết lập được sử dụng đến trong danh sách trên đó là success và error để chỉ định sẽ làm gì trong trường hợp request thành công hay thát bại.

Như vậy bạn có thể thấy, $.ajax() cho phép bạn thực hiện các request AJAX với rất nhiều các thiết lập giúp bạn có thể điều khiển được request gửi lên server và cách mà response của nó được xử lý. Nhờ có hàm này mà giờ đây bạn đã có một công cụ để có thể thỏa mãn rất nhiều nhu cầu trong project của bạn trong trường hợp các hàm $.load()$.post() và $.get() đơn thuần không thể đáp ứng hết.

Tạm kết

Như vậy trong bài viết này, chúng ta đã cùng tìm hiểu về những vấn đề cơ bản của jQuery AJAX cũng như cách sử dụng nó. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!

Nguồn tham khảo: