jQuery thực chiến: Xây dựng chức năng website bằng jQuery và AJAX

Bùi Tấn Lực
105
04/09/2026

jQuery từng được biết đến như một thư viện giúp viết JavaScript ngắn gọn hơn, nhưng giá trị thực tế của nó không chỉ nằm ở việc rút gọn cú pháp. Khi xây dựng website, jQuery có thể trở thành một lớp xử lý trung gian rất thuận tiện giữa giao diện HTML, thao tác của người dùng và dữ liệu được xử lý ở phía máy chủ.

Đặc biệt, khi kết hợp jQuery với AJAX, website có thể thực hiện nhiều tác vụ mà không cần tải lại toàn bộ trang. Người dùng có thể gửi biểu mẫu, tìm kiếm dữ liệu, kiểm tra thông tin, cập nhật nội dung, phân trang hoặc tải thêm dữ liệu ngay trên giao diện hiện tại. Đây chính là phần khác biệt giữa việc chỉ biết cú pháp jQuery và khả năng sử dụng jQuery để giải quyết một bài toán website thực tế.

Trong bài viết này, Web Mới tập trung vào cách tư duy và triển khai chức năng thay vì liệt kê hàng loạt phương thức một cách rời rạc. Mục tiêu là giúp bạn hiểu một chức năng được hình thành như thế nào, dữ liệu đi qua những đâu và jQuery phối hợp với AJAX ra sao để tạo thành một luồng xử lý hoàn chỉnh.

jQuery thực chiến: Xây dựng chức năng website bằng jQuery và AJAX

Tư duy khi xây dựng chức năng bằng jQuery

Một chức năng website hoàn chỉnh thường không bắt đầu từ câu lệnh JavaScript. Nó bắt đầu từ việc xác định người dùng làm gì, giao diện phải thay đổi như thế nào và dữ liệu cần được xử lý ở đâu.

Ví dụ, với một nút “Thêm vào giỏ hàng”, quá trình thực tế có thể gồm các bước: người dùng nhấn nút, trình duyệt xác định sản phẩm, jQuery lấy thông tin cần thiết, gửi yêu cầu lên máy chủ, máy chủ kiểm tra dữ liệu, trả kết quả và giao diện cập nhật số lượng sản phẩm trong giỏ hàng.

Nếu chỉ nhìn vào đoạn mã AJAX, bạn sẽ thấy đây là một lời gọi đến máy chủ. Nhưng nếu nhìn toàn bộ luồng, AJAX chỉ là một mắt xích trong chức năng.

Chia chức năng thành các bước xử lý

Cách dễ quản lý nhất là chia một chức năng thành các lớp công việc rõ ràng:

Phát hiện hành động: xác định sự kiện người dùng vừa thực hiện.
Lấy dữ liệu: thu thập giá trị từ biểu mẫu, thuộc tính hoặc phần tử giao diện.
Kiểm tra dữ liệu: phát hiện những trường hợp dữ liệu không hợp lệ ngay trên trình duyệt nếu có thể.
Gửi yêu cầu: chuyển dữ liệu đến máy chủ bằng AJAX khi chức năng cần xử lý phía máy chủ.
Nhận kết quả: đọc dữ liệu mà máy chủ trả về.
Cập nhật giao diện: hiển thị kết quả, thông báo lỗi hoặc thay đổi trạng thái của phần tử.

Cách chia này giúp mã nguồn dễ đọc hơn và quan trọng hơn là dễ tìm lỗi. Khi chức năng không hoạt động, bạn có thể xác định lỗi nằm ở sự kiện, dữ liệu, yêu cầu AJAX, phản hồi từ máy chủ hay bước cập nhật giao diện.

jQuery đóng vai trò gì trong luồng xử lý?

Trong một chức năng thực tế, jQuery thường đảm nhiệm ba nhóm công việc chính.

Làm việc với giao diện: tìm phần tử, đọc hoặc thay đổi nội dung, thuộc tính và trạng thái của phần tử.
Xử lý sự kiện: phản ứng với thao tác nhấp chuột, nhập dữ liệu, gửi biểu mẫu hoặc các tương tác khác.
Giao tiếp với máy chủ: gửi và nhận dữ liệu thông qua AJAX.

Điểm đáng chú ý là ba nhóm này thường xuất hiện trong cùng một chức năng. Vì vậy, học jQuery theo từng phương thức riêng lẻ sẽ không hiệu quả bằng việc đặt chúng vào một quy trình thực tế.

Điều khiển giao diện trước khi gọi AJAX

Trước khi gửi dữ liệu lên máy chủ, jQuery thường cần làm việc với DOM để biết người dùng đang thao tác với phần tử nào và dữ liệu hiện tại là gì.

Giả sử một biểu mẫu có trường nhập email. Thay vì gửi ngay dữ liệu, bạn có thể lấy giá trị, kiểm tra trường có rỗng hay không rồi mới quyết định có gửi AJAX.

<form id="contactForm">
    <input type="email" id="email" name="email">
    <button type="submit">Gửi</button>
</form>

Sau đó, jQuery có thể bắt sự kiện gửi biểu mẫu và đọc giá trị:

$('#contactForm').on('submit', function(event) {
    event.preventDefault();

    const email = $('#email').val();

    if (!email) {
        alert('Vui lòng nhập email.');
        return;
    }

    // Tiếp tục xử lý AJAX
});

Trong ví dụ này, event.preventDefault() ngăn hành vi gửi biểu mẫu mặc định của trình duyệt. Điều đó cho phép jQuery kiểm soát toàn bộ quy trình thay vì để trình duyệt chuyển sang một URL hoặc tải lại trang theo cách thông thường.

Vì sao nên xử lý sự kiện ở một điểm rõ ràng?

Một lỗi phổ biến khi viết JavaScript là để cùng một hành động bị xử lý bởi nhiều đoạn mã khác nhau. Khi đó, một lần nhấp chuột có thể vô tình tạo ra nhiều yêu cầu hoặc làm giao diện thay đổi nhiều lần.

Với jQuery, nên xác định rõ phần tử nào phát sinh sự kiện và chức năng nào chịu trách nhiệm xử lý sự kiện đó. Cách tổ chức này đặc biệt quan trọng khi trang có nhiều nút, nhiều biểu mẫu hoặc các thành phần được tạo động.

Thay vì viết logic rải rác, có thể gom một hành động thành một luồng:

Người dùng thực hiện thao tác.
jQuery nhận sự kiện.
jQuery ngăn hành vi mặc định nếu cần.
Dữ liệu được lấy từ giao diện.
Dữ liệu được kiểm tra.
AJAX được gọi.
Kết quả được xử lý.
Giao diện được cập nhật.

Đây là cấu trúc nền tảng có thể áp dụng cho rất nhiều chức năng khác nhau trên website.

Xây dựng chức năng theo hướng dữ liệu đi qua các lớp

Khi chức năng bắt đầu có AJAX, điều quan trọng không còn là “viết một đoạn code chạy được” mà là đảm bảo dữ liệu đi đúng hướng.

Có thể hình dung một yêu cầu đơn giản như sau:

Người dùng → giao diện → jQuery → AJAX → máy chủ → cơ sở dữ liệu → máy chủ → AJAX → jQuery → giao diện.

Mỗi đoạn trong chuỗi này có một nhiệm vụ riêng. jQuery không nên được xem là nơi xử lý toàn bộ nghiệp vụ. Những dữ liệu quan trọng như quyền truy cập, giá sản phẩm, trạng thái đơn hàng hoặc thông tin liên quan đến tài khoản vẫn phải được kiểm tra ở phía máy chủ.

