JSON là gì? JSON làm việc như thế nào

Admin · Mar 16, 2014

JSON: Tạm dịch là: ký hiệu đối tượng JavaScript (JavaScript Object Notation)
JSON là cú pháp để lưu trữ và trao đổi thông tin văn bản. Cũng giống như XML.

JSON là nhỏ hơn so với XML, và nhanh hơn và dễ dàng hơn để phân tích (parse).
Ví dụ JSON:

Code:

{
	"employees": [
		{ "firstName":"John" , "lastName":"Doe" }, 
		{ "firstName":"Anna" , "lastName":"Smith" }, 
		{ "firstName":"Peter" , "lastName":"Jones" }
	]
}

JSON là gì?

JSON là viết tắt của JavaScript Object Notation
JSON là định dạng trao đổi dữ liệu văn bản dung lượng nhẹ
JSON là ngôn ngữ độc lập *
JSON được "tự mô tả" và dễ hiểu

(*) JSON sử dụng cú pháp JavaScript để mô tả đối tượng dữ liệu, nhưng JSON là ngôn ngữ và nền tảng độc lập. Trình phân tích cú pháp(parsers) JSON và các thư viện JSON tồn tại cho nhiều ngôn ngữ lập trình khác nhau.
Đối tượng employees là 1 mảng của 3 đối tượng employee.

JSON - Đánh giá đối tượng JavaScript

Các định dạng văn bản JSON có cú pháp giống hệt cú pháp của JavaScript.

Bởi vì sự tương đồng này, thay vì sử dụng một trình phân tích cú pháp(parser), một chương trình JavaScript có thể sử dụng hàm xây dựng sẵn (built-in) là hàm eval() và thực thi các dữ liệu JSON để sinh ra các đối tượng thuần JavaScript.
JSON - Giới thiệu

Ví dụ JSON:

HTML:

<html>
	<body>
		<h2>JSON Object Creation in JavaScript</h2>
		<p>
			Name: <span id="jname"></span><br /> 
			Age: <span id="jage"></span><br /> 
			Address: <span id="jstreet"></span><br /> 
			Phone: <span id="jphone"></span><br /> 
		</p>
		<script type="text/javascript">
			var JSONObject= {
				"name":"John Johnson",
				"street":"Oslo West 555", 
				"age":33,
				"phone":"555 1234567"
			};
			document.getElementById("jname").innerHTML=JSONObject.name 
			document.getElementById("jage").innerHTML=JSONObject.age 
			document.getElementById("jstreet").innerHTML=JSONObject.street 
			document.getElementById("jphone").innerHTML=JSONObject.phone 
		</script>

	</body>
</html>

________________________________________
Giống như XML

JSON là văn bản trơn (không có định dạng(màu sắc, cỡ chữ,…))
JSON là "tự mô tả" (người dùng có thể hiểu được)
JSON là phân cấp (có cấu trúc cây)
JSON có thể được phân tích cú pháp (parse) bởi JavaScript
Dữ liệu JSON có thể được truyền đi bằng AJAX

________________________________________
Không giống như XML

Không có thẻ kết thúc
Ngắn hơn
Nhanh hơn để đọc và ghi
Có thể được phân tích cú pháp bằng hàm dựng sẵn trong JavaScript là eval ()
Sử dụng mảng (Array)
Không dùng các từ reserve

________________________________________
Tại sao dùng JSON?
For AJAX applications, JSON is faster and easier than XML:
Sử dụng XML

Lấy một tài liệu XML
Sử dụng XML DOM để lặp qua tài liệu
Trích xuất các giá trị và lưu trữ trong các biến

Sử dụng JSON

Lấy một chuỗi JSON
Dùng hàm eval () chuyển chuỗi JSON thành đối tượng JavaScript

- - - - - - - - - -

Cú pháp JSON

Cú pháp JSON là một tập hợp con của cú pháp JavaScript

Các quy luật cú pháp JSON

Cú pháp JSON là một tập hợp con của cú pháp đối tượng JavaScript.

Dữ liệu là các cặp tên/giá trị (name/values)
Dữ liệu được phân cách bằng dấu phẩy
Đối tượng nằm trong cặp ngoặc nhọn ‘{}’
Dấu ngoặc vuông giữ mảng ‘[]’

