Phương thức $.ajax() trong jQuery sở hữu nhiều tham số quan trọng, việc nắm rõ chúng giúp tối ưu hóa yêu cầu mạng. Dưới đây là giải thích chi tiết các tùy chọn cốt lõi:

1. Đường dẫn (url)

Chuỗi địa chỉ đích cho yêu cầu. Mặc định sử dụng URL hiện tại nếu không chỉ định.

2. Phương thức (method)

Chỉ định HTTP method (GET/POST). Mặc định là GET. Các phương thức PUT/DELETE có thể sử dụng nhưng phụ thuộc vào trình duyệt.

3. Thời gian chờ (timeout)

Thiết lập giới hạn thời gian (ms) cho yêu cầu. Giá trị này ghi đè cấu hình toàn cục từ $.ajaxSetup().

4. Chế độ đồng bộ (async)

Giá trị boolean, mặc định true (yêu cầu bất đồng bộ). Thiết lập false để chuyển sang đồng bộ - lưu ý sẽ khóa giao diện cho đến khi hoàn tất.

5. Bộ nhớ đệm (cache)

Mặc định true (trừ khi dataType là script). Thiết lập false để bỏ qua cache trình duyệt.

6. Dữ liệu gửi (payload)

Đối tượng hoặc chuỗi dữ liệu gửi lên server. Với GET, dữ liệu được nối vào URL. Định dạng mảng sẽ tự động tạo tham số lặp: {danhSach: ["sp1", "sp2"]} → danhSach=sp1&danhSach=sp2.

7. Kiểu dữ liệu nhận (dataType)

Chỉ định định dạng dữ liệu mong đợi từ server:

• json: Xử lý tự động thành đối tượng JavaScript
• jsonp: Hỗ trợ cross-domain với callback tự động
• script: Chạy mã JavaScript nhận được
• html/text: Chuỗi HTML hoặc văn bản thuần

8. Tiền xử lý (beforeSend)

Hàm callback nhận đối tượng XMLHttpRequest, cho phép chỉnh sửa header hoặc hủy yêu cầu bằng cách trả về false.

9. Xử lý thành công (success)

Hàm nhận hai tham số: dữ liệu đã xử lý và trạng thái. Ví dụ:

success: function(ketQua, trangThai) {
  console.log('Dữ liệu:', ketQua);
}

10. Xử lý lỗi (error)

Hàm xử lý khi yêu cầu thất bại, nhận XMLHttpRequest, thông báo lỗi và đối tượng lỗi.

11. Mã hóa nội dung (contentType)

Mặc định "application/x-www-form-urlencoded". Thay đổi khi gửi dữ liệu phức tạp (ví dụ: application/json).

12. Tiền xử lý dữ liệu (dataFilter)

Hàm biến đổi dữ liệu thô trước khi xử lý chính. Nhận hai tham số: dữ liệu thô và kiểu dữ liệu.

Ví dụ minh họa

$(document).ready(function() {
  $('#btnGoi').on('click', function() {
    $.ajax({
      method: 'GET',
      url: 'api/danh-gia.json',
      data: { 
        tenDangNhap: $('#ten').val(), 
        noiDung: $('#binhLuan').val() 
      },
      dataType: 'json',
      success: function(danhSach) {
        let noiDung = '';
        $.each(danhSach, function(chiSo, item) {
          noiDung += `
            <div class="danh-gia">
              <strong>${item.ten}:</strong>
              <p>${item.noiDung}</p>
            </div>
          `;
        });
        $('#ketQua').html(noiDung);
      }
    });
  });
});

Lưu ý về $.each()

Hàm toàn cục duyệt mảng/đối tượng với cú pháp:

$.each(danhSach, function(chiMuc, giaTri) {
  // Xử lý phần tử
});