Không nên tin dữ liệu từ trình duyệt

Một trong những nguyên tắc quan trọng khi xây dựng AJAX là dữ liệu được gửi từ trình duyệt luôn có thể bị thay đổi. Việc kiểm tra ở JavaScript chỉ giúp cải thiện trải nghiệm người dùng và giảm những yêu cầu không cần thiết, chứ không thay thế kiểm tra phía máy chủ.

Ví dụ, nếu người dùng gửi mã sản phẩm và số lượng sản phẩm, JavaScript có thể kiểm tra số lượng có phải là số dương hay không. Nhưng máy chủ vẫn phải kiểm tra lại sản phẩm có tồn tại, người dùng có quyền thực hiện thao tác và số lượng có hợp lệ hay không.

Điều này tạo ra sự phân chia rất rõ:

Phía trình duyệt: kiểm tra nhanh, phản hồi giao diện và cải thiện trải nghiệm.
Phía máy chủ: xác thực dữ liệu, xử lý nghiệp vụ và bảo vệ tài nguyên.
AJAX: làm cầu nối trao đổi dữ liệu giữa hai phía.

AJAX thay đổi trải nghiệm website như thế nào?

Với cách gửi biểu mẫu truyền thống, trình duyệt thường gửi yêu cầu rồi tải lại trang hoặc chuyển sang một trang khác. AJAX cho phép gửi yêu cầu nền trong khi người dùng vẫn ở trên trang hiện tại.

Điều này đặc biệt hữu ích với những thao tác nhỏ nhưng xảy ra thường xuyên. Chẳng hạn, người dùng nhập từ khóa tìm kiếm, thay đổi bộ lọc sản phẩm, cập nhật số lượng trong giỏ hàng hoặc gửi bình luận.

Một yêu cầu AJAX cơ bản trong jQuery có thể được triển khai như sau:

$.ajax({
    url: 'process.php',
    type: 'POST',
    data: {
        email: email
    },
    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log('Không thể gửi yêu cầu.');
    }
});

Đoạn mã trên mới chỉ thể hiện phần giao tiếp. Một chức năng hoàn chỉnh cần quan tâm thêm đến trạng thái đang xử lý, dữ liệu phản hồi, lỗi nghiệp vụ và cách cập nhật giao diện.

Đừng chỉ xử lý trường hợp thành công

Trong thực tế, yêu cầu có thể thất bại vì nhiều nguyên nhân: máy chủ không phản hồi, dữ liệu không hợp lệ, phiên đăng nhập hết hạn, quyền truy cập không phù hợp hoặc hệ thống phía máy chủ xảy ra lỗi.

Vì vậy, giao diện không nên mặc định rằng AJAX luôn thành công. Người dùng cần nhận được phản hồi phù hợp với từng trạng thái.

Một luồng tốt thường có ít nhất ba trạng thái:

Đang xử lý: thông báo hoặc khóa thao tác cần thiết để tránh gửi lặp.
Thành công: cập nhật giao diện và thông báo kết quả.
Thất bại: giữ lại thông tin cần thiết và cho người dùng biết thao tác chưa hoàn thành.

Đây là điểm làm nên sự khác biệt giữa một đoạn AJAX chạy được và một chức năng AJAX có chất lượng.

Quản lý trạng thái giao diện khi gửi yêu cầu

Một lỗi rất dễ gặp là người dùng nhấn nút nhiều lần trong lúc máy chủ chưa phản hồi. Nếu mỗi lần nhấn đều tạo một yêu cầu mới, cùng một thao tác có thể được thực hiện nhiều lần.

Ví dụ với chức năng gửi biểu mẫu, có thể tạm thời vô hiệu hóa nút:

$('#contactForm').on('submit', function(event) {
    event.preventDefault();

    const form = $(this);
    const button = form.find('button[type="submit"]');

    button.prop('disabled', true);

    $.ajax({
        url: 'process.php',
        type: 'POST',
        data: form.serialize(),
        success: function(response) {
            console.log(response);
        },
        error: function() {
            console.log('Có lỗi xảy ra.');
        },
        complete: function() {
            button.prop('disabled', false);
        }
    });
});

Điểm đáng chú ý ở đây là complete. Thay vì chỉ mở lại nút trong trường hợp thành công, trạng thái giao diện được khôi phục sau khi yêu cầu kết thúc, bất kể thành công hay thất bại.

Cách xử lý này giúp giao diện không bị rơi vào trạng thái “đang tải” vô thời hạn khi yêu cầu gặp lỗi.

Gửi dữ liệu biểu mẫu bằng AJAX

Biểu mẫu là một trong những tình huống phù hợp nhất để áp dụng AJAX. Thay vì lấy từng trường theo cách thủ công, jQuery có thể sử dụng dữ liệu của toàn bộ biểu mẫu.

$('#contactForm').on('submit', function(event) {
    event.preventDefault();

    const form = $(this);

    $.ajax({
        url: 'process.php',
        type: 'POST',
        data: form.serialize(),
        success: function(response) {
            console.log(response);
        },
        error: function() {
            console.log('Gửi dữ liệu thất bại.');
        }
    });
});

serialize() phù hợp với các biểu mẫu thông thường khi dữ liệu cần gửi có thể biểu diễn dưới dạng chuỗi truy vấn. Cách này giúp giảm lượng mã phải viết khi biểu mẫu có nhiều trường.

Khi nào serialize chưa đủ?

Không phải mọi biểu mẫu đều chỉ chứa dữ liệu văn bản. Nếu biểu mẫu có tệp tải lên, việc gửi dữ liệu cần một cách xử lý khác, chẳng hạn sử dụng đối tượng FormData.

Điều quan trọng là lựa chọn phương pháp dựa trên loại dữ liệu thay vì cố gắng dùng một cách cho mọi trường hợp.

Thiết kế phản hồi từ máy chủ dễ xử lý

Phía máy chủ không chỉ nên trả về một đoạn văn bản tùy ý. Khi website có nhiều chức năng AJAX, việc thống nhất cấu trúc phản hồi sẽ giúp jQuery xử lý kết quả rõ ràng hơn.

Ví dụ, máy chủ có thể trả về dữ liệu JSON với các thông tin cơ bản như trạng thái, thông báo và dữ liệu kết quả.

{
    "success": true,
    "message": "Dữ liệu đã được lưu.",
    "data": {}
}

Khi đó, phía giao diện có thể phân biệt kết quả thành công và thất bại dựa trên dữ liệu thay vì phải phân tích một chuỗi thông báo.

Đây là một nguyên tắc rất hữu ích khi website phát triển lớn: phản hồi từ máy chủ nên có cấu trúc ổn định. Khi cấu trúc được thống nhất, những chức năng như đăng nhập, tìm kiếm, cập nhật dữ liệu hoặc gửi biểu mẫu sẽ dễ xây dựng và bảo trì hơn.

Tìm kiếm dữ liệu không cần tải lại trang

Tìm kiếm là một ví dụ rất dễ thấy về lợi ích của AJAX. Thay vì người dùng nhập từ khóa, gửi biểu mẫu rồi chờ toàn bộ trang được tải lại, jQuery có thể gửi từ khóa đến máy chủ và chỉ thay thế khu vực hiển thị kết quả.

Cách tiếp cận này đặc biệt phù hợp với website có danh sách sản phẩm, bài viết, khách hàng, đơn hàng hoặc bất kỳ loại dữ liệu nào có số lượng lớn.

Giả sử giao diện có một ô tìm kiếm và khu vực chứa kết quả:

