Chào mọi người, hôm nay tôi sẽ chia sẻ một chút kinh nghiệm “thực chiến” của mình về cái tựa đề nghe có vẻ hơi “củ chuối” này: “ajax vs besiktas”. Nghe chả liên quan gì đúng không? Thực ra là vầy…
Chuyện là, tôi đang làm một cái dự án web, cần lấy dữ liệu về để hiển thị mà không muốn tải lại cả trang. Cái này thì chắc chắn phải dùng AJAX (Asynchronous JavaScript and XML) rồi. Tôi thì hay dùng thư viện jQuery cho nó tiện, code cũng gọn gàng hơn.
Bước 1: Chuẩn bị “đồ nghề”
- Tất nhiên là phải có jQuery rồi. Tôi thường nhúng thẳng từ CDN cho nhanh:
- Một file HTML để hiển thị dữ liệu.
- Một file PHP (hoặc bất cứ ngôn ngữ backend nào bạn thích) để xử lý yêu cầu và trả về dữ liệu.
Bước 2: Bắt đầu “code” thôi
Trong file HTML, tôi tạo một cái nút để khi click vào thì sẽ gọi AJAX:
Rồi, trong file JavaScript (ví dụ: ), tôi viết hàm xử lý khi click nút:
Đơn giản vậy thôi! Khi click vào nút “Lấy dữ liệu”, nó sẽ gửi một yêu cầu GET đến file get_*. Nếu thành công (success), nó sẽ log dữ liệu nhận được ra console. Nếu có lỗi (error), nó sẽ log lỗi ra.
Bước 3: Xử lý phía “hậu trường” (Backend)
Trong file get_*, tôi viết code để lấy dữ liệu (ví dụ từ database) và trả về dưới dạng JSON:
Đấy, phía backend chỉ cần lấy dữ liệu và echo ra dưới dạng JSON là xong.
Vậy “besiktas” ở đâu ra?
Thực ra là thế này, trong lúc đang hì hục code, tôi có mở một tab xem bóng đá. Trận đó là Besiktas đá. Đang căng thẳng quá, tôi lại đặt tên biến, tên file lung tung liên quan đến Besiktas. Kiểu như dataBesiktas, get_besiktas_*… Thế là sau này nhìn lại code, tôi mới thấy buồn cười, nên quyết định chia sẻ câu chuyện “dở khóc dở cười” này với mọi người.
Tổng kết một chút:
- AJAX cực kỳ hữu ích khi cần lấy dữ liệu mà không muốn tải lại trang.
- jQuery giúp việc dùng AJAX trở nên dễ dàng hơn.
- Nhớ xử lý cả trường hợp thành công và lỗi khi gọi AJAX.
- Đặt tên biến, tên file cẩn thận, đừng như tôi!
Hy vọng bài chia sẻ này có ích cho mọi người. Chúc các bạn code vui vẻ và… đừng quên đội bóng yêu thích của mình khi code nhé!