Cặp Tên/Giá trị của JSON

Dữ liệu JSON được viết trong cặp Tên/Giá trị.
Một cặp Tên/Giá trị chứa tên 1 trường (trong dấu nháy đôi “”), theo sau là dấu phẩy, cuối cùng là giá trị:

Code:

"firstName" : "John"

Cú pháp này khá dễ hiểu, và tương đương với lệnh JavaScript sau:

Code:

firstName = "John"

________________________________________
Các giá trị của JSON
Giá trị (value) JSON có thể là:

1 số (nguyên (integer) hay số thực (floating point))
1 chuỗi (nằm trong dấu nháy đôi “”)
1 số luận lý (true or false)
1 mảng (nằm trong dấu ngoặc vuông [])
1 đối tượng (nằm trong dấu ngoặc nhọn {})
Kiểu null

________________________________________
Các đối tượng JSON

Các đối tượng được đặt trong dấu ngoặc nhọn {}
Đối tượng có thể chứa nhiều cặp Tên/Giá trị (Name/Values):

Code:

{ "firstName":"John" , "lastName":"Doe" }

Và tương đương với lệnh JavaScript sau:

Code:

firstName = "John"
lastName = "Doe"

________________________________________
Mảng của JSON
Mảng JSON nằm trong dấu ngoặc vuông [].
1 mảng có thể chứa nhiều đối tượng:

Code:

{
	"employees": [
		{ "firstName":"John" , "lastName":"Doe" }, 
		{ "firstName":"Anna" , "lastName":"Smith" }, 
		{ "firstName":"Peter" , "lastName":"Jones" }
	]
}

Trong ví dụ trên, đối tượng “employees” là 1 mảng chứa 3 đối tượng. mỗi đối tượng là 1 record của person (với 1 ‘first name và’ 1 ‘last name’).
________________________________________
JSON sử dụng cú pháp JavaScript
Bởi vì JSON sử dụng cú pháp JavaScript, nên không cần 1 chương trình trung gian làm việc giữ JSON và JavaScript.
Với JavaScript bạn có thể tạo 1 mảng các đối tượng và gán dữ liệu như sau:

Ví dụ:

Code:

var employees = [
	{ "firstName":"John" , "lastName":"Doe" }, 
	{ "firstName":"Anna" , "lastName":"Smith" }, 
	{ "firstName":"Peter" , "lastName": "Jones" }
];

Dòng đầu tiên trong mảng đối tượng JavaScript có thể được truy cập như sau:

Code:

employees[0].lastName;

Kết quả:

Code:

Doe

Dữ liệu mới được gán như sau:

Code:

employees[0].lastName = "Jonatan";

Trong phần 4, tui sẽ chỉ cách chuyển chuỗi JSON qua đối tượng JavaScript.
________________________________________
JSON Files

Kiểu file của JSON là ".json"
Kiểu MIME của JSON là "application/json"

PushKiss · Mar 16, 2014

Khá giống John,ZenCMS nhỉ

Admin · Mar 16, 2014

JSON hoạt động?
________________________________________
Convert chuỗi JSON thành đối tượng JavaScript

Với JSON, để lấy dữ liệu JSON từ web server (như 1 file hay 1 HttpRequest), convert dữ liệu JSON thành đối tượng JavaScript, và sử dụng dữ liệu này trong trang web
Sau đây là demo:
________________________________________
Ví dụ JSON – Tạo Object từ Chuỗi (String)

Đầu tiên, tạo 1 chuỗi JavaScript chứa cú pháp JSON:

Code:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Kể từ khi cú pháp JSON là tập con của cú pháp JavaScript, hàm JavaScript eval() có thể convert chuỗi JSON thành đối tượng JavaScript.
Hàm eval() sử dụng trình biên dịch(compiler) JavaScript sẽ phân tích cú pháp(parse) chuỗi JSON và sinh ra đối tượng JavaScript. Chuỗi phải được bọc trong dấu ngoặc ‘()’ để tránh lỗi cú pháp:

Code:

var obj = eval ("(" + txt + ")");

Cuối cùng là việc sử dụng đối tượng JavaScript trong trang web như sau:

Code:

<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName 
document.getElementById("lname").innerHTML = obj.employees[1].lastName 
</script>

________________________________________
JSON Parser

