JSON-ის მიმოხილვა

რა არის JSON?

JSON განიმარტება როგორც JavaScript Object Notation.

JSON არის სინტაქსი, რომელიც გამოიყენება ინფორმაციის შესანახად და გადასაცემად.

JSON ინფორმაციის გაცვლის მსუბუქი ფორმატია.

JSON არის ენისგან დამოუკიდებელი *.

JSON-ის გამოყენება XML-თან შედარებით მარტივია.

* JSON იყენებს JavaScript-ის სინტაქსს, მაგრამ JSON-ის ფორმატი, მსგავსად XML-ისა, არის მხოლოდ ტექსტი. ნებისმიერ პროგრამირების ენას შეუძლია ტექსტის წაკითხვა და მისი გამოყენება.

JSON-ის მარტივი მაგალითია:

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

აქ JSON-ის სინტაქსი განსაზღვრავს თანამშრომლების ობიექტს, რომელშიც გვაქვს მასივი თანამშრომლების 3 ჩანაწერით.

იგივე ჩანაწერის XML-ის ანალოგია იქნებოდა:

<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>

JSON და JavaScript

JSON-ისა და JavaScript-ის სინტაქსური მსგავსების გამო, პარსერის გამოყენების ნაცვლად (რასაც XML იყენებს), JavaScript-ის პროგრამას შეუძლია გამოიყენოს სტანდარტული ფუნქციები JSON-ის ინფორმაციის გადასაყვანად JavaScript-ის ობიექტად.

მსგავსება XML-თან

  • ორივე JSON და XML არიან ტექსტი
  • ორივე JSON და XML არიან „თვით-აღმწერი“ (ადამიანისთვის კითხვადი)
  • ორივე JSON და XML არიან იერარქიული (მნიშვნელობები მნიშვნელობებში)
  • ორივე JSON და XML შეიძლება დავიჭიროთ HttpRequest-ით

განსხვავება XML-სგან

  • JSON არ იყენებს ტეგებს
  • JSON უფრო მოკლეა
  • JSON წასაკითხად და ჩასაწერად უფრო სწრაფია
  • JSON-ს შეუძლია მასივების გამოყენება

ყველაზე დიდი განსხვავება არის იმაში, რომ XML საჭიროებს გაპარსვას XML პარსერის მეშვეობით, JSON კი შეიძლება გაიპარსოს სტანდარტული JavaScript-ის ფუნქციით.

რატომ JSON?

AJAX აპლიკაციებისთვის, JSON უფრო სწრაფი და მარტივი გამოსაყენებელია ვიდრე XML:

XML-ის გამოყენებისას

  • დაიჭირე XML დოკუმენტი
  • გამოიყენე XML DOM დოკუმენტის წასაკითხად
  • ამოიღე მნიშვნელობები და შეინახე ცვლადებში

JSON-ის გამოყენებისას

  • დაიჭირე JSON სტრიქონი
  • გაპარსე სტრიქონი Parse ბრძანებით

 

JSON-ის სინტაქსის წესები

JSON-ის სინტაქსი მსგავსია JavaScript-ის ობიექტების ჩაწერის სინტაქსისა:

  • მონაცემი იწერება სახელი/მნიშვნელობა წყვილებით
  • მონაცემები იყოფა მძიმით
  • ობიექტები იწერება ფიგურულ ფრჩხილებში
  • მასივი იწერება კვადრატულ ფრჩხილებში

JSON-ის მონაცემი – სახელი და მნიშვნელობა

JSON-ის მონაცემი იწერება სახელი/მნიშვნელობა წყვილების სახით.

სახელი/მნიშვნელობა წყვილი შედგება შემდეგი ველებისაგან: სახელი (ბრჭყალებში), ორწერტილი და მნიშვნელობა.

“firstName”:”John”

JSON-ის მნიშვნელობები

JSON-ის მნიშვნელობები შეიძლება იყოს:

  • რიცხვი (მთელი ან მცოცავმძიმიანი)
  • სტრიქონი (ბრჭყალებში)
  • ბულის ტიპის (true ან false)
  • მასივი (კვადრატულ ფრჩხილებში)
  • ობიექტი (ფიგურულ ფრჩხილებში)
  • null

JSON-ის ობიექტები

JSON-ის ობიექტები იწერება ფიგურულ ფრჩხილებში.

მსგავსად JavaScript-ისა, ობიექტებს შეუძლიათ ჰქონდეთ უამრავი სახელი/მნიშვნელობა წყვილი:

{“firstName”:”John”, “lastName”:”Doe”}

JSON-ის მასივები

მასივები JSON-ში იწერება კვადრატულ ფრჩხილებში.

მსგავსად JavaScript-ისა, JSON-ის მასივი შეიძლება შეიცავდეს ბევრ ობიექტს:

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

ზემოთ აღწერილ მაგალითში, ობიექტი “employees” არის მასივი, რომელიც შეიცავს სამ ობიექტს. თითოეული ობიექტი არის ჩანაწერი პიროვნებაზე (მისი სახელი და გვარი).

JSON იყენებს JavaScript-ის სინტაქსს

რადგანაც JSON იყენებს JavaScript-ის სინტაქსს, არავითარი ზედმეტი პროგრამული უზრუნველყოფა არაა საჭირო JavaScript-ში JSON-თან სამუშაოდ.

JavaScript-ის გამოყენებით თქვენ შეგიძლიათ შექმნათ ობიექტების მასივი და მივანიჭოთ მას მონაცემი შემდეგნაირად:

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

პირველ ელემენტთან წვდომა შეგვიძლია ასე:

employees[0].firstName + ” ” + employees[0].lastName;

დაბრუნებული შედეგი იქნება:

John Doe

მონაცემის შეცვლა შეგვიძლია შემდეგნაირად:

employees[0].firstName = “Gilbert”;

JSON ფაილები

  • JSON-ის ფაილის ტიპია “.json”
  • MIME ტიპი JSON-ის ტექსტისთვის არის “application/json”

საზოგადოდ, JSON-ს იყენებენ ვებ სერვერიდან ინფორმაციის წასაკითხად, და ამ ინფორმაციის ვებ ვერდზე საჩვენებლად.

ამის დემონსტრაცია მარტივად შეიძლება სტრიქონის გამოყენებით (ფაილის მაგივრად).

JSON-ის მაგალითი – ობიექტი სტრიქონიდან

შევქმნათ JavaScript-ის სტრიქონი რომელიც შეიცავს JSON-ის სინტაქსს:

var text = ‘{ “employees” : [‘ +
‘{ “firstName”:”John” , “lastName”:”Doe” },’ +
‘{ “firstName”:”Anna” , “lastName”:”Smith” },’ +
‘{ “firstName”:”Peter” , “lastName”:”Jones” } ]}’;

იმისათვის რომ გარდავქმნათ JSON-ის ტექსტი JavaScript-ის ობიექტად, ვიყენებთ JSON.parse(text) ფუნქციას:

var obj = JSON.parse(text);

ამის შემდეგ შეგვიძლია ახალი -ის ობიექტის გამოყენება ჩვენ ვებ გვერდზე:

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML =
obj.employees[1].firstName + ” ” + obj.employees[1].lastName;
</script>

 

eval()-ის გამოყენება

ძველ ვებ-ბრაუზერებში, სადაც ფუნქცია JSON.parse() არ არის მხარდაჭერილი, შეგვიძლია გამოვიყენოთ eval() ფუნქცია JSON-ის ტექსტის JavaScript-ის ობიექტად გარდასაქმნელად.

var obj = eval(“(” + text + “)”);

eval() ფუნქციას შეუძლია ნებისმიერი JavaScript-ის კომპილაცია და შესრულება. ეს უსაფრთხოებისთვის პოტენციურ პრობლემას წარმოადგენს. ამიტომაც, შეეცადეთ თავიდან აიცილოთ ასეთი პრობლემები.

უკეთესია თუ გამოვიყენებთ JSON პარსერს JavaScript-ის ობიექტის მისაღებად.

JSON პარსერი იღებს მხოლოდ JSON-ის ტექსტს და სკრიპტებს არ აკომპილირებს.

ასევე, JSON პარსერები სწრაფად მუშაობენ იმ ვებ-ვრაუზერებში, სადაც გვაქვს JSON-ის მხარდაჭერა.

JSON-ს მხარს უჭერს ყველა წამყვანი ვებ-ბრაუზერი:

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4

ძველი ვებ-ვრაუზერებისთვის არსებობს JavaScript-ის ბიბლიოთეკა.

თავდაპირველად, JSON-ის ფორმატი განსაზღვრა Douglas Crockford-მა.

JSON-ის მაგალითი

ეს მაგალითი კითხულობს მენიუს myTutorials.txt ფაილიდან და აჩვენებს მენიუს ვებ-გვერდზე:

JSON-ის მაგალითი

<div id=”id01″></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = “myTutorials.txt”;

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open(“GET”, url, true);
xmlhttp.send();

function myFunction(arr) {
var out = “”;
var i;
for(i = 0; i < arr.length; i++) {
out += ‘<a href=”‘ + arr[i].url + ‘”>’ +
arr[i].display + ‘</a><br>’;
}
document.getElementById(“id01”).innerHTML = out;
}
</script>

ჩვენ მაგალითში myTutorials.txt ფაილს აქვს შემდენი სახე:

[

{

“display”: “JavaScript Tutorial”,

“url”: “http://www.w3schools.com/js/default.asp&#8221;

},

{

“display”: “HTML Tutorial”,

“url”: “http://www.w3schools.com/html/default.asp&#8221;

},

{

“display”: “CSS Tutorial”,

“url”: “http://www.w3schools.com/css/default.asp&#8221;

}

]

თავდაპირველად ხდება XMLHttpRequest ობიექტის გამოცხადება.

xmlhttp.onreadystatechange გამოიძახება ყოველთვის, როდესაც xmlhttp.readyState იცვლის მნიშვნელობას (შეიძლება მიიღოს მნიშვნელობა: 0, 1, 2, 3 ან 4).

მინიჭებულ ფუნქციაში ვამოწმებთ თუ xmlhttp.readyState არის 4 (ანუ response მიღებულია) და xmlhttp.status არის 200 (რაც იმას ნიშნავს რომ url ნაპოვნია).

თუ პირობები ჭეშმარიტია, მაშინ myArr-ში ვინახავთ გაპარსულ JSON-ის ობიექტებს და გადავცემთ ამ მასივს ჩვენ შექმნილ ფუნქციას, რომელიც მასივის ელემენტებს ეკრანზე დაბეჭდავს.

xmlhttp.open() მეთოდს გადაეცემა სამი პარამეტრი:

  • პირველი განსაზღვრავს მოთხოვნის ტიპს (“POST” ან “GET”)
  • მეორე პარამეტრი არის URL
  • მესამე პარამეტრი არის ბულის ტიპის (true ან false), რომელიც განსაზღვრავს თუ როგორ უნდა დამუშავდეს მოთხოვნა (ასინქრონულად თუ არა).

xmlhttp.send() მეთოდი აგზავნის მოთხოვნას სერვერზე (POST-ის შემთხვევაში პარამეტრაც გადაეცემა გასაგზავნი მონაცემების სტრიქონი).

 

JSON-ის ვალიდაცია

შეგვიძლია გამოვიყენოთ ონლაინ JSON ვალიდატორები, რათა დავრწმუნდეთ ჩვენი JSON-ის ტექსტის ვალიდურობაში.

ვალიდატორი საიტებია:

და ა. შ.

Leave a Reply / უპასუხე

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / შეცვლა )

Twitter picture

You are commenting using your Twitter account. Log Out / შეცვლა )

Facebook photo

You are commenting using your Facebook account. Log Out / შეცვლა )

Google+ photo

You are commenting using your Google+ account. Log Out / შეცვლა )

Connecting to %s