Chuyển Đổi Web: Phần 2 - Sự Trỗi Dậy của AJAX & jQuery

Giới Thiệu

Trong phần đầu tiên của loạt bài này, chúng ta đã nhìn nhận về web sơ khai — nơi mà việc tải lại toàn bộ trang là điều bình thường, với máy chủ đảm nhận đa số công việc: từ định tuyến, kết xuất cho đến xử lý dữ liệu và phản hồi giao diện người dùng.

Nhưng sau đó, một điều gì đó đã thay đổi.

Một kỹ thuật mới đã xuất hiện, cho phép các trang web cập nhật mà không cần làm mới toàn bộ trang. Đây không phải là một ngôn ngữ lập trình mới. Đó là một cách tiếp cận mới, và nó đã định hình lại cách người dùng tương tác với web.

Đó chính là lúc AJAX xuất hiện.

AJAX Là Gì?

AJAX là viết tắt của Asynchronous JavaScript and XML. Nhưng đừng để cái tên đánh lừa bạn — nó không chỉ giới hạn ở XML, và nó không phải là một thư viện hay framework. Nó là sự kết hợp của các công nghệ:

JavaScript (để thực hiện yêu cầu)
XMLHttpRequest (API, hiện đã được thay thế bởi fetch)
Khả năng của trình duyệt để cập nhật các phần cụ thể của DOM một cách động

AJAX cho phép trình duyệt gửi và nhận dữ liệu một cách bất đồng bộ mà không cần làm mới toàn bộ trang.

Đột nhiên, web trở nên tương tác.

Tại Sao Nó Lại Cách Mạng

Trước AJAX:

Bạn gửi một mẫu → máy chủ phản hồi → toàn bộ trang được tải lại
Bạn nhấp vào một liên kết → toàn bộ trang được làm mới với nội dung mới

Với AJAX:

Bạn có thể lấy dữ liệu mới và chèn nó trực tiếp vào DOM
Các mẫu có thể gửi ở nền, với thông điệp lỗi/thành công động
Các trang cảm thấy mượt mà hơn, nhanh hơn, giống như ứng dụng

AJAX không chỉ giảm thời gian tải — nó đã định nghĩa lại kỳ vọng của người dùng.

Kiến Trúc Đã Thay Đổi Như Thế Nào?

Với sự xuất hiện của AJAX, backend vẫn xử lý việc lưu trữ, định tuyến và logic kinh doanh, nhưng giờ đây, frontend đã chịu trách nhiệm cho một phần trải nghiệm:

Frontend bắt đầu tách ra khỏi backend. Không hoàn toàn — nhưng đủ để tạo ra sự chuyển mình.

Ví Dụ Thực Tế: Hộp Tìm Kiếm Trực Tuyến

Trước AJAX:

Người dùng nhập truy vấn → gửi mẫu → máy chủ phản hồi với một trang mới

Với AJAX:

Người dùng nhập → trình duyệt gửi yêu cầu AJAX trên từng phím bấm → kết quả xuất hiện ngay dưới mà không cần tải lại

Trải nghiệm mượt mà như vậy trở nên phổ biến trên Gmail, Facebook, Twitter — đó là khởi đầu của web động.

Sự Trỗi Dậy của jQuery

AJAX không phải lúc nào cũng dễ sử dụng — XMLHttpRequest thường dài dòng và không đồng nhất giữa các trình duyệt. Nhập jQuery, công cụ giúp AJAX trở nên dễ tiếp cận hơn:

Copy

$.get('/api/posts', function(data) {
  $('#post-list').html(data);
});

Với chỉ một dòng, bạn có thể lấy và hiển thị nội dung một cách động. jQuery đã trở thành cách để thực hiện AJAX — và định hình phát triển frontend trong nhiều năm.

jQuery Nắm Giữ Giao Diện Người Dùng

jQuery không chỉ làm AJAX dễ hơn — nó còn biến đổi cách các nhà phát triển xây dựng giao diện người dùng.

Với chỉ vài dòng mã, bạn có thể:

Hiện và ẩn các phần tử
Tạo dropdowns, modals, tabs, sliders
Hoạt hình các phần tử DOM
Chèn HTML một cách động

Copy

$('#message').text('Mẫu đã được gửi!').fadeIn().delay(3000).fadeOut();

Đột nhiên, giao diện trở nên sống động. Bạn không cần phải tải lại các trang hoặc viết mã JavaScript dài dòng để có được tính tương tác. Mọi thứ đều tức thì và trực quan.

Thời kỳ này chứng kiến sự bùng nổ của các mẫu tương tác, xác thực trực tiếp, đầu vào tự gợi ý, cuộn vô hạn, và thậm chí là bảng điều khiển cảm giác như một trang đơn — tất cả nhờ vào sự kết hợp giữa jQuery và AJAX.

Đây là lần đầu tiên frontend thực sự bắt đầu nắm giữ trải nghiệm người dùng, không chỉ đơn thuần hiển thị những gì máy chủ gửi.

Những Bài Học Rút Ra

Sự xuất hiện của AJAX đã dạy chúng ta một vài điều quan trọng:

Không phải mọi thứ đều cần được tái kết xuất.
Người dùng thích tốc độ và tính liên tục.
Trình duyệt có khả năng làm nhiều hơn.

Đây là thời điểm các nhà phát triển bắt đầu nghĩ, "Nếu tôi có thể lấy và chèn dữ liệu như thế này, tại sao không đi xa hơn?"

Và đó chính xác là những gì đã xảy ra tiếp theo.

Tại Sao Giai Đoạn Này Quan Trọng

Giai đoạn này của web không chỉ là việc làm mọi thứ nhanh hơn. Nó đã giới thiệu một sự thay đổi tư duy:

Từ cách nghĩ dựa trên trang sang tương tác dựa trên thành phần
Từ việc chờ và làm mới sang phản hồi theo thời gian thực

Nó cũng đã đặt nền tảng cho cuộc cách mạng SPA (Single Page Application) sau này — nơi mọi thứ cuối cùng sẽ được xử lý ở phía client.

Trong phần 3, chúng ta sẽ đi sâu vào SPAs — cách JavaScript chiếm lĩnh việc kết xuất, định tuyến và toàn bộ trải nghiệm frontend. Những điều tốt, xấu và những gói nặng nề.

Nếu bạn thấy bài viết này hữu ích, hãy xem xét việc hỗ trợ công việc của tôi — điều đó có ý nghĩa rất lớn đối với tôi.

Hỗ trợ công việc của tôi