Sẽ an toàn hơn để sử dụng JSON Parser để convert chuỗi JSON thành đối tượng JavaScript. 1 JSON Parser sẽ nhận dạng chỉ chuỗi JSON và không biên dịch các script khác.

Trong trình duyệt có hỗ trợ mặc định cho JSON, thì JSON sẽ được parse nhanh hơn.
Thông thường thì các trình duyệt mới đều hỗ trợ mặc định cho JSON và trong chuẩn ECMAScript (JavaScript) mới nhất.

Web Browsers Support

Firefox (Mozilla) 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

Web Software Support

jQuery
Yahoo UI
Prototype
Dojo
ECMAScript 1.5

- - - - - - - - - -

PushKiss said:
Khá giống John,ZenCMS nhỉ

Em có hiểu gì không mà phát biểu lung tung thế, lần sau suy nghĩ kỹ em nhé, john, zen gì ở đây

PushKiss · Mar 16, 2014

admin said:
JSON hoạt động?
________________________________________
Convert chuỗi JSON thành đối tượng JavaScript

Với JSON, để lấy dữ liệu JSON từ web server (như 1 file hay 1 HttpRequest), convert dữ liệu JSON thành đối tượng JavaScript, và sử dụng dữ liệu này trong trang web
Sau đây là demo:
________________________________________
Ví dụ JSON – Tạo Object từ Chuỗi (String)

Đầu tiên, tạo 1 chuỗi JavaScript chứa cú pháp JSON:

Code:

var txt = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Kể từ khi cú pháp JSON là tập con của cú pháp JavaScript, hàm JavaScript eval() có thể convert chuỗi JSON thành đối tượng JavaScript.
Hàm eval() sử dụng trình biên dịch(compiler) JavaScript sẽ phân tích cú pháp(parse) chuỗi JSON và sinh ra đối tượng JavaScript. Chuỗi phải được bọc trong dấu ngoặc ‘()’ để tránh lỗi cú pháp:

Code:

var obj = eval ("(" + txt + ")");

Cuối cùng là việc sử dụng đối tượng JavaScript trong trang web như sau:

Code:

<p> First Name: <span id="fname"></span><br /> Last Name: <span id="lname"></span><br /> </p> <script type="text/javascript"> document.getElementById("fname").innerHTML = obj.employees[1].firstName document.getElementById("lname").innerHTML = obj.employees[1].lastName </script>

________________________________________
JSON Parser

Sẽ an toàn hơn để sử dụng JSON Parser để convert chuỗi JSON thành đối tượng JavaScript. 1 JSON Parser sẽ nhận dạng chỉ chuỗi JSON và không biên dịch các script khác.

Trong trình duyệt có hỗ trợ mặc định cho JSON, thì JSON sẽ được parse nhanh hơn.
Thông thường thì các trình duyệt mới đều hỗ trợ mặc định cho JSON và trong chuẩn ECMAScript (JavaScript) mới nhất.

Web Browsers Support

Firefox (Mozilla) 3.5

Internet Explorer 8

Chrome

Opera 10

Safari 4

Web Software Support

jQuery

Yahoo UI

Prototype

Dojo

ECMAScript 1.5

- - - - - - - - - -

Em có hiểu gì không mà phát biểu lung tung thế, lần sau suy nghĩ kỹ em nhé, john, zen gì ở đây

Nó cũng dùng mấy mã giống JohnCMS và ZenCMS nên em bảo giống đó chứ

KhangSkull · Mar 16, 2014

PushKiss said:
Nó cũng dùng mấy mã giống JohnCMS và ZenCMS nên em bảo giống đó chứ

đây là ngôn ngữ lập trình chứ không phải mã nguồn bạn nhé

PushKiss · Mar 16, 2014

KhangSkull said:
đây là ngôn ngữ lập trình chứ không phải mã nguồn bạn nhé

Em gà lắm biết sơ sơ thui à...thấy thì em bảo giống thui...suy nghĩ của newbie mừ

JSON là gì? JSON làm việc như thế nào

Admin

Well-Known Member

PushKiss

New Member

Admin

Well-Known Member

PushKiss

New Member

KhangSkull

Active Member

PushKiss

New Member

Facebook Comments

Similar threads

New posts New threads New resources

New posts

New threads

new_resources