<input type="text" id="keyword" placeholder="Nhập từ khóa">

<div id="searchResult">
    <p>Nhập từ khóa để tìm kiếm.</p>
</div>

jQuery có thể bắt sự kiện người dùng gửi yêu cầu tìm kiếm:

$('#keyword').on('keyup', function() {
    const keyword = $(this).val().trim();

    if (!keyword) {
        $('#searchResult').html('<p>Nhập từ khóa để tìm kiếm.</p>');
        return;
    }

    $.ajax({
        url: 'search.php',
        type: 'GET',
        data: {
            keyword: keyword
        },
        success: function(response) {
            $('#searchResult').html(response);
        },
        error: function() {
            $('#searchResult').html('<p>Không thể tải kết quả.</p>');
        }
    });
});

Về mặt kỹ thuật, đoạn mã này khá đơn giản. Tuy nhiên, nếu áp dụng trực tiếp cho một website có dữ liệu lớn thì sẽ phát sinh vấn đề: mỗi lần người dùng gõ một ký tự, trình duyệt lại gửi một yêu cầu.

Hạn chế số lần gọi AJAX khi người dùng nhập

Giả sử người dùng muốn tìm từ khóa “javascript”. Nếu gọi AJAX ngay sau mỗi lần nhấn phím, trình duyệt có thể gửi nhiều yêu cầu liên tiếp trong thời gian rất ngắn. Điều này vừa tạo tải không cần thiết vừa có thể khiến kết quả trả về không theo đúng thứ tự người dùng mong muốn.

Một kỹ thuật thường được sử dụng là debounce. Ý tưởng là chỉ gửi yêu cầu sau khi người dùng ngừng nhập trong một khoảng thời gian ngắn.

let searchTimer;

$('#keyword').on('keyup', function() {
    const keyword = $(this).val().trim();

    clearTimeout(searchTimer);

    if (!keyword) {
        $('#searchResult').html('<p>Nhập từ khóa để tìm kiếm.</p>');
        return;
    }

    searchTimer = setTimeout(function() {
        $.ajax({
            url: 'search.php',
            type: 'GET',
            data: {
                keyword: keyword
            },
            success: function(response) {
                $('#searchResult').html(response);
            },
            error: function() {
                $('#searchResult').html('<p>Không thể tải kết quả.</p>');
            }
        });
    }, 400);
});

Khoảng thời gian 400 mili giây trong ví dụ chỉ mang tính minh họa. Giá trị thực tế có thể điều chỉnh tùy loại chức năng và tốc độ phản hồi của hệ thống.

Điểm quan trọng không nằm ở con số cụ thể mà ở nguyên tắc: không nên gửi yêu cầu lên máy chủ cho mọi thay đổi nhỏ nếu chức năng không thực sự cần thiết.

Lọc danh sách bằng AJAX

Tìm kiếm và lọc dữ liệu có cùng một nền tảng nhưng cách sử dụng thường khác nhau. Tìm kiếm dựa trên từ khóa, trong khi bộ lọc thường dựa trên một hoặc nhiều điều kiện như danh mục, khoảng giá, trạng thái hoặc loại dữ liệu.

Ví dụ, một danh sách sản phẩm có thể có bộ lọc danh mục:

<select id="category">
    <option value="">Tất cả danh mục</option>
    <option value="1">Laptop</option>
    <option value="2">Điện thoại</option>
    <option value="3">Phụ kiện</option>
</select>

<div id="productList">
    <p>Danh sách sản phẩm.</p>
</div>

Khi người dùng thay đổi danh mục, jQuery gửi giá trị mới đến máy chủ:

$('#category').on('change', function() {
    const category = $(this).val();

    $('#productList').html('<p>Đang tải dữ liệu...</p>');

    $.ajax({
        url: 'products.php',
        type: 'GET',
        data: {
            category: category
        },
        success: function(response) {
            $('#productList').html(response);
        },
        error: function() {
            $('#productList').html('<p>Không thể tải danh sách sản phẩm.</p>');
        }
    });
});

Với nhiều bộ lọc, thay vì tạo một yêu cầu riêng cho từng điều kiện, có thể gửi toàn bộ trạng thái bộ lọc trong cùng một yêu cầu.

const filters = {
    keyword: $('#keyword').val(),
    category: $('#category').val(),
    status: $('#status').val()
};

$.ajax({
    url: 'products.php',
    type: 'GET',
    data: filters,
    success: function(response) {
        $('#productList').html(response);
    }
});

Cách này giúp máy chủ nhận được một tập điều kiện đầy đủ để xử lý truy vấn dữ liệu. Khi số lượng bộ lọc tăng lên, việc quản lý dữ liệu theo một đối tượng cũng dễ đọc hơn so với việc tạo quá nhiều biến rời rạc.

Phân trang AJAX cho danh sách dữ liệu

AJAX đặc biệt hữu ích khi kết hợp với phân trang. Người dùng có thể chuyển sang trang dữ liệu tiếp theo mà không cần tải lại toàn bộ giao diện.

Một cách triển khai đơn giản là mỗi nút phân trang chứa số trang tương ứng:

<div id="pagination">
    <a href="?page=1" class="page-link" data-page="1">1</a>
    <a href="?page=2" class="page-link" data-page="2">2</a>
    <a href="?page=3" class="page-link" data-page="3">3</a>
</div>

<div id="productList">
    <p>Danh sách dữ liệu.</p>
</div>

jQuery có thể bắt sự kiện nhấp vào liên kết:

$(document).on('click', '.page-link', function(event) {
    event.preventDefault();

    const page = $(this).data('page');

    $('#productList').html('<p>Đang tải dữ liệu...</p>');

    $.ajax({
        url: 'products.php',
        type: 'GET',
        data: {
            page: page
        },
        success: function(response) {
            $('#productList').html(response);
        },
        error: function() {
            $('#productList').html('<p>Không thể tải dữ liệu.</p>');
        }
    });
});

Ở đây có một chi tiết quan trọng là sử dụng $(document).on() thay vì chỉ gắn sự kiện trực tiếp cho các liên kết hiện có.

Vì sao sự kiện động cần cách xử lý khác?

Khi nội dung phân trang được thay thế bằng AJAX, các phần tử mới được tạo ra sau đó có thể không tồn tại tại thời điểm đoạn mã JavaScript ban đầu chạy.

Nếu sự kiện chỉ được gắn trực tiếp cho những phần tử có sẵn, các liên kết được tạo mới sau khi AJAX hoàn thành có thể không hoạt động.

Event delegation giải quyết vấn đề này bằng cách đặt sự kiện ở một phần tử tồn tại ổn định, sau đó xác định phần tử con phù hợp với selector.

Đây là một kỹ thuật quan trọng khi làm việc với giao diện có nội dung được tạo hoặc thay đổi bằng AJAX.

Tải thêm dữ liệu thay cho phân trang truyền thống

Ngoài phân trang bằng số, website có thể sử dụng nút “Xem thêm”. Khi người dùng nhấn nút, jQuery lấy trang tiếp theo và nối dữ liệu mới vào danh sách hiện tại.

<div id="postList">
    <p>Các bài viết hiện tại.</p>
</div>

<button type="button" id="loadMore" data-page="1">
    Xem thêm
</button>

Phần JavaScript:

