Blog chia sẻ và thảo luận về IT|Programming Language|Search Engine Optimization|Data Base|Linux| ...

datnguyen

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

+ No comment yet
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:
Mã:
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:
Mã:
var obj = eval ("(" + txt + ")");
Cuối cùng là việc sử dụng đối tượng JavaScript trong trang web như sau:

Mã:
<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
Nguồn : Phponline.com

Đăng nhận xét