Người Viết : ViKiMi Editor

Hướng dẫn thực hiện Callback Function với jQuery AJAX, phát triển Website tốt nhất !!!
jQuery AJAX cho phép thực hiện gọi Callback Function, đây là một điều rất thú vị. Cho phép Lập Trình Viên hoặc Nhà Phát Triển có thể phát triển các tính năng mở rộng một cách hiệu quả. Vậy sự tiện lợi này là thế nào? Tại sao nó lại mang lại nhiều tiện lợi vậy? Chắc hẳn nghe có vẻ khó khăn. Nhưng thực tế thì không hề khó khăn vì rõ ràng jQuery AJAX đã cho phép mọi công việc vô cùng đơn giản.
Chúng ta nên bắt đầu với Callback Function?
+ Callback Function là một chức năng sẽ được thực hiện khi những công việc bên trong phương thức Load() được hoàn thành. Điều đó có nghĩa là khi mọi dữ liệu đã được Load với jQuery AJAX, thì sẽ đến Callback Function được thực hiện. Nhờ vậy, tất cả các dữ liệu sẽ chắc chắn rằng luôn tồn tại.
+ Điều này thật tốt, Nó mang lại một sự chắc chắn khi thực hiện xử lý dữ liệu với Javascript. Nhờ đó mà Website của bạn sẽ thực sự có một giao diện ổn định với các chức năng cung cấp luôn hoạt động tốt.
+ Nếu không sử dụng Callback Function thi thật khó vì dữ liệu mà bạn mong muốn sẽ chưa đầy đủ. Điều này sẽ mang lại rủi ro cao, các chức năng bạn muốn cung cấp sẽ khó hoạt động như mong muốn.
SỬ DỤNG CALLBACK VỚI jQuery AJAX :
+ Tham số Callback tuỳ chọn cho phép chỉ định Callback Function sẽ thực thi khi Phương Thức Load() được hoàn thành.
+ Callback Function sẽ có những tham số sau:
(a) responseTxt : Chứa nội dung kết quả trả về nếu việc gọi tới SERVER sử dụng AJAX là thành công. Với nội dung kết quả trả về này, bạn có thể thực hiện hiển thị theo ý muốn.
(b) statusTxt : Chứa trạng thành công hay thất bại của việc gọi tới SERVER bằng AJAX
(c) xhr : Chứa đối tượng XMLHttpRequest
Để dễ dàng hiểu về Callback Function với jQUERY AJAX sẽ xem ví dụ sau đây:
Mã HTML :
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“demo_test.txt”, function(responseTxt, statusTxt, xhr){
if(statusTxt == “success”)
$(“#div1”).html(responseTxt);
if(statusTxt == “error”)
$(“#div1”).html(“Error: ” + xhr.status + “: ” + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id=”div1″></div>
<button>Hiển thị Contact</button>
</body>
</html>
Giải Thích :
+ Nếu việc lấy dữ liệu từ file demo_test.txt tại SERVER thành công, thì sẽ hiển thị nội dung dữ liệu vào thẻ DIV có id = “#div1”
+ Nếu việc lấy dữ liệu từ file demo_test.txt tại SERVER thất bại thì sẽ hiển thị status lỗi và nội dung dung lỗi.
+ Đó là cách dữ liệu sẽ được Xử lý với jQuery AJAX.