RSSAjax

Sự kết hợp giữa AJAX Và JSON

JSON (JavaScript Object Noattion) là 1 định dạng hoán vị dữ liệu nhanh. Chúng dễ dàng cho chúng ta đọc và viết. Dễ dàng cho thiết bị phân tích và phát sinh. Chúng là cơ sở dựa trên tập hợp của ngôn ngữ lập trình JavaScript, tiêu chuẩn ECMA-262 phiên bản 3 – tháng 12 năm 1999.

  1. Kiến thức cơ bản về JSON
  2. Sự kết hợp giữa AJAX và JSON
  3. Kết luận
  4. Tài liệu tham khảo

 

Cấu trúc của JSON

JSON được xây dựng trên 2 cấu trúc

 
  • Là tập hợp của các cặp tên và giá trị name-value. Trong những ngôn ngữ khác nhau, đây được nhận thấy như là 1 đối tượng (object), sự ghi (record), cấu trúc (struct), từ điển (dictionary), bảng băm (hash table), danh sách khoá (keyed list), hay mảng liên hợp.
  • Là 1 tập hợp các giá trị đã được sắp xếp. Trong hầu hết các ngôn ngữ, this được nhận thấy như là 1 mảng, véc tơ, tập hợp hay là 1 dãy sequence.
 

So sánh JSON và XML

  JSON XML
Giống nhau Là văn bản trơn (không có định dạng(màu sắc, cỡ chữ,…))
Là "tự mô tả" (người dùng có thể hiểu được)
Là phân cấp (có cấu trúc cây)
Có thể được phân tích cú pháp (parse) bởi JavaScript
Dữ liệu có thể được truyền đi bằng AJAX
Khác nhau 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
JSON rút ngắn thời gian viết mã JavaScript, ActionScript hơn là sử dụng XML.
Có thẻ kết thúc
Phức tạp hơn 
Không sử dụng mảng như JSON

Bảng 1: So sánh giữa XML và JSON

 

Tại sao dùng JSON?

Đối các ứng dụng AJAX,sử dụng JSON nhanh và dễ dàng hơn 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
 

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

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.

 

Trình duyệt và phần mềm web hỗ trợ

Web Browsers Support Web Software Support
Firefox (Mozilla) 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4
jQuery
Yahoo UIPrototype
Dojo
ECMAScript 1.5
 

Cú pháp JSON

Cú pháp JSON là một tập hợp con của cú pháp JavaScript.Tại sao JSON có liên quan đến JavaScript, ActionScript. Đơn giản là vì dữ liệu được định dạng JSON chính là cách biểu diễn một đối tượng trong các Scripting Language này.

Khi sử dụng JSON với JavaScript hay ActionScript, không cần phải có các bước phân tích phức tạp như đối với XML. Mà có thể truy vấn trực tiếp giá trị theo tên (khóa) được định nghĩa trong JSON.

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ác kiểu dữ liệu

 
Name Description
object {}
{ members }
members string : value
members , string : value
array []
[ elements ]
elements value
elements , value
value string, number, object, array, boolean, null

Bảng 2: Các kiểu dữ liệu trong JSON

 
  • Một đối tượng là các cặp tên và giá trị. Một đối tượng bắt đầu bởi dấu ngoặc đơn trái { và kết thúc với dấu ngoặc đơn phải }. Từng tên được theo sao bởi dấu 2 chấm : và các cặp tên/giá trị được tách ra bởi dấu phẩy ",".

Hình 1: Kiểu dữ liệu đối tượng trong JSON

Ví dụ:

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

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

 firstName = "John"

 lastName = "Doe"
 
  • Một mảng là một tập hợp các giá trị đã được sắp xếp. Một mảng bắt đầu bởi dấu mở ngoặc vuông [ và kết thúc với dấu ngoặc vuông phải ]. Các giá trị được cách nhau bởi dấu phẩy ",". Chỉ số của mảng có thể bắt đầu là 0 hoặc 1.

HInh 2: Kiểu dữ liệu mảng trong JSON

Ví dụ: Khai báo một đối tượng “employees” là một mảng chứa 3 đối tượng. mỗi đối tượng là một record của person (với một ‘first name và’ một ‘last name’).

 {
 "employees": [
 { "firstName":"John" , "lastName":"Doe" }, 
 { "firstName":"Anna" , "lastName":"Smith" }, 
 { "firstName":"Peter" , "lastName":"Jones" }
 ]
 }
 
  • Một giá trị có thể là một chuỗi string trong những trích dẫn kép hay là một số, hay true hay false hay null, hay là một đối tượng hay là một mảng. Những cấu trúc này có thể đã được lồng vào nhau.

Hinh 3: Tập hợp các kiểu dữ liệu cơ bản trong JSON

 
  • Một chuỗi string là một tập hợp của zero hay ngay cả mẫu tự Unicode, được bao bọc trong các dấu trích dẫn kép (“), dùng để thoát ra dấu chéo ngược.Một ký tự đã được hiển thị như là một chuỗi ký tự đơn độc. Một chuỗi string rất giống như là chuỗi string C hay là Java.