$('#loadMore').on('click', function() {
    const button = $(this);
    const nextPage = Number(button.attr('data-page')) + 1;

    button.prop('disabled', true);

    $.ajax({
        url: 'posts.php',
        type: 'GET',
        data: {
            page: nextPage
        },
        success: function(response) {
            $('#postList').append(response);
            button.attr('data-page', nextPage);
        },
        error: function() {
            console.log('Không thể tải thêm dữ liệu.');
        },
        complete: function() {
            button.prop('disabled', false);
        }
    });
});

Khác với phân trang thông thường sử dụng html() để thay thế nội dung, chức năng “Xem thêm” sử dụng append() để nối dữ liệu mới vào cuối danh sách.

Việc lựa chọn giữa thay thế và nối nội dung phải dựa trên mục tiêu của chức năng. Nếu người dùng đang chuyển sang một tập dữ liệu khác, thay thế nội dung thường phù hợp hơn. Nếu người dùng muốn mở rộng danh sách hiện tại, nối dữ liệu sẽ hợp lý hơn.

Xác định thời điểm dừng tải thêm

Một chức năng “Xem thêm” tốt không nên để nút tiếp tục hoạt động khi máy chủ đã không còn dữ liệu.

Do đó, phản hồi từ máy chủ nên cung cấp thông tin cho biết còn dữ liệu hay không. Ví dụ, phản hồi JSON có thể chứa trường hasMore.

{
    "success": true,
    "hasMore": false,
    "html": ""
}

Khi nhận kết quả, jQuery có thể kiểm tra trạng thái này và ẩn hoặc vô hiệu hóa nút.

if (!response.hasMore) {
    $('#loadMore').prop('disabled', true);
}

Cách làm này tốt hơn việc dựa vào một con số cố định ở phía JavaScript, bởi máy chủ mới là nơi biết chính xác còn bao nhiêu dữ liệu.

Xử lý JSON giữa jQuery và máy chủ

HTML phù hợp khi máy chủ muốn trả về một khối giao diện đã được tạo sẵn. Tuy nhiên, khi giao diện cần tự quyết định cách hiển thị dữ liệu, JSON thường linh hoạt hơn.

Ví dụ, máy chủ có thể trả về:

{
    "success": true,
    "message": "Lưu dữ liệu thành công.",
    "data": {
        "id": 25,
        "name": "Sản phẩm mới"
    }
}

jQuery có thể yêu cầu dữ liệu JSON trực tiếp:

$.ajax({
    url: 'product.php',
    type: 'GET',
    dataType: 'json',
    data: {
        id: 25
    },
    success: function(response) {
        if (response.success) {
            console.log(response.data.name);
        } else {
            console.log(response.message);
        }
    },
    error: function() {
        console.log('Không thể nhận dữ liệu.');
    }
});

Khi chỉ rõ dataType: 'json', jQuery có thể xử lý phản hồi theo kiểu dữ liệu mong đợi. Điều này giúp mã nguồn phía giao diện rõ ràng hơn và giảm việc phải tự chuyển đổi chuỗi JSON.

HTML response hay JSON response?

Không có một lựa chọn duy nhất phù hợp với mọi chức năng. Hai cách có mục đích khác nhau.

Trường hợp	Cách phản hồi phù hợp	Lý do
Thay thế một danh sách HTML	HTML	Máy chủ có thể trả về phần giao diện cần hiển thị trực tiếp.
Trả kết quả xử lý biểu mẫu	JSON	Dễ biểu diễn trạng thái, thông báo và dữ liệu bổ sung.
Cập nhật một đối tượng dữ liệu	JSON	Phía trình duyệt có thể chủ động quyết định cách cập nhật giao diện.
Tải một khối giao diện phức tạp	HTML	Giảm lượng logic dựng giao diện ở JavaScript.

Điều quan trọng là thống nhất cách thiết kế API nội bộ của website. Khi một số chức năng trả HTML, một số chức năng trả chuỗi tùy ý và một số chức năng trả JSON không có cấu trúc thống nhất, việc bảo trì sẽ nhanh chóng trở nên khó khăn.

Cập nhật DOM sau khi AJAX hoàn thành

Gửi AJAX chỉ là một nửa công việc. Giá trị thực sự của AJAX nằm ở việc kết quả được phản ánh chính xác lên giao diện.

Ví dụ, khi người dùng cập nhật số lượng sản phẩm trong giỏ hàng, máy chủ có thể trả về tổng số lượng và tổng tiền mới. jQuery sau đó chỉ cần thay đổi đúng những khu vực liên quan.

$.ajax({
    url: 'cart-update.php',
    type: 'POST',
    dataType: 'json',
    data: {
        product_id: 15,
        quantity: 3
    },
    success: function(response) {
        if (!response.success) {
            alert(response.message);
            return;
        }

        $('#cartCount').text(response.data.cartCount);
        $('#cartTotal').text(response.data.cartTotal);
    }
});

Điểm tốt của cách làm này là không cần tải lại toàn bộ trang chỉ để thay đổi hai giá trị. Máy chủ trả về đúng dữ liệu cần thiết và jQuery cập nhật đúng phần tử liên quan.

Không nên thay toàn bộ giao diện khi chỉ cần thay đổi một phần

Nếu một thao tác chỉ làm thay đổi số lượng sản phẩm, việc tải lại toàn bộ danh sách hoặc toàn bộ trang là không cần thiết. Càng xác định chính xác vùng giao diện cần thay đổi, chức năng càng nhẹ và dễ kiểm soát.

Tuy nhiên, không nên cực đoan đến mức biến JavaScript thành một hệ thống dựng toàn bộ HTML phức tạp nếu máy chủ đã có thể trả về phần giao diện phù hợp. Mục tiêu là chọn ranh giới hợp lý giữa dữ liệu và giao diện.

Hủy hoặc kiểm soát những yêu cầu AJAX không còn cần thiết

Một vấn đề khó nhận ra xuất hiện khi người dùng thực hiện nhiều thao tác liên tiếp. Ví dụ, họ tìm kiếm “jquery”, sau đó lập tức đổi thành “ajax”. Yêu cầu thứ hai có thể hoàn thành trước yêu cầu đầu tiên.

Nếu không kiểm soát, phản hồi cũ có thể ghi đè kết quả mới.

jQuery cho phép lưu đối tượng yêu cầu AJAX để có thể hủy yêu cầu trước đó:

let currentRequest = null;

function search(keyword) {
    if (currentRequest) {
        currentRequest.abort();
    }

    currentRequest = $.ajax({
        url: 'search.php',
        type: 'GET',
        data: {
            keyword: keyword
        },
        success: function(response) {
            $('#searchResult').html(response);
        },
        complete: function() {
            currentRequest = null;
        }
    });
}

Đây là một ví dụ điển hình cho việc quản lý trạng thái thay vì chỉ tập trung vào cú pháp AJAX. Khi website có nhiều tương tác liên tục, vấn đề quan trọng không phải là “gọi AJAX thế nào” mà là yêu cầu nào còn hợp lệ và kết quả nào được phép cập nhật giao diện.

Xử lý biểu mẫu AJAX theo một quy trình hoàn chỉnh

Một biểu mẫu thực tế không chỉ có nhiệm vụ gửi dữ liệu. Nó còn phải phản hồi cho người dùng trong suốt quá trình xử lý. Nếu người dùng nhấn nút gửi mà không biết hệ thống đã nhận dữ liệu hay chưa, họ rất dễ nhấn thêm lần nữa và tạo ra nhiều yêu cầu giống nhau.

Vì vậy, một biểu mẫu AJAX nên được xây dựng theo một chuỗi trạng thái rõ ràng: kiểm tra dữ liệu, khóa thao tác gửi, hiển thị trạng thái đang xử lý, gửi yêu cầu, xử lý phản hồi và khôi phục giao diện.

