NỘI DUNG BÀI VIẾT
Trong bài viết này, chúng ta sẽ cùng tìm hiểu AJAX là gì và cách thức hoạt động của nó. Nhưng trước khi tìm hiểu các thuật ngữ này, hãy cũng mình xem qua một vài ví dụ thực tế để thấy được sức mạnh của AJAX nhé.
Chắc hẳn các bạn ai cũng quen với việc sử dụng chức năng tìm kiếm của Google rồi đúng không nào, khi bạn nhập từ khóa mong muốn vào ô tìm kiếm, có rất nhiều gợi ý được hiển thị. Từ khóa thay đổi theo thời gian thực nhưng trang web của Google vẫn giữ nguyên như cũ.
Đó chính là nhờ vào sự trợ giúp của AJAX, nó giúp viêc trao đổi dữ liệu nội bộ và các lớp hiển thị hoạt động đồng thời mà không ảnh hưởng đến chức năng của nhau. Hay việc bạn nhấn nút like một bài viết trên trang Facebook, chẳng ai muốn nhấn một chức năng nhỏ mà phải load lại cả trang đúng không nào? Vì vậy việc sử dụng AJAX là rất hữu ích.
Giống như trên, có hàng tá ví dụ mà bạn có thể bắt gặp ở bất cứ đâu. Toàn bộ sức mạnh hoạt động phía sau không gì khác ngoài AJAX. Vậy hãy cùng mình tìm hiểu về AJAX ngay nào!
AJAX là gì?
AJAX là viết tắt của Asynchronous JavaScript And XML. Nó không phải là một ngôn ngữ lập trình hay một Framework. Nó là một bộ các kỹ thuật thiết kế web để phát triển các ứng dụng Web tốt hơn, nhanh hơn và có tính tương tác hơn bằng cách sử dụng HTML, CSS, JavaScript và XML. Khoan bối rối nhé, mình sẽ giải thích từng thuật ngữ một cho bạn biết AJAX là gì.
- Asynchronous, hay nói ngắn hơn là Async – 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 đó. Lợi ích 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 thì là một ngôn ngữ lập trình nổi tiếng,chắc hẳn ai muốn học Front-end đều phải biết rồi. 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 là một dạng của ngôn ngữ markup như HTML, chữ đầy đủ của nó 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.
AJAX cho phép các trang web được cập nhật bất đồng bộ bằng cách trao đổi dữ liệu với máy chủ web phía sau. Điều này có nghĩa là có thể cập nhật các phần của trang web mà không cần tải lại toàn bộ trang do đó tăng trải nghiệm người dùng và hiệu suất tốt hơn.
Tìm hiểu thêm về bất đồng bộ trong JavaScript tại đây
AJAX hoạt động như thế nào?
Quy trình hoạt động cơ bản của AJAX tương đối đơn giản. Bạn chỉ cần nhìn vào sơ đồ sau là thấy.
- Một sự kiện xảy ra trong một trang web (VD: trang được tải, một nút được nhấp)
- Một đối tượng XMLHttpRequest được tạo bởi JavaScript
- Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web
- Máy chủ xử lý yêu cầu
- Máy chủ gửi phản hồi trở lại trang web
- Phản hồi được đọc bằng JavaScript
- Hành động thích hợp (như cập nhật trang) được thực hiện bởi JavaScript
AJAX sử dụng đối tượng XMLHttpRequest tích hợp trong trình duyệt để yêu cầu dữ liệu từ Web Server và HTML DOM để hiển thị hoặc sử dụng dữ liệu.
Đối tượng XMLHttpRequest: Nó là một API ở dạng một đối tượng có các phương thức giúp truyền dữ liệu giữa trình duyệt web và Web Server.
HTML DOM: Khi một trang web được tải, trình duyệt sẽ tạo một DOM(mô hình đối tượng tài liệu) của trang.
Cách sử dụng AJAX
Tạo một đối tượng XMLHttpRequest:
var xhttp = new XMLHttpRequest();Code language: JavaScript (javascript)Các thuộc tính của đối tượng XMLHttpRequest :
Thuộc tính readystate giữ trạng thái của XMLHttpRequest.
- 0: yêu cầu không được khởi tạo
- 1: kết nối máy chủ được thiết lập
- 2: yêu cầu được nhận
- 3: yêu cầu đang được xử lý
- 4: yêu cầu hoàn thành và phản hồi đã sẵn sàng
Thuộc tính onreadystatechange định nghĩa một hàm được gọi khi thuộc tính readystate thay đổi.
Thuộc tính status trả về số trạng thái của một yêu cầu. Có các giá trị sau:
- 200: “OK”
- 403: “Forbidden”
- 404: “Not Found”
Các phương thức của đối tượng XMLHttpRequest: Để gửi một yêu cầu đến Web Server, chúng ta sử dụng các phương thức open () và send () của đối tượng XMLHttpRequest.
xhttp.open("GET", "content.txt", true);
xhttp.send();Code language: JavaScript (javascript)Lý thuyết là như vậy, hãy cùng mình xem qua ví dụ này để hiểu rõ hơn về cách sử dụng AJAX nhé.
Ví dụ về AJAX để thay đổi nội dung của một trang web:
<!DOCTYPE html>
<html>
<body>
<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>
<script>
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
</script>
</body>
</html>Code language: HTML, XML (xml)Hãy lưu ý là file content.txt phải có trong thư mục gốc project của bạn nhé. Giờ hãy thử chạy để xem thành quả nào!
Tóm lại
Trên đây là bài giới thiệu về AJAX và cách sử dụng nó, bạn có thể thấy ưu điểm khi sử dụng AJAX là tạo ra trải nghiệm mượt mà cho người dùng. Người dùng truy cập không phải đợi lâu để thấy nội dung họ cần. Tuy nhiên, cũng tùy vào nhu cầu của khách truy cập nữa.
Giờ bạn đã biết AJAX là gì và cách thức hoạt động của nó, bạn có câu hỏi nào không? Đừng ngại hãy để lại bình luận bên dưới cho mình nhé. Chúc các bạn thành công!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
