Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, December 2, 2015

JSON Tutorial - Kiến thức căn bản về JSON.

1. JSON
JSON là viết tắt của JavaScript Object Notation. JSON được sử dụng để truyền dữ liệu giữa Server và Client, XML cũng được sử dụng để truyền dữ liệu giữa Server và Client. Tuy nhiên việc truyền dữ liệu bằng JSON Objects có một vài lợi thế so với XML. Bài viết này sẽ đưa ra cái nhìn tổng quan về JSON và cách sử dụng JSON.
Dữ liệu kiểu JSON là một cặp key - value.
var student = {
   "firstName" : "Hạnh",
   "lastName" : "Nguyễn",
   "age" :  "23"
}; 
Với các chú ý sau:
- Chuỗi JSON được được bắt đầu và kết thúc bằng cặp dấu '{}'.
- Các key và value của JSON được đặt trong dấu nháy kép   " " . Nếu value có chứa dấu nháy kép ' " ' thì cần phải đặt ký tự ' \ ' trước dấu nháy kép. Ví dụ value = "simplecodecjava.blogspot.com" thì khi định nghĩa dữ liệu trong JSON phải viết là \"simplecodecjava.blogspot.com\".
- Nếu có nhiều dữ liệu ( nhiều cặp key-value) thì ta dùng dấu ' ,' để ngăn cách các cặp dữ liệu.
- Các key của JSON thường được đặt là các chữ cái không dấu, chữ số, dấu '_' và không có khoảng trắng.
2. Đặc trưng của JSON
- Là kiểu dữ liệu nhẹ.
- Không phụ thuộc vào ngôn ngữ.
- Dễ đọc và viết.
- Viết dựa trên text, nên có thể dễ dàng hiểu nội dung của JSON.
 3. Tại sao sử dụng JSON.
 - Cấu trúc chuẩn: JSON được định nghĩa theo một cấu trúc chuẩn nó giúp cho Developer dễ dàng đọc, viết và hiểu. Vì vậy mà các Developer thường chọn JSON.
- Là kiểu dữ liệu nhẹ: Khi làm việc với AJAX cần phải load dữ liệu nhanh và đồng bộ mà không cần phải gửi request lại. Vì JSON là kiểu dữ liệu nhẹ nên việc tải và request dữ liệu nhanh hơn.
- Khả năng linh hoạt: JSON không phụ thuộc vào ngôn ngữ, điều đó có nghĩa là nó hoạt động tốt với hầu hết tất cả các ngôn ngữ lập trình hiện đại. Giả xử khi cần thay đổi ngôn ngữ lập trình bên phía server, trong trường hợp này việc thay đổi kiến trúc của JSON trở nên dễ dàng cho mọi ngôn ngữ lập trình.
4. JSON vs. XML
Hãy xem cách mà JSON và XML lưu trữ 4 bản ghi học sinh .
Dữ liệu dưới dạng JSON.
{"students":[
   {"name":"Tuấn", "age":"23", "city":"Hà Nội"},
   {"name":"Đạt", "age":"28", "city":"Đà Nẵng"},
   {"name":"Lan", "age":"32", "city":"Thừa Thiên Huế"},
   {"name":"Yến", "age":"28", "city":"TP.Hồ Chí Minh"}
]}
Dữ liệu dưới dạng XML.
<students>
  <student>
    <name>Tuấn</name> <age>23</age> <city>Hà Nội</city>
  </student>
  <student>
    <name>Đạt</name> <age>28</age> <city>Đà Nẵng</city>
  </student>
  <student>
    <name>Lan</name> <age>32</age> <city>Thừa Thiên Huế</city>
  </student>
  <student>
    <name>Yến</name> <age>28</age> <city>TP.Hồ Chí Minh</city>
  </student>
</students>
Có thể dễ dàng thấy rằng dữ liệu dưới dạng JSON thì  nhẹ hơn so với dữ liệu dưới dạng XML.
5. Kiến trúc dữ liệu kiểu và cách đọc JSON.
a. Đối tượng JSON.
var person= {
  "name" : "ZappyMans",
  "age" = "24",
  "website" = "simplecodecjava.blogspot.com"
};
Để truy cập đữ liệu cho đối tượng JSON ở trên chúng ta viết key theo sau tên đối tượng theo mẫu sau:
<đối_tượng>.<key>
ví dụ:
Tên của đối tượng person: person.name
Tuổi của đối tượng person: person.age
Website của đối tượng person: person.website
b. Mảng đối tượng JSON.
Phần trên trình bày cách lưu trữ thông tin của một đối tượng person. Giả sử muốn lưu thông tin của nhiều hơn một đối tượng, trong trường hợp này chúng ta dùng mảng.
var students = [{
   "name" : "Lan",
   "age" :  "23",
   "gender" : "Nữ"
},
{
   "name" : "Tuấn",
   "age" : "24",
   "gender" : "Nam"
},
{
   "name" : "Yến",
   "age" : "21",
   "gender" : "Nữ"
}];
Để truy cập và lấy ra dữ liệu của một phần tử trong mảng, ta chèn thêm chỉ số và phần tử của mảng.
Tên của học sinh thứ 1: students[0].name // Lan
Tuổi của học sinh thứ 2: students[1].age //24
Giới tính của học sinh thứ 3: students[2].gender //Nữ 
c. Khai báo JSON theo cấu trúc lồng nhau.
Cách khác để truy cập và lấy ra dữ liệu của một phần tử của trong một mảng JSON được khai báo lồng nhau.
var students = {
  "Lan" : {
  "name" : "Lan",
  "age" :  "23",
  "gender" : "Nữ" 
},

"Tuấn" : {
  "name" : "Tuấn",
  "age" : "24",
  "gender" : "Nam"
},

"Yến" : {
  "name" : "Yến",
  "age" : "21",
  "gender" : "Nữ"
}
}
Tuổi của Lan : student.Lan.age // 23
Giới tính của Tuấn: student.Tuấn.gender // Nam
6. JSON và JavaScript.
JSON được xem là 'tập con' của JavaScript nhưng không có nghĩa là nó không thể dùng được với các ngôn ngữ khác. Trên thực tế JSON được sử dụng rất hiệu quả với PHP, Perl, Python, Ruby, Java, Ajax và nhiều ngôn ngữ nữa.
Để chứng minh JSON có thể sử dụng với JavaScript, hãy xem ví dụ sau.
a. Đọc dữ liệu từ file JSON và chuyển đổi thành JavaScript Object.
var student = {
   "firstName" : "Hạnh",
   "lastName" : "Nguyễn",
   "age" :  "23"
}; 
Để chuyển đối tượng JSON Object phía trên thành JavaScript Object sử dụng phương thức parse của JSON.
var javaScriptObject = JSON.parse(student); 
b. Chuyển đối tượng JavaScript Object thành JSON text 
Sử dụng phương thức stringify.
 var jsonObject = JSON.stringify(myObject);