Mình đã có một serie học Ajax nói về việc kết hợp với JSON rồi nên bạn có thể tới link đó để xem chi tiết hơn, nên trong bài này mình sẽ nói một số vấn đề mấu chốt trong việc kết hợp giữa Ajax và JSON để tạo ra những chức năng hay.
Mục lục
- 1. JSON trong Ajax
- 2. Ví dụ JSON trong Ajax
- 3. Lời kết
1. JSON trong Ajax
Nếu bạn đã từng làm việc với Ajax rồi thì không còn xa lạ gì về cách hoạt động của nó nữa, còn nếu bạn chưa biết Ajax là gì thì hãy tìm hiểu nó trước khi xem bài này nhé.
Thông thường những bạn newbie khi làm Ajax thì ở phía API sẽ trả về nguyên đoạn mã HTML luôn, điều này khá tốn tài nguyên hệ thống vì nó sẽ phải gửi luôn những đoạn mã HTML không cần thiết. Vậy giải pháp là các API sẽ gửi về một danh sách dữ liệu ở định dạng JSON, sau đó ở phía client sẽ sử dụng Javascript để tạo nên các thẻ HTML cần thiết theo yêu cầu của chức năng đó.
Trong jQuery Ajax có một cấu hình tùy chọn định dạng dữ liệu trả về đó là thuộc tính dataType, nó có ba định dạng hay sử dụng đó là TEXT, XML và JSON. Nếu bạn chọn JSON thì ajax sẽ tự hiểu kêt quả trả về là một chuỗi JSON nên nó sẽ tự động convert thành một đối tượng tương ứng (xem bài json và object). Nhưng nếu bạn khai báo là TEXT thì nó sẽ hiểu là trả về một đoạn text bình thường, lúc này nếu bạn muốn chuyển thành chuỗ JSON thì phải sử dụng một hàm bổ trợ khác đó là $.parseJSON trong jQuery.
Bài viết này được đăng tại tranvanbinh.vn
Như vậy tóm lại ý tưởng kết hợp JSON trong Ajax là ở phía API thay vì trả về một đoạn HTML đã được chuyển đổi thì chỉ trả về dữ liệu thô ở dạng JSON, sau đó bên phía Javascript ở client sẽ dựa vào dữ liệu đó mà đổi thành những đoạn mã HTML tương ứng. Điều này giúp cho việc gửi request nhanh hơn và code nhìn chuyên nghiệp hơn.
2. Ví dụ JSON trong Ajax
Bây giờ mình sẽ đưa ra một ví dụ thực tế cho bạn dễ hiểu bài hơn.
Giả sử mình cần làm chức năng lấy danh sách bình luận của một bài viết nào đó bằng Ajax, lúc này mình sẽ thực hiện hai bước như sau:
- Bước 1: Phía Server (PHP) sẽ nhận tham số
idcủa bài viết, sau đó tìm danh sách các bình luận và sử dụng vòng lặp foreach để lặp thành các đoạn mã HTML rồi in ra. - Bước 2: Phía Client sẽ nhận kết quả đó rồi chỉ cần sử dụng hàm
appendtrong jQuery để thêm vào danh sách comment.
Nhưng nếu chức năng này ta sư dụng JSON thì các bước như sau:
- Bước 1: Phía Server (PHP) sẽ nhận tham số id của bài viết, sau đó tìm danh sách các bình luận và đưa vào một mảng, cuối cùng sử dụng hàm
JSON_ENCODEđể chuyển thành chuỗi JSON và in ra. - Bước 2: Phía Client sẽ nhận kết quả là chuỗi JSON, sao đó convert thành đối tượng Object và sử dụng vòng lặp trong JS để in thành các đoạn mã HTML, cuối cùng sử dụng hàm append trong jQuery để thêm vào danh sách comment.
Không chỉ có ở Ajax mà các API khác hiện nay đều sử dụng JSON làm chuẩn trao đổi dữ liệu với nhau, ví dụ như API của PHP và các ứng dụng Mobile.
Tóm lại một số lưu ý trong việc kết hợp JSON và Ajax là:
- Phía PHP (API) sử dụng các hàm
json_encodevàjson_decodeđể trả kết quả về là chuỗi JSON. - Phía Client sẽ tiếp nhận một chuỗi JSON nên bạn phải convert nó thành object, trường hợp bạn khai báo
dataType : "JSON"thì không cần convert mà nó đã tự chuyển đỗi sẵn rồi. - Sau khi chuyển thành đối tượng thì công việc còn lại của Javascript là kết hợp dữ liệu của đối tượng đó để nối thành các đoạn mã HTML theo yêu cầu của bài toán. Như ví dụ trên là chuyển thành các đoạn mã HTML cho danh sách comments.
Xem bài sử dụng Ajax lấy danh sách thành viên trả về dạng JSON để hiểu rõ hơn.
3. Lời kết
Thực ra bài này cũng không có gì để nói cả nên mình không tính ra một bài thế này. Nhưng mình muốn trong Serie có đề cập đến để bạn đọc hiểu là JSON được ứng dụng trong Ajax cũng khá nhiều. Còn bạn muốn tìm hiểu sâu hơn thì hãy xem serie học ajax để rõ hơn.
* Nếu bạn muốn tiết kiệm 3-5 NĂM trên con đường trở thành DBA chuyên nghiệp thì hãy đăng ký ngay KHOÁ HỌC ORACLE DATABASE A-Z ENTERPRISE, được Coaching trực tiếp từ tôi với toàn bộ kinh nghiệm, thủ tục, quy trình, bí kíp thực chiến mà bạn sẽ KHÔNG THỂ tìm kiếm trên Internet/Google giúp bạn dễ dàng quản trị mọi hệ thống Core tại Việt Nam và trên thế giới, đỗ OCP.
- CÁCH ĐĂNG KÝ: Gõ (.) hoặc để lại số điện thoại hoặc inbox https://m.me/tranvanbinh.vn hoặc Hotline/Zalo 090.29.12.888
- Chi tiết tham khảo:
https://bit.ly/oaz_w
=============================
2 khóa học online qua video giúp bạn nhanh chóng có những kiến thức nền tảng về Linux, Oracle, học mọi nơi, chỉ cần có Internet/4G:
+ Oracle cơ bản: https://bit.ly/admin1_1200
+ Linux: https://bit.ly/linux_1200
=============================
KẾT NỐI VỚI CHUYÊN GIA TRẦN VĂN BÌNH:
📧 Mail: binhoracle@gmail.com
☎️ Mobile/Zalo: 0902912888
👨 Facebook: https://www.facebook.com/BinhOracleMaster
👨 Inbox Messenger: https://m.me/101036604657441 (profile)
👨 Fanpage: https://www.facebook.com/tranvanbinh.vn
👨 Inbox Fanpage: https://m.me/tranvanbinh.vn
👨👩 Group FB: https://www.facebook.com/groups/DBAVietNam
👨 Website: https://www.tranvanbinh.vn
👨 Blogger: https://tranvanbinhmaster.blogspot.com
🎬 Youtube: https://www.youtube.com/@binhguru
👨 Tiktok: https://www.tiktok.com/@binhguru
👨 Linkin: https://www.linkedin.com/in/binhoracle
👨 Twitter: https://twitter.com/binhguru
👨 Podcast: https://www.podbean.com/pu/pbblog-eskre-5f82d6
👨 Địa chỉ: Tòa nhà Sun Square - 21 Lê Đức Thọ - Phường Mỹ Đình 1 - Quận Nam Từ Liêm - TP.Hà Nội
=============================
oracle tutorial, học oracle database, Tự học Oracle, Tài liệu Oracle 12c tiếng Việt, Hướng dẫn sử dụng Oracle Database, Oracle SQL cơ bản, Oracle SQL là gì, Khóa học Oracle Hà Nội, Học chứng chỉ Oracle ở đầu, Khóa học Oracle online,sql tutorial, khóa học pl/sql tutorial, học dba, học dba ở việt nam, khóa học dba, khóa học dba sql, tài liệu học dba oracle, Khóa học Oracle online, học oracle sql, học oracle ở đâu tphcm, học oracle bắt đầu từ đâu, học oracle ở hà nội, oracle database tutorial, oracle database 12c, oracle database là gì, oracle database 11g, oracle download, oracle database 19c, oracle dba tutorial, oracle tunning, sql tunning , oracle 12c, oracle multitenant, Container Databases (CDB), Pluggable Databases (PDB), oracle cloud, oracle security, oracle fga, audit_trail,oracle RAC, ASM, oracle dataguard, oracle goldengate, mview, oracle exadata, oracle oca, oracle ocp, oracle ocm , oracle weblogic, postgresql tutorial, mysql tutorial, mariadb tutorial, ms sql server tutorial, nosql, mongodb tutorial, oci, cloud, middleware tutorial, hoc solaris tutorial, hoc linux tutorial, hoc aix tutorial, unix tutorial, securecrt, xshell, mobaxterm, putty
