Bài 05: JSON và ứng dụng trong Ajax

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.

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.

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ố id củ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 append trong 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_encode và 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.

Nguồn: code24h.com