Ví dụ:

<form id="registerForm">
    <input type="text" name="name" id="name" placeholder="Họ và tên">
    <input type="email" name="email" id="email" placeholder="Email">
    <button type="submit" id="registerButton">Đăng ký</button>
</form>

<div id="registerMessage"></div>

Phần xử lý có thể được tổ chức như sau:

$('#registerForm').on('submit', function(event) {
    event.preventDefault();

    const form = $(this);
    const button = $('#registerButton');
    const message = $('#registerMessage');

    const name = $('#name').val().trim();
    const email = $('#email').val().trim();

    if (!name || !email) {
        message.text('Vui lòng nhập đầy đủ thông tin.');
        return;
    }

    button.prop('disabled', true);
    message.text('Đang xử lý...');

    $.ajax({
        url: 'register.php',
        type: 'POST',
        dataType: 'json',
        data: form.serialize(),
        success: function(response) {
            if (response.success) {
                message.text(response.message);
                form[0].reset();
            } else {
                message.text(response.message);
            }
        },
        error: function() {
            message.text('Không thể kết nối đến máy chủ.');
        },
        complete: function() {
            button.prop('disabled', false);
        }
    });
});

Đây là cấu trúc cơ bản nhưng đã giải quyết được nhiều vấn đề quan trọng: ngăn gửi mặc định, kiểm tra dữ liệu, khóa nút trong lúc xử lý, phân biệt thành công và thất bại, đồng thời luôn khôi phục trạng thái nút sau khi yêu cầu kết thúc.

Phân biệt lỗi kết nối và lỗi nghiệp vụ

Hai loại lỗi này không nên bị đánh đồng.

Nếu AJAX không thể kết nối đến máy chủ, đây là vấn đề ở quá trình giao tiếp. Trong trường hợp đó, hàm error có thể được kích hoạt.

Ngược lại, máy chủ có thể nhận yêu cầu thành công nhưng từ chối xử lý vì email đã tồn tại, dữ liệu không hợp lệ hoặc người dùng không có quyền thực hiện thao tác. Đây là lỗi nghiệp vụ và thường được biểu diễn trong dữ liệu JSON trả về.

Ví dụ:

{
    "success": false,
    "message": "Email này đã được sử dụng."
}

Do đó, không nên viết toàn bộ thông báo lỗi vào error. Hàm này chủ yếu xử lý những trường hợp yêu cầu không hoàn thành theo cách bình thường; còn kết quả nghiệp vụ cần được đọc từ phản hồi của máy chủ.

Kiểm tra dữ liệu ở trình duyệt và phía máy chủ

Kiểm tra dữ liệu bằng jQuery giúp người dùng nhận phản hồi nhanh mà không phải chờ máy chủ. Tuy nhiên, đây chỉ là lớp kiểm tra đầu tiên.

Ví dụ, nếu một trường bắt buộc phải có giá trị, JavaScript có thể kiểm tra ngay:

const username = $('#username').val().trim();

if (username.length < 3) {
    $('#message').text('Tên đăng nhập phải có ít nhất 3 ký tự.');
    return;
}

Nhưng máy chủ vẫn phải kiểm tra lại dữ liệu. Người dùng có thể vô hiệu hóa JavaScript, tự tạo HTTP request hoặc thay đổi dữ liệu trước khi gửi.

Nguyên tắc cần nhớ là:

JavaScript kiểm tra để cải thiện trải nghiệm.
Máy chủ kiểm tra để bảo vệ hệ thống.

Không nên xem validation phía trình duyệt là một cơ chế bảo mật.

Không đưa nghiệp vụ quan trọng vào jQuery

jQuery có thể quyết định giao diện hiển thị gì, nhưng không nên là nơi quyết định những thông tin mà máy chủ phải bảo vệ.

Ví dụ, với chức năng mua hàng, trình duyệt có thể gửi mã sản phẩm và số lượng. Nhưng giá cuối cùng không nên được tin tưởng chỉ vì JavaScript đã tính toán trước đó. Máy chủ phải lấy dữ liệu phù hợp và tự xác định giá trị cần thiết.

Tương tự, quyền quản trị, trạng thái tài khoản, quyền chỉnh sửa hoặc dữ liệu riêng tư phải được kiểm tra ở phía máy chủ.

Ngăn người dùng gửi cùng một yêu cầu nhiều lần

Khóa nút trong lúc AJAX đang chạy là giải pháp giao diện hữu ích, nhưng trong những chức năng quan trọng, chỉ khóa nút là chưa đủ.

Trình duyệt có thể gửi lại request, người dùng có thể mở nhiều tab hoặc một yêu cầu có thể bị gửi lại do mạng không ổn định. Với những thao tác tạo dữ liệu hoặc giao dịch quan trọng, phía máy chủ cần có cơ chế đảm bảo một yêu cầu không vô tình tạo ra cùng một kết quả nhiều lần.

Ở phía jQuery, ít nhất nên ngăn thao tác lặp lại trong cùng một phiên tương tác:

let submitting = false;

$('#orderForm').on('submit', function(event) {
    event.preventDefault();

    if (submitting) {
        return;
    }

    submitting = true;

    const form = $(this);
    const button = form.find('button[type="submit"]');

    button.prop('disabled', true);

    $.ajax({
        url: 'create-order.php',
        type: 'POST',
        dataType: 'json',
        data: form.serialize(),
        complete: function() {
            submitting = false;
            button.prop('disabled', false);
        }
    });
});

Đoạn mã này tạo thêm một lớp bảo vệ ở giao diện. Tuy nhiên, với thao tác có tính chất quan trọng như tạo đơn hàng hoặc ghi nhận thanh toán, cần thiết kế cơ chế chống trùng ở phía máy chủ thay vì chỉ dựa vào JavaScript.

Upload tệp bằng jQuery và FormData

Khi biểu mẫu có file, serialize() không phải lựa chọn phù hợp để gửi nội dung tệp. Trường hợp này nên sử dụng FormData.

Ví dụ giao diện:

<form id="uploadForm">
    <input type="file" name="image" id="image">
    <button type="submit">Tải lên</button>
</form>

<div id="uploadMessage"></div>

jQuery có thể gửi FormData như sau:

$('#uploadForm').on('submit', function(event) {
    event.preventDefault();

    const form = this;
    const formData = new FormData(form);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#uploadMessage').text('Tải tệp thành công.');
        },
        error: function() {
            $('#uploadMessage').text('Không thể tải tệp.');
        }
    });
});

processData: false ngăn jQuery cố chuyển dữ liệu thành chuỗi truy vấn. contentType: false cho phép trình duyệt tự thiết lập kiểu nội dung phù hợp cho FormData.

Phần quan trọng hơn nằm ở phía máy chủ. File tải lên phải được kiểm tra về loại tệp, kích thước, tên, vị trí lưu trữ và các điều kiện an toàn khác. Không nên coi việc giới hạn phần mở rộng bằng JavaScript là biện pháp bảo vệ đủ mạnh.

Hiển thị tiến trình tải tệp

Với file có dung lượng lớn, chỉ hiển thị dòng “Đang tải...” chưa chắc đã mang lại trải nghiệm tốt. Người dùng thường cần biết quá trình đang diễn ra đến đâu.

Trong trường hợp cần hiển thị tiến trình upload, có thể sử dụng XMLHttpRequest thông qua cấu hình AJAX của jQuery:

