Người Viết : ViKiMi Editor

Hướng dẫn sử dụng jQuery AJAX đơn giản, nhanh chóng, hiệu quả cao khi thiết kế Website
Chúng ta đã biết rằng Ajax thực sự hữu ích, những vận dụng dữ liệu bằng cách sử dụng Ajax đem lại nhiều hiệu quả tiện dụng trên Website. Trước đây Sử dụng Ajax không cần thêm bất kỳ Plugin nào, chúng ta chỉ cần Javascript đơn thuần và XML (Có thể tìm trong những bài trước). Tuy nhiên trong phần này sẽ giới thiệu với bạn về jQuery AJAX, thực sự rất tiện lợi hữu dụng.
Nói lại một các sơ lược về AJAX là gì :
AJAX = Asynchronous JavaScript and XML
+ Là xử lý bất đồng bộ JavaScript và XML. AJAX cho phép tạo ra một Website có thể hiển thị tốt nhất, nhanh nhất. AJAX cho phép tải dữ liệu nền nên dữ liệu luôn đạt tốc độ truyền nhanh nhất có thể. Tại sao AJAX có thể làm cho Website hiển thị nhanh & linh hoạt hơn?
+ Vì AJAX còn cho phép hiển thị dữ liệu từng phần của trang Web mà không cần tải lại toàn bộ trang Web. Bạn có thể nghĩ xem, nếu trang Web đã được hiển thị trên trình duyệt, và công việc diễn ra là bạn chỉ cần thay đổi dữ liệu hiển thị của một phần trên trang Web. AJAX giúp bạn hiển thị phần này mà không cồn tải lại toàn bộ trang Web, điều đó thật tuyệt vời. Đó là một sức mạnh mà Ajax đã đem lại khiến Website linh hoạt & nhanh hơn.
+ Thật tốt vì jQuery cũng cung cấp cho chúng ta khả năng xử lý với AJAX. Chúng ta đã có thể thao tác jQuery AJAX thật hoàn hảo. Các chức năng mà jQuery & AJAX mang lại mới mẻ, cách làm việc thân thiện hơn. jQuery AJAX tạo ra một cách làm việc rất dễ dàng, không chỉ có vậy cách làm việc với jQuery còn giúp cho các Lập Trình Viên dễ nhớ hơn về cách làm việc. Có thể thấy lợi ích lớn khi sử dụng jQuery AJAX.
+ Khi có jQuery viết mã với AJAX thật đơn giản.
+ Có jQuery việc Viết Mã sẽ nhanh hơn và yêu thích hơn.
GIỚI THIỆU CÁCH THỨC LÀM VIỆC ĐƠN GIẢN CỦA jQUERY AJAX
Phương thức Load :
Đây là một phương thức cực kỳ dễ sử dụng. Phương thức jQuery Load cho phép tải dữ liệu bạn cần thiết từ SERVER / Máy chủ. Và sử dụng nó trên giao diện Website / sử dụng tại giao diện người dùng. Lấy dữ liệu từ SERVER và hiển thị tại CLIENT, điều này rất thú vị khi thao tác với JQUERY AJAX.
Syntax :
$(selector).load(URL,data,callback);
Các tham số sử dụng :
+ URL ( bắt buộc ) : chỉ định URL mà bạn muốn tải
+ data ( tuỳ chọn ) : chỉ định tập hợp cặp chuỗi truy vấn key / value gửi cùng với yêu cầu
+ callback ( tuỳ chọn ) : chỉ định hàm callback sẽ thực thi sau khi phương thức Load thực thi xong.
1 ) EXAMPLE :
Tại Server chúng ta có file Contact.txt với nội dung sau :
<table class="table"> <thead id="t_head"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@tk.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@tk.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@tk.com</td> </tr> </tbody> </table>
+ Chúng ta sẽ lấy nội dung file Contact.txt trên SERVER và hiển thị vào thẻ DIV có id = “div1”. Chúng ta sẽ có xử lý như sau để làm được việc này :
<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(“contact.txt”);
});
});
</script>
</head>
<body>
<div id=”div1″></div>
<button>Hiển thị Contact</button>
</body>
</html>
+ Tuy nhiên, nếu bạn chỉ muốn lấy một phần trong nội dung của contact.txt. Ví dụ bạn chỉ muốn lây phần <thead> với mã id = “t_head”, công việc này cũng đơn giản với jQuery AJAX.
Mã Code thực hiện :
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“demo_test.txt #t_head”);
});
});
</script>
Như vậy, chúng ta đã thực hiện thành công chỉ hiển thị phần <thead> trong nội dung của contact.txt vào thẻ DIV có id = “div1”. jQuery AJAX đã mang lại sự linh hoạt vô cùng khi thao tác lấy dữ liệu từ SERVER. Quả thực nó thực sự tốt!