Trộn Ajax vào HTML với Intercooler.js
Nó chưa bao giờ dễ dàng hơn để thêm Ajax vào bất kỳ trang web nào. Trên thực tế, việc xây dựng toàn bộ trang web là khá phổ biến dựa trên các yêu cầu Ajax gọi là Ứng dụng một trang (hoặc SPA).
Tuy nhiên, điều này luôn đòi hỏi một chút jQuery và một số kỹ thuật sắp xếp cập nhật nội dung trang. Nếu bạn chỉ cần một số chức năng Ajax cơ bản bạn có thể dùng intercooler.js để trộn quyền này vào HTML của bạn.
Intercooler cho phép bạn viết các thuộc tính HTML vốn có chứa URL yêu cầu Ajax. Khi người dùng nhấp vào một số liên kết nhất định, bạn có thể ra lệnh đó Yêu cầu Ajax chạy thay vì hành động nhấp bình thường.
Tất cả đây dựa trên các thuộc tính dữ liệu HTML5- * nhu la ic-post-to. Bạn có thể thêm thuộc tính này vào nút hoặc liên kết neo và nó sẽ tự động kết nối với jQuery cho một yêu cầu POST Ajax.
Thực sự có một trang đầy đủ các thuộc tính này trên trang web plugin. Đây là một chút mã mẫu để xem nó trông như thế nào:
Nhấp vào đây!
Cái này sẽ gửi yêu cầu POST của Ajax tới URL / buton_click, và tải phản hồi vào phần tử container. Intercooler là một thư viện khá đơn giản và vô cùng mạnh mẽ một khi bạn hiểu cách thức hoạt động của nó.
Cấp điều này sẽ không giải quyết tất cả các vấn đề Ajax của bạn bởi vì nó không thể tự động cập nhật các khu vực khác của trang. Nó cũng không thể thêm quá nhiều tính năng tùy chỉnh mà không làm chậm trang, vì vậy một chi tiết Spa nên thực sự sử dụng mã Ajax tùy chỉnh.
Intercooler.js cung cấp một cách ngữ nghĩa hơn để viết mã Ajax để nó tải và thậm chí cung cấp một dự phòng gốc.
Đến cài đặt intercooler bạn chỉ cần một bản sao của jQuery cùng với một bản sao của thư viện intercooler có thể được tìm thấy trên GitHub. Bạn có thể kiểm tra mà không cần tải xuống bất kỳ tệp nào bằng cách sử dụng CDN jQuery và CDN Intercooler cục bộ.
Đặt cả hai vào một >
Hãy nhìn vào trang trình diễn để xem một danh sách đầy đủ các bản demo bạn có thể chơi với. Tôi đặc biệt thích bản demo 'Nhấp để chỉnh sửa' vì nó hiển thị chính xác những gì có thể và bạn có thể dùng plugin này bao xa.
Nếu bạn quan tâm đến học nhiều hơn nữa kiểm tra hướng dẫn tham khảo đầy đủ các thuộc tính HTML intercooler. Mỗi cái thực hiện một hành động khác Vì vậy, điều quan trọng là nghiên cứu tất cả và xem những gì phù hợp nhất cho kịch bản của bạn.
Đương nhiên, bạn có thể tìm thấy tất cả các mã nguồn miễn phí trên GitHub cùng với hướng dẫn cài đặt ngắn gọn.