$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    xhr: function() {
        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(event) {
            if (event.lengthComputable) {
                const percent = Math.round(
                    (event.loaded / event.total) * 100
                );

                $('#uploadProgress').text(percent + '%');
            }
        });

        return xhr;
    },
    success: function(response) {
        $('#uploadMessage').text('Tải lên thành công.');
    }
});

Tiến trình này chỉ phản ánh quá trình truyền dữ liệu từ trình duyệt lên máy chủ. Nó không có nghĩa máy chủ đã hoàn tất toàn bộ việc xử lý file. Nếu máy chủ còn phải xử lý ảnh, tạo thumbnail hoặc lưu dữ liệu, giao diện cần dựa vào phản hồi cuối cùng để xác định thao tác đã hoàn tất.

Tổ chức mã jQuery để dễ bảo trì

Một đoạn jQuery có thể rất ngắn khi chức năng mới bắt đầu. Nhưng khi website có hàng chục chức năng, việc đặt toàn bộ mã trong một file và viết liên tục các đoạn xử lý sự kiện sẽ khiến việc tìm lỗi trở nên khó khăn.

Một nguyên tắc đơn giản là mỗi chức năng nên có phạm vi trách nhiệm tương đối rõ ràng.

Thay vì:

$('#button1').click(function() {
    // rất nhiều xử lý
});

$('#button2').click(function() {
    // rất nhiều xử lý khác
});

$('#form1').submit(function() {
    // tiếp tục rất nhiều xử lý
});

Có thể tách logic thành các hàm có tên thể hiện đúng nhiệm vụ:

function loadProducts(page) {
    // Tải danh sách sản phẩm
}

function searchProducts(keyword) {
    // Tìm kiếm sản phẩm
}

function submitOrder(form) {
    // Gửi đơn hàng
}

$('#searchButton').on('click', function() {
    searchProducts($('#keyword').val());
});

Cách này không bắt buộc phải biến website thành một hệ thống JavaScript phức tạp. Mục tiêu chỉ là tránh việc một event handler phải chịu trách nhiệm cho quá nhiều công việc cùng lúc.

Không lặp lại cùng một cấu hình AJAX

Nếu website có nhiều yêu cầu AJAX, bạn có thể nhận thấy một số phần lặp đi lặp lại: hiển thị trạng thái, xử lý lỗi, thiết lập kiểu dữ liệu hoặc chuẩn hóa phản hồi.

Khi sự lặp lại đủ lớn, có thể tạo một hàm dùng chung:

function sendRequest(options) {
    return $.ajax({
        url: options.url,
        type: options.type || 'GET',
        dataType: options.dataType || 'json',
        data: options.data || {}
    });
}

sendRequest({
    url: 'products.php',
    type: 'GET',
    data: {
        page: 1
    }
}).done(function(response) {
    console.log(response);
});

Không phải mọi dự án đều cần xây dựng một lớp AJAX riêng. Nếu website nhỏ, việc trừu tượng hóa quá sớm có thể khiến mã nguồn khó hiểu hơn. Chỉ nên gom những phần thực sự lặp lại và có quy luật ổn định.

Quản lý sự kiện cho nội dung được tạo động

Đây là một trong những tình huống xuất hiện thường xuyên khi sử dụng AJAX. Một danh sách ban đầu có thể chưa chứa nút xóa, nhưng sau khi AJAX tải dữ liệu, các nút xóa mới được đưa vào DOM.

Nếu gắn sự kiện trực tiếp trước khi các nút đó xuất hiện, sự kiện có thể không hoạt động.

Ví dụ không nên phụ thuộc hoàn toàn vào cách gắn trực tiếp trong trường hợp phần tử được tạo sau:

$('.delete-item').on('click', function() {
    // xử lý xóa
});

Thay vào đó, có thể dùng event delegation:

$(document).on('click', '.delete-item', function() {
    const id = $(this).data('id');

    console.log(id);
});

Trong một ứng dụng lớn, có thể đặt delegation trên một phần tử cha ổn định thay vì toàn bộ document để giới hạn phạm vi xử lý:

$('#productList').on('click', '.delete-item', function() {
    const id = $(this).data('id');

    console.log(id);
});

Cách thứ hai thường dễ kiểm soát hơn vì sự kiện chỉ được theo dõi trong khu vực cần thiết.

Xóa dữ liệu bằng AJAX và cập nhật danh sách

Chức năng xóa là một ví dụ rất tốt để kết hợp nhiều kỹ thuật đã trình bày. Người dùng nhấn nút, jQuery lấy mã bản ghi, gửi yêu cầu, chờ máy chủ xác nhận rồi mới loại phần tử khỏi giao diện.

Ví dụ:

$('#productList').on('click', '.delete-item', function() {
    const button = $(this);
    const id = button.data('id');

    if (!confirm('Bạn có chắc muốn xóa dữ liệu này?')) {
        return;
    }

    button.prop('disabled', true);

    $.ajax({
        url: 'delete-product.php',
        type: 'POST',
        dataType: 'json',
        data: {
            id: id
        },
        success: function(response) {
            if (!response.success) {
                alert(response.message);
                button.prop('disabled', false);
                return;
            }

            button.closest('.product-item').remove();
        },
        error: function() {
            alert('Không thể thực hiện thao tác.');
            button.prop('disabled', false);
        }
    });
});

Một điểm rất quan trọng là không xóa phần tử khỏi giao diện trước khi máy chủ xác nhận thành công. Nếu xóa ngay lập tức rồi máy chủ từ chối thao tác, giao diện sẽ hiển thị trạng thái không đúng với dữ liệu thật.

Trong các chức năng cần tính nhất quán cao, giao diện nên phản ánh kết quả đã được máy chủ xác nhận thay vì tự giả định rằng thao tác chắc chắn thành công.

Tránh biến AJAX thành một khối mã khó kiểm soát

Khi mới học, nhiều người thường viết toàn bộ chức năng trong một callback AJAX. Cách này có thể chạy tốt với ví dụ nhỏ nhưng nhanh chóng trở nên khó đọc khi chức năng phát triển.

Một callback có thể đồng thời kiểm tra dữ liệu, thay đổi hàng chục phần tử, tạo thông báo, cập nhật biến trạng thái và xử lý nhiều trường hợp khác nhau.

Cách tốt hơn là chia các nhiệm vụ thành những hàm nhỏ có ý nghĩa:

function showLoading() {
    $('#message').text('Đang xử lý...');
}

function showMessage(message) {
    $('#message').text(message);
}

function updateProductList(html) {
    $('#productList').html(html);
}

function loadProducts(page) {
    showLoading();

    $.ajax({
        url: 'products.php',
        type: 'GET',
        data: {
            page: page
        },
        success: function(response) {
            updateProductList(response);
        },
        error: function() {
            showMessage('Không thể tải dữ liệu.');
        }
    });
}

Khi chức năng được chia thành các phần có tên rõ ràng, người đọc không cần hiểu từng dòng ngay lập tức để biết đoạn mã đang làm gì.

Bảo mật khi xây dựng chức năng AJAX

AJAX không tạo ra một cơ chế bảo mật riêng. Nó chỉ thay đổi cách trình duyệt giao tiếp với máy chủ. Vì vậy, mọi nguyên tắc bảo mật của một ứng dụng web thông thường vẫn phải được áp dụng cho các endpoint được gọi bằng AJAX.

Một lỗi tư duy phổ biến là cho rằng người dùng không nhìn thấy giao diện quản trị hoặc nút thao tác thì họ không thể gọi được URL AJAX tương ứng. Thực tế, request có thể được tạo trực tiếp mà không cần sử dụng giao diện website.

