JSON là gì? Khi nào nên sử dụng JSON
JSON đã trở thành một phần quan trọng của bất kỳ toolkit của nhà phát triển nào: khả năng tải và thao tác các JSON feed từ các trang web khác thông qua AJAX. Ngày nay, nhiều trang web đang chia sẻ dữ liệu bằng cách sử dụng RSS feed với lý do: JSON feed có thể được tải không đồng bộ dễ dàng hơn nhiều so với XML/RSS.
JSON là gì?
JSON hay JavaScript Object Notation, là một định dạng trao đổi dữ liệu dựa trên văn bản và có cú pháp tương tự như các đối tượng JavaScript. Nó thường được sử dụng để truyền dữ liệu trong các ứng dụng web (ví dụ: gửi dữ liệu từ server đến client, để nó có thể được hiển thị trên một trang web hoặc ngược lại).
Mặc dù JSON được tạo ra với JavaScript, nhưng nó độc lập với bất kỳ ngôn ngữ lập trình nào và được sử dụng rộng rãi bởi hầu hết các nền tảng ngày nay. JSON thực sự chỉ là một định dạng trao đổi dữ liệu hoạt động nguyên bản với hầu hết các ngôn ngữ hiện đại, như Python, Java, PHP và JavaScript. Được thông qua bởi ECMA International, một hiệp hội công nghiệp được thành lập vào năm 1961 để tiêu chuẩn hóa hệ thống thông tin và truyền thông, JSON đã trở thành tiêu chuẩn thực tế cho phép lưu trữ và gửi dữ liệu giữa tất cả các ngôn ngữ lập trình.
Dưới đây là một ví dụ về dữ liệu được lưu trữ ở định dạng JSON:
Tìm hiểu quan hệ giữa AJAX và JSON
AJAX (Asynchronous Javascript and XML), được sử dụng ở phía client để tạo các ứng dụng Asynchronous web. Theo AJAX model, các ứng dụng web có thể gửi và truy xuất dữ liệu từ server một cách bất đồng bộ mà không can thiệp vào việc hiển thị và hoạt động của trang hiện có.
Các Developer sử dụng JSON để chuyển các bản cập nhật AJAX giữa client và server. Các website cập nhật tỷ số thể thao trực tiếp có thể được coi là một ví dụ của AJAX. Nếu những điểm này phải được cập nhật trên trang web, thì chúng phải được lưu trữ trên server để trang web có thể lấy điểm khi nó được yêu cầu. Đây là nơi chúng ta có thể sử dụng dữ liệu được định dạng JSON.
Mọi dữ liệu được cập nhật bằng AJAX đều có thể được lưu trữ bằng định dạng JSON trên server web. AJAX được sử dụng để javascript có thể truy xuất các tệp JSON này khi cần thiết, phân tích cú pháp chúng và thực hiện một trong các hành động sau:
- Lưu trữ các giá trị được phân tích cú pháp trong các biến để xử lý thêm trước khi hiển thị chúng trên trang web.
- Nó trực tiếp gán dữ liệu cho các phần tử DOM trong website, để chúng được hiển thị trên trang web.
Sự khác biệt giữa HTML, XML và JSON là gì?
Để hiểu rõ hơn về JSON bạn có thể so sánh sự khác biệt của nó với HTML và XML ở bảng sau đây:
Tiêu chí so sánh | JSON | XML | HTML |
Định dạng | Định dạng dưới dạng list các giá trị và đối tượng | Định dạng theo dạng cây phân cấp các thẻ.
| Là ngôn ngữ đánh dấu nhằm tạo và xác định cấu trúc của một trang web |
Dung lượng | Nhỏ hơn XML | Có các thẻ mở rộng | Nhẹ, phù hợp với các dự án dưới 20GB |
Đọc, viết | Dễ đọc, dễ viết bằng các đối tượng và mảng | XML đọc và viết khó hơn do viết bằng các thẻ và thuộc tính | Là một trong những ngôn ngữ lập trình dễ đọc, viết nhất |
Hỗ trợ | Được hỗ trợ bởi các ngôn ngữ lập trình: JavaScript, Java, Python, Ruby,... | Hỗ trợ mọi ngôn ngữ lập trình thông dụng | Tích hợp dễ dàng với các ngôn ngữ back-end, chẳng hạn như PHP, Ruby, Java,... |
Ứng dụng | Ứng dụng web khi truyền tải dữ liệu giữa máy chủ và trình duyệt | Sử dụng chủ yếu trong các ứng dụng doanh nghiệp nhằm mục đích lưu trữ, truyền dữ liệu giữa các hệ thống |
|
Khi nào nên sử dụng JSON?
JSON được đánh giá cao là một định dạng dữ liệu phổ biến, dễ đọc dễ viết đang sử dụng rộng rãi trong các ứng dụng web và các ứng dụng tương tác qua mạng khác. Hiện nay người dùng thường ưu tiên sử dụng JSON trong các trường hợp như:
- Truyền tải dữ liệu giữa các ứng dụng khác nhau nhờ ưu điểm dễ dàng để sử dụng.
- Lưu trữ dữ liệu hoặc tạo các tập tin trên cơ sở dữ liệu NoSQL.
- Truyền tải thông tin dữ liệu giữa client và server nhờ khả năng chuyển đổi thành đối tượng trong các ngôn ngữ lập trình một cách dễ dàng.
- Tạo API để truyền tải dữ liệu giữa máy chủ và client trong các API RESTful.
Tác dụng của JSON
Vì định dạng JSON chỉ là văn bản, nó có thể dễ dàng được gửi đến và từ một máy chủ, và được sử dụng như một định dạng dữ liệu bởi bất kỳ ngôn ngữ lập trình nào.
Vì vậy, nếu bạn nhận dữ liệu từ máy chủ, ở định dạng JSON, bạn có thể sử dụng nó như bất kỳ đối tượng JavaScript nào khác.
JSON cho phép chúng ta khắc phục vấn đề cross-domain vì chúng ta có thể sử dụng phương thức có tên JSONP, sử dụng hàm callback để gửi dữ liệu JSON trở lại domain - đây là tính năng khiến cho JSON trở nên vô cùng hữu ích.
Làm thế nào để load JSON vào một dự án?
Một trong những cách dễ nhất để tải dữ liệu JSON vào các web application là sử dụng phương thức $.ajax() có sẵn trong thư viện jQuery. Độ dễ dàng trong việc truy xuất dữ liệu sẽ khác nhau dựa trên trang web cung cấp dữ liệu, ví dụ đơn giản:
$.ajax( type:'GET', url:"http://example.com/users/feeds/", data:"format=json&id=123", success:function(feed) { document.write(feed); }, dataType:'jsonp' ); Ví dụ này sẽ yêu cầu các mục nguồn cấp dữ liệu mới nhất ở định dạng JSON và xuất chúng ra trình duyệt. Rõ ràng, chúng ta sẽ không muốn xuất dữ liệu JSON thô cho trình duyệt, nhưng ví dụ này cho thấy những điều cơ bản của việc tải JSON từ một nguồn bên ngoài.
Ví dụ thực tế: Tải luồng Flickr bằng JSON và jQuery
Ví dụ về việc tải ảnh từ Flickr bằng jQuery và lấy về dữ liệu JSON mới nhất của Flickr.
Bước 1: Tạo AJAX Request
Nguồn cấp dữ liệu photostream của Flickr tương đối dễ truy cập. Mỗi người dùng có một số ID duy nhất được gửi như một phần của yêu cầu tới URL này.
http://api.flickr.com/services/feeds/photos_public.gne
Yêu cầu cần gửi sẽ như thế này:
id=XXXXXXXX@NXX&lang=en-us&format=json&jsoncallback=? Trong ví dụ trên, XXXXXXXX@NXX cần được thay thế bằng ID người dùng. Chúng ta sẽ viết một hàm, vì vậy ID người dùng sẽ được chuyển qua dưới dạng đối số gọi là flickrID. Hàm của chúng ta sẽ được gọi là gọi là loadFlickr(), hàm này được sử dụng để tải về dữ liệu dạng JSON:
function loadFlickr(flickrid) { $('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>'); $.ajax({ type:'GET', url:"http://api.flickr.com/services/feeds/photos_public.gne", data:"id=" flickrid "&lang=en-us&format=json&jsoncallback=?", success:function(feed) { // Do something with the response }, dataType:'jsonp' }); } Dữ liệu JSON được trả về như sau:
({ "title": "Uploads from ennuidesign", "link": "http://www.flickr.com/photos/ennuidesign/", "description": "", "modified": "2009-03-17T03:53:36Z", "generator": "http://www.flickr.com/", "items": [ { "title": "This Is How You Get People to Talk About You", "link": "http://www.flickr.com/photos/ennuidesign/3361269251/", "media": {"m":"http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg"}, "date_taken": "2009-03-16T21:53:36-08:00", "description": "<p><a href="http://www.flickr.com/people/ennuidesign/">ennuidesign</a> posted a photo:</p> <p><a title="This Is How You Get People to Talk About You" href="http://www.flickr.com/photos/ennuidesign/3361269251/"><img src="https://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg" alt="This Is How You Get People to Talk About You" width="240" height="180"></a></p> <p>A guy I know, Trevor Gnauck, made this custom pint glass for me. He runs a company called <a href="http://www.bluedragonllc.com/">Blue Dragon Custom Laser Engraving</a> with his family, and he had no reason whatsoever to do anything nice for me.<br> <br> He did, though, and look how cool that is! I can now drink a beer out of my own likeness.<br> <br> I know it wasn't his intention, but this is how you get people to talk about you. Unprovoked kindness will always inspire kindness in return, and the power of a kind gesture should never be overlooked.</p>", "published": "2009-03-17T03:53:36Z", "author": "nobody@flickr.com<script type="text/javascript"> /* <![CDATA[ */ (function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j =2){c=parseInt(a.substr(j,2),16)^r;s =String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); /* ]]> */ </script> (ennuidesign)", "author_id": "29080075@N02", "tags": "gift ennuidesign trevorgnauck bluedragoncustomlaserengraving" } // The rest of the photo entries go here... ] }) Bước 2: Xử lý dữ liệu JSON
Chúng ta sẽ hiển thị hình thu nhỏ của 16 ảnh mới nhất và liên kết đến đường dẫn hiển thị kích cỡ medium-sized của hình ảnh đó.. Flickr JSON hơi khó hiểu và nó không cung cấp liên kết trực tiếp đến phiên bản thumbnail của ảnh, vì vậy chúng ta sẽ phải sử dụng một số tip. Mỗi mục ảnh được lưu trữ trong một array được gọi là các item mà chúng ta truy cập trong AJAX call bằng feed.items. Để có được dữ liệu về mỗi entry, chúng tôi sẽ lặp qua các item cho đến khi nhấn vào ảnh cuối cùng hoặc tổng 16 ảnh. Hãy sửa đổi chức năng và thiết lập vòng lặp:
function loadFlickr(flickrid) { // Display a loading icon in our display element $('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>'); // Request the JSON and process it $.ajax({ type:'GET', url:"http://api.flickr.com/services/feeds/photos_public.gne", data:"id=" flickrid "&lang=en-us&format=json&jsoncallback=?", success:function(feed) { // Create an empty array to store images var thumbs = []; // Loop through the items for(var i=0, l=feed.items.length; i < l && i < 16; i) { // Process each image } // Display the thumbnails on the page }, dataType:'jsonp' }); } Yếu tố mà chúng ta quan tâm là "m" element được lưu trữ trong "media" element. Điều này có thể được truy cập trong vòng lặp bằng cách sử dụng feed.items [i] .media.m. Chúng ta sẽ sử dụng regex trên giá trị này để cập nhật lại cả hai đường dẫn hình ảnh trung bình và hình thu nhỏ, cả 2 sẽ được lắp ráp thành linked thumbnail image. Sau đó, đẩy assembled HTML vào array của thumbs đã tạo. Sau khi kết thúc vòng lặp, kết hợp tất cả các hình ảnh thành một chuỗi HTML và thay thế nội dung của display element bằng các thumbnail. Thêm chức năng này vào script:
function loadFlickr(flickrid) { // Display a loading icon in our display element $('#feed').html('<span><img src="/blog/images/lightbox-ico-loading.gif" alt=""></span>'); // Request the JSON and process it $.ajax({ type:'GET', url:"http://api.flickr.com/services/feeds/photos_public.gne", data:"id=" flickrid "&lang=en-us&format=json&jsoncallback=?", success:function(feed) { // Create an empty array to store images var thumbs = []; // Loop through the items for(var i=0, l=feed.items.length; i < l && i < 16; i) { // Manipulate the image to get thumb and medium sizes var img = feed.items[i].media.m.replace( /^(.*?)_m.jpg$/, '<a href="/blog/$1.jpg"><img src="/blog/$1_s.jpg" alt=""></a>' ); // Add the new element to the array thumbs.push(img); } // Display the thumbnails on the page $('#feed').html(thumbs.join('')); // A function to add a lightbox effect addLB(); }, dataType:'jsonp' }); } Lưu ý rằng: thêm một hàm addLB() vào cuối hàm này để thêm hiệu ứng lightbox vào thumbnail làm tăng tính thẩm mỹ.
Bước 3: Gọi chức năng
Tại thời điểm này, chức năng đã sẵn sàng được gọi. Để tải luồng Flickr, gọi hàm như sau:
loadFlickr("29080075@N02");Ví dụ này được hoàn thành sẽ kéo nhiều người dùng photostreams vào containing box mà không cần làm mới trang. Hãy nhớ rằng bản demo này là để hiển thị cách tải dữ liệu JSON và không phải về cách triển khai mã để gọi hàm. Các JavaScript call là nội tuyến, KHÔNG nên sử dụng trong production script.
Hướng dẫn chi tiết cách lấy dữ liệu từ JSON
Để lấy dữ liệu từ JSON người dùng có thể sử dụng các phương thức hoặc thư viện được hỗ trợ trong ngôn ngữ lập trình của mình. Dưới đây là một số ví dụ cụ thể về cách lấy dữ liệu từ JSON trong JavaScript và Python:
Trong JavaScript
Bạn hãy sử dụng phương thức JSON.parse() chuyển đổi chuỗi JSON thành đối tượng JavaScript. Tiếp theo người dùng sử dụng cú pháp object.property để truy cập các thuộc tính bên trong đối tượng này. Ví dụ một chuỗi JSON như sau:
css
var jsonStr = '{"name": "Bill William Clinton", "age": 30, "email": "Bill William.Clinton@example.com"}'; Lúc này bạn có thể chuyển đổi chuỗi nêu trên thành đối tượng JavaScript bằng việc sử dụng phương thức JSON.parse() như sau:
javascript
var obj = JSON.parse(jsonStr); Sau đó bạn tiếp tục truy cập các thuộc tính trong đối tượng obj gồm:
arduino
console.log(obj.name); // "Bill William Clinton" console.log(obj.age); // 30 console.log(obj.email); // "Bill William.Clinton@example.com" Trong Python
Trong Python bạn hãy sử dụng thư viện json để thực hiện lấy dữ liệu từ JSON. Thư viện này sẽ cung cấp phương thức json.loads() để người dùng chuyển đổi chuỗi JSON thành Python. Sau đó bạn sử dụng cú pháp sử dụng cú pháp object["property"] để truy cập các thuộc tính bên trong đối tượng này.
Ví dụ ta có chuỗi JSON là:
makefile
import json jsonStr = '{"name": "Bill William Clinton", "age": 30, "email": "Bill William.Clinton@example.com"}' Khi đó bạn có thể sử dụng phương thức json.loads() để chuyển đổi chuỗi này thành đối tượng Python theo hướng dẫn như sau:
makefile
obj = json.loads(jsonStr) Cuối cùng bạn hãy truy cập các thuộc tính trong đối tượng obj theo hướng dẫn dưới đây:
bash
print(obj["name"]) # "Bill William Clinton" print(obj["age"]) # 30 print(obj["email"]) # "Bill William.Clinton@example.com" Nếu bạn truy cập thuộc tính bên trong đối tượng JSON thì phải sử dụng tên thuộc tính trong JavaScript bằng dấu ngoặc kép ("") và trong Python bằng dấu ngoặc vuông ([]).
JSON là một định dạng dữ liệu linh hoạt, có tính ứng dụng cao. Khi công nghệ dần được phổ cập trong mọi lĩnh vực thì JSON là gì càng được nhiều người quan tâm và sử dụng rộng rãi. Hy vọng nội dung trên đây đã đem đến bạn đọc thêm những kiến thức hữu ích. Đừng quên theo dõi Bizfly Cloud để cập nhật thêm thông tin liên quan khác hoặc liên hệ nhận hỗ trợ ngay nếu bạn có điều gì thắc mắc.
Bizfly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp.
Bizfly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử.
Độc giả quan tâm đến các giải pháp của Bizfly Cloud có thể truy cập tại đây.
DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud
