JSON là gì? Tìm hiểu những thông tin liên quan đến JSON

1751

30-06-2020

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.

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.

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