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. Bài viết sau sẽ giải thích:
– JSON là gì?
– Tại sao JSON lại quan trọng?
– Làm thế nào để chúng ta sử dụng JSON trong một dự án?
JSON là gì?
JSON là viết tắt của JavaScript Object Notation, là một cách để lưu trữ thông tin theo cách có tổ chức, dễ truy cập, giúp con người có thể dễ dàng đọc, hiểu, quản lý, truy cập.
Lưu trữ dữ liệu JSON
Thông tin có thể được viết bằng JSON như sau:
var jason = { | |
“age” : “24”, | |
“hometown” : “Missoula, MT”, | |
“gender” : “male” | |
; |
Đây là đối tượng mà chúng ta truy cập bằng cách sử dụng biến jason. var jason = { ám chỉ rằng giá trị là một đối tượng. Bên trong đối tượng, chúng ta có thể khai báo bất kỳ số lượng thuộc tính nào bằng cách sử dụng ghép nối “name”: “value”, được phân tách bằng dấu phẩy. Để truy cập thông tin được lưu trữ trong jason, chúng ta chỉ cần tên thuộc tính cần tìm. Chẳng hạn:
document.write(‘Jason is ‘ jason.age); // Output: Jason is 24 | |
document.write(‘Jason is a ‘ jason.gender); // Output: Jason is a male |
Lưu trữ dữ liệu JSON trong Array
Một ví dụ phức tạp hơn một chút liên quan đến việc lưu trữ hai người trong một biến. Để làm điều này, chúng ta đặt nhiều đối tượng trong dấu ngoặc vuông, biểu thị một array. Chẳng hạn, nếu ta cần đưa thông tin về bản thân và anh trai vào một biến, có thể sử dụng như sau:
var family = [{ | |
“name” : “Jason”, | |
“age” : “24”, | |
“gender” : “male” | |
, | |
{ | |
“name” : “Kyle”, | |
“age” : “21”, | |
“gender” : “male” | |
]; |
Để truy cập thông tin này, chúng tôi cần truy cập vào array index của người mà chúng ta muốn truy cập. Ví dụ: chúng tôi sẽ sử dụng đoạn mã sau để truy cập thông tin được lưu trữ trong biến “family”:
document.write(family[1].name); // Output: Kyle | |
document.write(family[0].age); // Output: 24 |
Dữ liệu JSON lồng nhau
Một cách khác để lưu trữ nhiều người trong biến là lồng các đối tượng. Thực hiện như sau:
var family = { | |
“jason” : { | |
“name” : “Jason Lengstorf”, | |
“age” : “24”, | |
“gender” : “male” | |
, | |
“kyle” : { | |
“name” : “Kyle Lengstorf”, | |
“age” : “21”, | |
“gender” : “male” | |
| |
Để truy cập thông tin trong đối tượng, chúng ta sẽ sử dụng đoạn mã sau:
document.write(family.jason.name); // Output: Jason Lengstorf | |
document.write(family.kyle.age); // Output: 21 | |
document.write(family.jason.gender); // Output: male |
JSON và array lồng nhau có thể được kết hợp khi cần thiết để lưu trữ nhiều dữ liệu cần thiết.
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(‘ | |
$.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”: “ ennuidesign posted a photo:
A guy I know, Trevor Gnauck, made this custom pint glass for me. He runs a company called Blue Dragon Custom Laser Engraving with his family, and he had no reason whatsoever to do anything nice for me. He did, though, and look how cool that is! I can now drink a beer out of my own likeness. 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. “, | |
“published”: “2009-03-17T03:53:36Z”, | |
“author”: “nobody@flickr.com (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(‘ | |
// 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(‘ | |
// 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$/, | |
‘ | |
); | |
// 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.
Tham khảo: https://www.copterlabs.com/json-what-it-is-how-it-works-how-to-use-it/
>> Có thể bạn quan tâm: Tất tần tật AJAX là gì, hoạt động như thế nào và được sử dụng để làm gì?
NQ News Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp – Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web…, chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do NQ News Cloud cung cấp có thể truy cập tại đây.