Do đó, máy chủ phải tự kiểm tra mọi dữ liệu và quyền hạn liên quan đến yêu cầu.

Kiểm tra quyền ở phía máy chủ

Giả sử website có chức năng xóa sản phẩm. jQuery có thể gửi mã sản phẩm:

$.ajax({
    url: 'delete-product.php',
    type: 'POST',
    dataType: 'json',
    data: {
        id: 25
    }
});

Không được mặc định rằng người gửi request có quyền xóa sản phẩm chỉ vì nút xóa nằm trong khu vực quản trị. Máy chủ phải kiểm tra phiên đăng nhập, quyền của tài khoản và sản phẩm đó có thuộc phạm vi được phép thao tác hay không.

jQuery chỉ chịu trách nhiệm gửi yêu cầu. Quyết định cuối cùng phải nằm ở phía máy chủ.

Không tin dữ liệu do jQuery gửi lên

Các giá trị như giá sản phẩm, số tiền, quyền hạn, trạng thái đơn hàng hoặc mã người dùng không nên được xem là dữ liệu đáng tin chỉ vì chúng được tạo bởi JavaScript.

JavaScript chạy trên trình duyệt của người dùng và có thể bị thay đổi. Vì vậy, máy chủ cần xác thực lại dữ liệu trước khi thực hiện nghiệp vụ.

Đây cũng là lý do không nên đặt các quy tắc bảo mật quan trọng vào mã jQuery với suy nghĩ rằng người dùng không thể thay đổi chúng.

CSRF và những request làm thay đổi dữ liệu

Những AJAX request có tác dụng tạo, sửa hoặc xóa dữ liệu cần được bảo vệ phù hợp với cơ chế xác thực của website. Một trong những vấn đề cần quan tâm là CSRF.

Với những hệ thống sử dụng session hoặc cookie để xác thực, máy chủ thường cần một cơ chế token để xác nhận request thực sự xuất phát từ một phiên hợp lệ.

Token có thể được đưa vào biểu mẫu và gửi cùng dữ liệu AJAX.

<input type="hidden" name="csrf_token" value="TOKEN_CUA_HE_THONG">

Sau đó:

const form = $('#orderForm');

$.ajax({
    url: 'create-order.php',
    type: 'POST',
    dataType: 'json',
    data: form.serialize()
});

Phía máy chủ sẽ kiểm tra token trước khi tiếp tục xử lý. Cách triển khai cụ thể phụ thuộc vào framework hoặc kiến trúc backend của website, nhưng nguyên tắc chung là request thay đổi dữ liệu phải được xác thực chứ không chỉ dựa vào việc người dùng đã đăng nhập.

Kiểm soát dữ liệu trả về trước khi đưa vào giao diện

Một trong những thao tác tiện lợi của jQuery là chèn HTML bằng html(). Tuy nhiên, việc đưa dữ liệu không đáng tin trực tiếp vào HTML có thể tạo ra rủi ro nếu dữ liệu chứa nội dung độc hại.

Ví dụ, nếu máy chủ trả về dữ liệu người dùng và bạn đưa thẳng dữ liệu đó vào giao diện mà không có bước xử lý phù hợp, nguy cơ XSS có thể xuất hiện.

Với những giá trị chỉ cần hiển thị dưới dạng văn bản, text() thường phù hợp hơn:

$('#message').text(response.message);

Thay vì:

$('#message').html(response.message);

Điều này không có nghĩa html() luôn sai. Nếu máy chủ chủ động trả về một khối HTML đã được kiểm soát và thiết kế để hiển thị, nó có thể là lựa chọn phù hợp. Vấn đề nằm ở nguồn dữ liệu và cách dữ liệu được tạo ra.

Chọn cách cập nhật DOM theo loại dữ liệu

Loại dữ liệu	Cách xử lý thường phù hợp
Văn bản thông báo	text()
Số lượng hoặc giá trị đơn giản	text()
Thuộc tính của phần tử	attr() hoặc prop()
Khối HTML được máy chủ kiểm soát	html()
Dữ liệu cần tạo giao diện phía trình duyệt	Đọc JSON và dựng phần tử phù hợp

Chọn đúng phương thức không chỉ giúp mã nguồn dễ hiểu hơn mà còn giảm những rủi ro không cần thiết.

Tối ưu hiệu năng cho các chức năng AJAX

AJAX giúp tránh tải lại toàn bộ trang nhưng không đồng nghĩa mọi AJAX request đều nhẹ. Nếu thiết kế không hợp lý, website vẫn có thể tạo rất nhiều request và gây tải lớn cho máy chủ.

Hiệu năng cần được xem xét từ cả hai phía: trình duyệt và máy chủ.

Không gọi AJAX khi chưa thực sự cần

Một số thao tác có thể xử lý hoàn toàn ở trình duyệt mà không cần gửi request. Ví dụ, mở hoặc đóng một khu vực nội dung, đổi trạng thái một nút hoặc kiểm tra một giá trị đơn giản có thể không cần đến máy chủ.

AJAX nên được sử dụng khi trình duyệt thực sự cần dữ liệu hoặc nghiệp vụ từ máy chủ.

Giảm dữ liệu gửi và nhận

Nếu giao diện chỉ cần ba giá trị, không nhất thiết phải trả về một lượng dữ liệu lớn chứa toàn bộ bản ghi. Phản hồi càng lớn thì thời gian truyền và xử lý càng tăng.

Ví dụ, một yêu cầu cập nhật giỏ hàng có thể chỉ cần trả về:

{
    "success": true,
    "cartCount": 4,
    "cartTotal": "1250000"
}

Thay vì trả về toàn bộ nội dung của trang giỏ hàng nếu giao diện chỉ cần cập nhật số lượng và tổng tiền.

Debounce và throttle cho thao tác liên tục

Những sự kiện như nhập từ khóa, cuộn trang hoặc thay đổi kích thước cửa sổ có thể phát sinh rất nhiều lần. Nếu mỗi lần xảy ra đều gọi AJAX, hệ thống sẽ phải xử lý nhiều request không cần thiết.

Debounce phù hợp khi muốn chờ người dùng ngừng thao tác rồi mới thực hiện. Throttle phù hợp khi muốn giới hạn tần suất thực hiện trong một khoảng thời gian.

Hai kỹ thuật này đặc biệt hữu ích cho tìm kiếm trực tiếp, tải dữ liệu khi cuộn và những giao diện có tương tác liên tục.

Debug AJAX khi chức năng không hoạt động

Khi AJAX không chạy, không nên sửa mã một cách ngẫu nhiên. Hãy kiểm tra theo đúng luồng request.

Kiểm tra sự kiện có thực sự được kích hoạt hay không.
Kiểm tra dữ liệu trước khi gửi.
Kiểm tra URL của endpoint.
Kiểm tra phương thức GET hoặc POST.
Kiểm tra request trong công cụ phát triển của trình duyệt.
Kiểm tra status HTTP.
Kiểm tra nội dung response.
Kiểm tra lỗi JavaScript.
Kiểm tra log phía máy chủ nếu request đã tới backend.

Ví dụ, có thể tạm thời kiểm tra dữ liệu:

console.log({
    keyword: $('#keyword').val(),
    category: $('#category').val()
});

Nếu dữ liệu đúng nhưng request không xuất hiện, vấn đề có thể nằm ở event handler hoặc JavaScript phía trước. Nếu request xuất hiện nhưng trả về lỗi, cần chuyển sang kiểm tra endpoint và backend.

Đọc status HTTP thay vì chỉ nhìn thông báo

