Kỹ thuật Ajax được dùng trong lập trình web với mục đích là lấy dữ liệu hoặc xử lý dữ liệu từ server. Sau đó hiển thị nó lên trang web NHƯNG KHÔNG RELOAD lại trang web. Anh lấy ví dụ như anh có một table chứa danh sách người dùng sau trên hệ thống chăm sóc khách hàng của anh. Bây giờ anh muốn xoá một dòng (khách hàng) thì anh click vào dấu ba chấm bên tay phải sau đó chọn nút “Xóa khỏi tài khoản”.
Như vậy các em có thể thấy Ajax được sử dụng để vẽ lại giao diện cho phần mà ta muốn thay đổi chứ không reload lại toàn trang web. Như các em biết khi reload toàn trang web thì lúc này trình duyệt sẽ vẽ lại tất cả các phần tử trên web và sẽ mất rất nhiều thời gian để vẽ toàn bộ các phần tử. Dẫn đến việc là người dùng sẽ chờ đợi rất lâu mới thấy được trang web. Nhờ có Ajax mà chúng ta có thể tăng Performance (hiệu năng) của website lên rất nhiều. Trước khi có công nghệ VueJS, Angular hay ReactJS thì Jquery Ajax được sử dụng hầu hết trong tất cả dự án web. Ngoài việc tăng hiệu năng vì không reload lại nguyên trang web. Ajax còn hoạt động theo cơ chế bất đồng bộ có nghĩa là khi anh bấm vào nút “Xóa khỏi tài khoản” thì nó sẽ thực hiện việc gọi lên server. Trong lúc đó anh có thể tiếp tục thực hiện các nhiệm vụ hay tác vụ khác trên website mà không cần phải chờ cho việc xoá tài khoản thành công rồi anh mới được phép thực hiện các nhiệm vụ khác. 2. Ajax LoadĐể lấy dữ liệu từ server trả về client thì Jquery cung cấp cho chúng ta phương thức load(). Cú pháp như sau 1 $(selector).load(URL,data,callback);
Anh có ví dụ dưới đây khi click vô button “Load Content” nó sẽ gọi lên server lúc này server sẽ trả về file là test.html. Giả sử anh có file test.html với nội dung như sau 1 2 3 <h1>Simple Ajax Demo</h1> <p id="hint">This is a simple example of Ajax loading.</p> <p><img src="sky.jpg" alt="Cloudy Sky"></p> Như vậy khi anh click vào button “Load Content” trong trường hợp gọi lên server thành công thì anh sẽ hiển thị alert thành công, còn nếu thất bại thì anh hiển thị alert thất bại 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Showing Ajax Load Request Status in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ # box").load("/examples/html/test.html", function(responseTxt, statusTxt, jqXHR){ });
</script>
</head>
<body> </body>
</html>
3. Ajax Get PostNgoài Ajax load chúng ta có thêm 2 phương thức là GET và POST để lấy dữ liệu và cập nhật dữ liệu giữa client và server. Cái này thì các anh dùng nhiều trong lập trình web. Trong đó phương thức GET dùng để lấy dữ liệu còn POST dùng để truyền dữ liệu từ client lên server để server cập nhập thông tin.
1 $.get(URL,callback);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ });
});
</script>
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button></body> </html>
Nếu như chúng ta muốn truyền dữ liệu lên cho server và nhận kết quả từ server trả về thì dùng phương thức POST
1 $(selector).load(URL,data,callback); 1
$(selector).load(URL,data,callback); 2 $(selector).load(URL,data,callback); 3
4. Sử dụng phương thức ajaxTrong tất cả dự án anh làm thì anh thường dùng Jquery Ajax dưới đây để code. $(selector).load(URL,data,callback); 4 $(selector).load(URL,data,callback); 5
1 $(selector).load(URL,data,callback); 7
Chúng ta sử dụng method error: function (e) để xử lý trường hợp server không trả về được kết quả như mình mong muốn. 5. Kết luậnHầu như các dự án web sau này anh làm đều không dùng JQuery Ajax nữa mà đã sử dụng các công nghệ làm web mới như ReactJS, VueJS hoặc Angular. Từ năm 2009 về trước thì các dự án anh làm đều dùng Jquery Ajax. |