Sau bài này bạn sẽ hiểu được:
- Ajax là gì? khi nào nên sử dụng Ajax.
- Gọi hàm Ajax với Jquery
1. Ajax là gì? khi nào nên sử dụng Ajax.
Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:
• Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang
• Phân tách và làm việc với XML
Vậy khi nào nên sử dụng ajax:
1. Tính năng "Auto save" (lưu tự động): Sử dụng Ajax, bạn có thể bắt chước tính năng của các phần mềm soạn thảo tự động lưu những gì người dùng đã gõ được sau một khoản thời gian nhất định (sẽ thật tuyệt nếu như các trình webmail có tính năng này.
2. Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăng nhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu. Ajax sẽ giúp bạn kiểm tra trực tiếp trên trình duyệt của bạn xem các thông tin có bị trùng lặp không? (khi bạn đăng ký gmail chẳng hạn)
3. Dịch trực tuyến: bạn có thể sử dụng Ajax để tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web của bạn và hiển thị từ tương ứng của các ngôn ngữ khác (sử dụng các dịch vụ của các trang tự điển)
4. Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng)
5. Hệ thống đánh giá ở các trang web nhạc số: Người dùng nhấn một nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống (hai trang Nhạc Số và Nhạc Việt có lẽ nên tìm hiểu áp dụng kỹ thuật này)
Ví dụ:
- Tạo một trang A có nội dung: Đây là nội dung của trang A
- Tạo một trang B có nội dung: Đây là nội dung của trang B.
Sử dụng kỹ thuật Ajax để xử lý khi mở trang A ra thì nó tự động hiển thị cả nội dung trang B.
Ta có code nội dung trang A như sau:
a.php
Trong đó chú ý:
Link thư viện của jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>Sử dụng hàm .load để load trang b.php
Ta có nội dung trang B như sau:
b.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trang B</title>
</head>
<body>
<p>Đây là nội dung Trang B</p>
</body>
</html>
Kết quả khi vào trang A sẽ hiển thị nội dung như hình ảnh sau:
Không có nhận xét nào:
Đăng nhận xét