Một response lỗi HTTP cung cấp thông tin rất hữu ích. Các nhóm status khác nhau có thể giúp xác định vấn đề nằm ở xác thực, quyền truy cập, tài nguyên không tồn tại hay lỗi phía máy chủ.

Thay vì chỉ hiển thị một thông báo chung chung cho mọi trường hợp, trong quá trình debug nên kiểm tra response và status để tìm đúng nguyên nhân.

Xây dựng một chức năng AJAX hoàn chỉnh từ đầu đến cuối

Để thấy rõ cách các kỹ thuật kết hợp với nhau, hãy hình dung chức năng “Thêm sản phẩm vào danh sách yêu thích”. Đây là một chức năng nhỏ nhưng chứa gần như đầy đủ những vấn đề thường gặp.

Luồng xử lý có thể được thiết kế như sau:

Người dùng nhấn nút yêu thích.
jQuery lấy mã sản phẩm.
Giao diện tạm thời khóa nút.
jQuery gửi request AJAX.
Máy chủ kiểm tra đăng nhập và quyền thực hiện.
Máy chủ xử lý dữ liệu.
Máy chủ trả về JSON.
jQuery kiểm tra kết quả.
Giao diện cập nhật trạng thái.
Nút được mở lại nếu cần.

HTML:

<button type="button" class="favorite-button" data-id="25">
    Yêu thích
</button>

jQuery:

$('#productList').on('click', '.favorite-button', function() {
    const button = $(this);
    const productId = button.data('id');

    if (button.prop('disabled')) {
        return;
    }

    button.prop('disabled', true);

    $.ajax({
        url: 'favorite.php',
        type: 'POST',
        dataType: 'json',
        data: {
            product_id: productId
        },
        success: function(response) {
            if (!response.success) {
                alert(response.message);
                return;
            }

            button.text('Đã yêu thích');
            button.attr('data-state', 'active');
        },
        error: function() {
            alert('Không thể thực hiện yêu cầu.');
        },
        complete: function() {
            button.prop('disabled', false);
        }
    });
});

Điểm đáng chú ý là event được đặt trên vùng chứa danh sách. Điều này giúp chức năng tiếp tục hoạt động ngay cả khi các sản phẩm được tải thêm bằng AJAX sau đó.

Phía máy chủ tiếp tục chịu trách nhiệm xác thực người dùng, kiểm tra mã sản phẩm, xử lý nghiệp vụ và trả về kết quả. jQuery chỉ nhận kết quả rồi phản ánh nó lên giao diện.

Khi nào nên dùng jQuery AJAX và khi nào không?

jQuery vẫn có thể rất tiện lợi trong những website đang sử dụng jQuery hoặc các dự án cần xây dựng nhanh những tương tác phía trình duyệt. Tuy nhiên, không nên biến mọi thao tác thành AJAX chỉ vì có thể làm được.

Nếu một trang cần URL riêng để trình duyệt có thể truy cập trực tiếp, hỗ trợ điều hướng tự nhiên hoặc có nội dung cần máy tìm kiếm thu thập, việc trả về một trang HTML thông thường có thể phù hợp hơn.

AJAX phát huy giá trị mạnh nhất ở những thao tác mà người dùng cần tương tác với dữ liệu nhưng không cần tải lại toàn bộ trang.

Ví dụ phù hợp gồm:

Tìm kiếm và lọc dữ liệu.
Cập nhật số lượng sản phẩm.
Gửi biểu mẫu nhỏ.
Thêm hoặc xóa một bản ghi.
Tải thêm nội dung.
Cập nhật trạng thái.
Kiểm tra dữ liệu theo thời gian thực.

Những sai lầm thường gặp khi viết jQuery AJAX

Qua thực tế triển khai, một số lỗi thường không nằm ở cú pháp mà nằm ở cách thiết kế chức năng.

Gọi AJAX quá nhiều: một thao tác nhỏ cũng tạo request liên tục.
Không khóa thao tác: người dùng có thể gửi cùng một yêu cầu nhiều lần.
Không xử lý lỗi: giao diện chỉ có trường hợp thành công.
Tin dữ liệu phía trình duyệt: xem JavaScript như một lớp bảo mật.
Không xử lý nội dung động: sự kiện không hoạt động với phần tử được tạo sau AJAX.
Trộn quá nhiều logic: event handler chứa cả validation, request, xử lý dữ liệu và dựng giao diện.
Không thống nhất response: mỗi endpoint trả dữ liệu theo một kiểu khác nhau.
Thay toàn bộ DOM: tải lại quá nhiều nội dung trong khi chỉ một phần nhỏ thay đổi.
Không kiểm soát request cũ: kết quả cũ có thể ghi đè kết quả mới.

Những lỗi này thường không xuất hiện khi chức năng còn nhỏ. Chúng bắt đầu trở thành vấn đề khi website có nhiều dữ liệu và nhiều thao tác đồng thời.

Quy trình kiểm tra trước khi đưa chức năng vào sử dụng

Trước khi xem một chức năng jQuery AJAX là hoàn thiện, nên kiểm tra cả trường hợp bình thường lẫn những tình huống bất thường.

Thử dữ liệu hợp lệ.
Thử dữ liệu rỗng.
Thử dữ liệu sai định dạng.
Thử nhấn nút nhiều lần liên tục.
Thử mạng chậm.
Thử khi máy chủ trả lỗi.
Thử khi phiên đăng nhập hết hạn.
Thử với dữ liệu lớn.
Thử với phần tử được tạo động.
Kiểm tra request và response trong công cụ phát triển.
Kiểm tra quyền xử lý ở phía máy chủ.
Kiểm tra dữ liệu trả về trước khi đưa vào DOM.

Nếu chức năng vượt qua được những trường hợp trên, khả năng hoạt động ổn định trong thực tế sẽ cao hơn nhiều so với việc chỉ kiểm tra một trường hợp thành công.

Tư duy quan trọng nhất khi làm jQuery thực chiến

jQuery không phải phần khó nhất của một chức năng AJAX. Các phương thức như on(), val(), prop(), html(), append() hay $.ajax() có thể học tương đối nhanh.

Phần khó hơn là thiết kế được một luồng xử lý hợp lý giữa người dùng, giao diện, trình duyệt và máy chủ.

Một chức năng tốt thường có những đặc điểm sau:

Người dùng biết hệ thống đang xử lý gì.
Dữ liệu được kiểm tra ở đúng nơi.
Không tạo request không cần thiết.
Không cho phép thao tác lặp lại ngoài ý muốn.
Phản hồi thành công và thất bại đều được xử lý.
Giao diện chỉ thay đổi khi có kết quả phù hợp.
Nội dung động vẫn nhận được sự kiện chính xác.
Máy chủ không tin tưởng dữ liệu chỉ vì nó đến từ jQuery.
Mã nguồn được chia thành những phần dễ đọc và dễ sửa.

Khi nắm được tư duy này, jQuery không còn chỉ là công cụ để tạo hiệu ứng hoặc bắt sự kiện. Nó trở thành một phương tiện để kết nối hành động của người dùng với dữ liệu và nghiệp vụ phía máy chủ một cách trực quan.

Đó cũng là giá trị cốt lõi của việc học jQuery theo hướng thực chiến: không ghi nhớ thật nhiều hàm, mà biết khi nào cần dùng chúng, dùng ở đâu và làm thế nào để cả chức năng hoạt động đúng trong những tình huống thực tế.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

Chia sẻ nội dung đánh giá của bạn về jQuery thực chiến: Xây dựng chức năng website bằng jQuery và AJAX
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !