Ajax (Asynchronous JavaScript And XML) là một công nghệ cho phép giao tiếp giữa trang web và máy chủ mà không cần phải tải lại trang. Điều này giúp tăng trải nghiệm người dùng và giảm thời gian tải trang. Trong bài viết này, chúng ta sẽ tìm hiểu về cách tận dụng Ajax và sử dụng jQuery trong JavaScript.
Ajax cho phép gửi yêu cầu đến máy chủ và nhận phản hồi từ nó mà không cần tải lại trang. Điều này giúp giảm thời gian tải trang và tạo ra trải nghiệm tốt hơn cho người dùng.
Trong JavaScript, chúng ta sử dụng đối tượng XMLHttpRequest để tạo và gửi các yêu cầu Ajax. Đối tượng này cho phép chúng ta gửi yêu cầu GET hoặc POST đến máy chủ và xử lý phản hồi từ nó.
Dưới đây là ví dụ cơ bản về cách sử dụng đối tượng XMLHttpRequest:
// Tạo đối tượng XMLHttpRequest
var xhttp = new XMLHttpRequest();
// Thiết lập <a href="https://nodemy.vn/diem-qua-cach-su-dung-ham-trong-javascript-cuc-ky-de-hieu-cho-nguoi-moi-hoc-important/">hàm</a> callback
xhttp.onreadystatechange = function() {
if (<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.readyState == 4 && this.status == 200) {
// Xử lý phản hồi từ máy chủ
document.getElementById("demo").innerHTML = this.responseText;
}
};
// Gửi yêu cầu đến máy chủ
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Trong ví dụ này, chúng ta tạo một đối tượng XMLHttpRequest và thiết lập một hàm callback để xử lý phản hồi từ máy chủ. Sau đó, chúng ta gửi yêu cầu GET đến tập tin ajax_info.txt trên máy chủ bằng cách sử dụng phương thức open() và send().
Sử dụng jQuery để tận dụng Ajax
Dưới đây là một ví dụ về cách sử dụng jQuery để gửi yêu cầu Ajax:
// Gửi yêu cầu GET đến tập tin text.txt trên máy chủ
$.get("text.txt", function(data) {
// Xử lý phản hồi từ máy chủ
$("#demo").html(data);
});
Kết luận và bài viết có liên quan
Bài viết có liên quan: Giới thiệu về JavaScript và cú pháp cơ bản đơn giản dễ hiểu dành cho người mới bắt đầu ( important ) Khám phá các toán tử trong JavaScript: Từ cơ bản đến nâng cao đơn giản dành cho người mới ( important ) Khám phá sức mạnh của mảng trong JavaScript dễ hiểu dành cho người mới bắt đầu ( important )
