Một hướng dẫn dành cho người mới bắt đầu làm quen với AJAX bằng jQuery

Trong bài viết đầu tiên của loạt bài này, chúng ta đã bao quát các nguyên tắc cơ bản của AJAX. Bài thứ hai, chúng ta xem xét một ví dụ bằng JavaScript thuần tuý.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu qua một vài hàm và phương thức liên quan đến AJAX của jQuery. Cụ thể hơn, chúng ta sẽ tìm hiểu kỹ hơn về phương thức load và hàm ajax.

Sử dụng thức load

Phương thức load của jQuery là một phương thức đơn giản nhưng mạnh mẽ để truy xuất dữ liệu từ xa. Dưới đây, bạn có thể thấy cú pháp của nó:

1

  	$(selector).load(url[, data][, complete])

Bảng sau hiển thị các tham số có thể có của nó:

Dưới đây là các tham số của hàm callback:

Danh sách tiếp theo tóm tắt các giá trị có thể có của tham số textStatus:

1

  - success

2

  - notmodified

3

  - nocontent

4

  - error

5

  - timeout

6

  - abort

7

  - parsererror

Để hiểu rõ hơn về cách thức hoạt động phương thức load, hãy xem lại các ví dụ được thảo luận trong bài trước.

Một lần nữa, nhìn vào cấu trúc HTML đơn giản này:

1

      <div>

2

        <img src="Einstein.jpg" alt="Einstein">

3

        <button id="request">Learn more about Einstein</button>

4

        <div id="bio"></div>

5

      </div>

Dưới đây là minh hoạ của nó:

Hãy nhớ rằng chúng ta muốn cập nhật nội dung của phần tử #bio bằng dữ liệu trả về, ngay sau khi nút được nhấp.

Đây là mã jQuery cần thiết:

1

      var $btn = $('#request');

2

      var $bio = $('#bio');

3

4

      $btn.on('click', function() {

5

      	$(this).hide();

6

      	$bio.load('Bio.txt', completeFunction);

7

      });

8

9

      function completeFunction(responseText, textStatus, request) {

10

      	$bio.css('border', '1px solid #e8e8e8');

11

      	if(textStatus == 'error') {

12

      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);

13

      	} 

14

      } 

Giả sử rằng yêu cầu thành công (tức là khi textStatus là success hay notmodified), kết quả cuối cùng sẽ giống như thế này:

Ngoài ra, hãy xem minh hoạ dưới đây mô tả một yêu cầu thành công:

Phần bên trái của hình ảnh minh hoạ này cho thấy đối tượng XHR khi nó được in trong giao diện dòng lệnh của trình duyệt nếu chúng ta sử dụng JavaScript thuần tuý (xem hướng dẫn trước) để thực hiện yêu cầu. Mặt khác, phần bên phải sẽ hiển thị các đối tượng tương ứng jqXHR khi nó được in nếu chúng ta sử dụng phương thức load.

Tuy nhiên, trong trường hợp một yêu cầu không thành công, một tin nhắn tương ứng sẽ xuất hiện. Để làm như vậy, chúng ta theo dõi giá trị của tham số textStatus và hiển thị một thông báo lỗi:

Lưu ý: Nếu bạn chạy ví dụ từ môi trường cục bộ của bạn (và lưu trữ tập tin Bio.txt trong đó), thì các thông báo lỗi có thể sẽ khác. Ví dụ, bạn có thể thấy kết quả sau đây:

Cuối cùng, cần phải lưu ý rằng rằng, theo mặc định, phương thức load sử dụng phương thức GET của HTTP, trừ khi chúng ta gửi dữ liệu như là một đối tượng lên máy chủ. Chỉ khi đó, thì phương thức POST được gọi.

Xem demo Codepen có liên quan ở dưới đây:

Bây giờ, chúng ta hãy thay đổi định dạng của tập tin mà chúng ta yêu cầu từ máy chủ. Cụ thể, cho ví dụ này, các dữ liệu bạn muốn được thêm vào tập tin Bio.html thay vì tập tin Bio.txt. Đồng thời lưu ý: tập tin mục tiêu chứa hai đoạn văn bản.

Giả sử rằng chúng ta chỉ muốn nạp đoạn đầu tiên, chúng ta sẽ phải cập nhật mã ban đầu như sau:

1

      $btn.on('click', function() {

2

          // this line only changes

3

          $bio.load('Bio.html p:first-child', completeFunction);

4

      });

Dưới đây là hình minh hoạ cho điều đó:

Và đây là demo từ Codepen:

Kết luận

Trong hướng dẫn này, tôi đã minh hoạ cách bạn có thể sử dụng AJAX với jQuery. Để làm cho mọi thứ hấp dẫn hơn, chúng ta cũng đã làm việc với một vài ví dụ thực tế. Trong bài hướng dẫn cuối cùng còn lại của loạt bài này, chúng ta sẽ tổng hợp mọi thứ bằng cách làm việc với một ví dụ phức tạp hơn.