Hình 4: Kiểu dữ liệu string trong JSON

 
  • Một số (number) rất giống một số C và Java, trừ định dạng bát phân và hex là không thể dùng.

Hình 5: Kiểu dữ liệu number trong JSON

Mã hoá ký tự

  • Theo UNICODE.
  • Mặc định: UTF-8.
  • UTF-16 và UTF-32 được cho phép.

JSON Files

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

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.

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:

 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:

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

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

 <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>

Chú thích:

Đoạn mã JavaScript dùng để gán các giá trị của đối tượng thứ 2 trong mảng các đối tượng JSON vào các trường trong trang HTML. Trường có First Name sẽ được gán giá trị của firstName trong đối tượng JSON đã khai báo ở trên, tượng tự thì ta cũng có giá trị trường Last Name là bằng lastName. Cú pháp để lấy giá trị của một mảng đối tượng JSON :

Ví dụ:

 obj.employees[0].firstName 
 obj.employees[0].lastName 

lấy giá trị của dòng đầu tiên trong mảng đối tượng JSON.

Kết quả:

 John
 Doe

Để gán giá trị cho một đối tượng JSON, ta sẽ thực hiện như sau:

Ví dụ: gán giá trị firstName trong dòng đầu tiên bằng giá trị mới là Nguyen

 employees[0].firstName ="Nguyen"

Để hiểu rõ về cú pháp của JSON ta sẽ tìm hiểu về một ví dụ là sự kết hợp của JSON và AJAX dưới đây.

 

Sự kết hợp giữa AJAX và JSON

Chúng ta xét một ví dụ để nắm chắc hơn phần lý thuyết hơn ở trên. Hãy bắt đầu vào tìm hiểu ví dụ nào các bạn !

Trong đối tượng JSON, có một bảng với hai hàng. Có hai cột.Các cột tblStateId và State. Hàng1 chứa tblStateId: 1 và State: Tennessee.Row 2 chứa tblStateid: 2 và State: Alabama.

 {‘Tables’:[{
 ‘Name’:’Table1’,’Rows’:[
 {‘tblStateId’:1,’State’:’Tennessee’},
 {‘tblStateId’:2,’State’:’Alabama’}]}],
 ‘getTable’:function(n){return _getTable(n,this);}}

Bây giờ bạn có thể quan sát mã JavaScript sử dụng một đối tượng JSON.Mã JavaScript chạy trong Internet Explorer và sử dụng các Sarissa của thư viện JavaScript phía client. Nó sẽ lấy dữ liệu từ một máy chủ web địa phương và sau đó tạo ra một đối tượng dựa trên một đối tượng JSON.

 var xmlhttp = new XMLHttpRequest();
 function clickme(){
 xmlhttp.onreadystatechange= myHandler
 xmlhttp.open(“GET”, “GetData.aspx”, true);
 xmlhttp.send(null);
 }
 function myHandler() {
 if ( xmlhttp.readyState == 4 ) // READYSTATE_COMPLETE is 4
 {
 var strObj = xmlhttp.responseText;
 var obj;
 eval(“obj=” + strObj);
 for(m in obj)
 alert(m);
 }
 }

Trong ví dụ này, một đối tượng XMLHttpRequest được tạo ra và yêu cầu được gửi đến máy chủ web.Khi response thì đối tượng sẽ nhận dữ liệu trả về và hiển thị trong một cửa sổ pop-up cho người sử dụng.

 

Các bạn có thể tham khảo các ví dụ về JSON và AJAX tại đây, sẽ trình bày chi tiết các bước để tạo ứng dụng giữa JSON và AJAX.

 

 

Kết luận

Như vậy, là tôi đã trình bày xong kiến thức cơ bản về JSON và sự kết hợp giữa JSON và AJAX. Và ở đây tôi chỉ trình bày ở mức cơ bản để mọi người có thể hiểu cách làm việc của JSON, có thể viết được các ứng dụng JSON ở mức cơ bản rồi. Tiếp đó thì các bạn cũng có tự mình tạo ra được các ứng dụng AJAX sử dụng JSON đẻ truyền dữ liệu sang bên client hoặc server. Các bạn cần nắm chắc các kiến thức cơ bản này, trước khi tìm hiểu sâu hơn nữa về AJAX và JSON.

Tài liệu tham khảo

  1. Bogdan Brinzarea-Iamandi,Cristian Darie,Audra Hendrix:AJAX and PHP Building Modern Web Applications – Second Edition(2009),Packt Publishing Ltd.
  2. http://goccay.vn/showthread.php?t=4594&page=1&s=79a0fb4bd9f2030021189d67a9964683
  3. http://www.qhonline.info/forum/showthread.php/4373-json-la-gi-json-lam-viec-nhu-the-nao-phan-1
  4. http://w3schools.com/json/default.asp
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu