Използване на Ajax и JSON
15-11-2009
Често наричан "наследника на XML", JSON ( Javascript Object Notation ) не е нищо повече от един прост формат, чрез който се разменя информация между браузъра и сървъра. JSON е 'открит' от Douglas Crockford и е базиран на подмножество на езика Javascript.
Въпреки че синтаксисът може да е познат на много програмисти на C, C++, C#, Java, JavaScript, Perl, Python, и много други, JSON е напълно независим от реализацията на езика.

Стига толкова скучна история. Тук започва същинската част.

Ето пример за обект:
var obj = {};

Не изглежда кой зне какво, но в тези къдрави скоби можете да съхраните всичката информация, която ви е нужна.

Дефиниране на обекти
В по-стари Javascript приложения може да срещнете дефиниране на обект от този тип:
var json = new Object();

Този начин се използва много рядко. Повечето програмисти пестят код, като го дефинират чез две къдрави скоби.
var json = {};


Javacsript обектите се структорират под формата индекс/стойност.
var json = {
'google' : 'търсачка',
'gmail' : 'поща',
'www' : 'всичко'
};

alert( json.google ); //Ще извади 'търсачка'
alert( json.gmail ); // Ще извади 'поща'
alert( json.www ); // Ще извади 'всичко'


Обектите могат да приемат за стойност и масиви.
Масивите в Javascript се дефинират по 2 начина:
var array = new Array();

var array = [];

Както и при обектите, по-краткият начин се използва по-често. Разликата между масиви и обекти е, че масивите могат да приемат данни по модела индекс/ключ, така и само ключ:
var arr = [
'Google',
'Wikipedia',
[ 'Yahoo', 'Gmail' ]
];

arr[ 'asociativen_test' ] = 'raboti';

alert( arr[0] ); //Ще извади Google
alert( arr[1] ); //Ще извади Wikipedia
alert( arr[2][0] ); //Ще извади Yahoo
alert( arr[0][1] ); //Ще извади Gmail
alert( arr['asociativen_test'] ); // Ще извади 'raboti'


Ето пример за малко по-сложен обект със масиви:



var employees = {
"accounting" : [ //accounting е масив във обекта employees
{ "firstName" : "John", //Първият елемент в масива е обект
"lastName" : "Doe",
"age" : 23 },
{ "firstName" : "Mary", // Вторият елемент в масива е обект
"lastName" : "Smith",
"age" : 32 }
], // Край на масива accounting.

"sales" : [ // Sales е още един масив във employees.
{ "firstName" : "Sally",
"lastName" : "Green",
"age" : 27 },

{ "firstName" : "Jim",
"lastName" : "Galley",
"age" : 41 }
] // Край на масива sales
}; // Край на обекта Employees

alert( employees.sales[0].firstName + ' ' + employees.sales[0].lastName ); //Ще извади мето и фамилията на първият работник от sales: 'Sally Green'


alert( employees.accounting[1].firstName + ' ' + employees.accounting[1].lastName ); //Ще извади мето и фамилията навторият работник от accounting: 'Mary Smith'


Обработване наполучени данни
Ето един пример:
var json_data = "someVar = { 'kote': 'Miau', 'Ku4e': 'bau' }"; //Да приемем, че този текст сме го получили от сървъра чрез аякс заявка
eval( json_data ); //функцията eval изпълнява код, даден под формата на стринг
alert( someVar.dog ); //Ще извадо 'bau'

Този метод е прост и ефективен, но има възможност от хакерска атака. Създателят на JSON е предоставил лесен за използване начин за обезопасяване на изпълненият код.
Всичко което трябва да направите е да вкарате този джаваскрипт файл в <head> секцията на сайта ви.
Авторт се е пострудил и ни е улеснил максимално.
Ето малко по-различна форма на горният код:
var json_data = "someVar = { 'kote': 'Miau', 'Ku4e': 'bau' }"; //Да приемем, че този текст сме го получили от сървъра чрез аякс заявка
json_data.parseJSON(); //С тази функция спокойно можете да изпълнявате JSON стринг, без да се притеснявате от хакерски атаки.
alert( someVar.dog ); //Ще извадо 'bau'


Джаваскрипт файлът, който поставихте току-що в страниците си има фунцкията да превръща всеки масив, булева стойност, дата, число, обект и стринг в JSON стринг:
var toJSON = someVar.toJSONString(); //Така променливата toJSON е готова да бъде изпратена към сървър, където той ще я обработи


От страна на съвръра JSON стрингът е нищо повече от прост текст. Затова тя трябва да се обработи.
При някои езици в самият компилатор се поддържа функцията за декодиране на JSON стринг, но ако при вас тези функции отсъстват, в http://json.org/ има скриптове на почти всички програмни езици, с които ще можете да обработите получената информация.

Аз работя на последна версия на PHP (5.3.0) и там функциите json_encode И json_decode са вградени, но за тези, при които липсват, свалете си този архив, разархивирайте го, и навсякъдето искате да ползвате JSON функциите, include-вайте файла JSON.php.

Някои допълнителни неща, които искам да кажа:
За да не губи време браузъра да рендер-ва html код от данните, които му връщате при аякс заявката слагайте този ред:
header('Content-Type: application/json');

Друго важно нещо е, че при тези от вас, които имат вградени JSON функциите в PHP, ще трябва да добавяте гайла json_cyrillic_fix.php (от архива), който съдържа фикс ( намерен в PHP.net ) за проблема на json_encode и стринговете, които не са в UTF-8 формат.
В архива има примери, как се ползват функциите.

Ето линк към файловете.
А сега е време за малко демо :)



/ Трябва да сте регистриран за да напишете коментар /
От: trevata
12:09 15-11-2009
Урочето е хубаво, но ми се струва че при видеото звука е по-назад от картината...
От: lam3r4370
13:33 15-11-2009
Ще може ли да обясниш как да подадем данни на жсон?
От: F1r3Fl3x
20:23 15-11-2009
Да, наистина има разминаване, чак сега го забелязах :/
От: emagi
10:23 16-11-2009
Аз ползвам JSON от доста време!Добър избор на тематика според мен!Ще бъде полезна на много потребители
От: F1r3Fl3x
12:34 17-11-2009
@Emagi, това беше идеята ми :) Написаха се доста уроци за използване на аякс, но в нито един нямаше споменат JSON. Затова реших да направя това уроче. Можеше да се справя по-добре с демото, но накрая ми писна и го качих в този му вид, защото направих поне 20 опита и все не ми харесваше :D
Надявам се да съм го обяснил така, че да може тези, които не са запознати с JSON, да разберат за какво става на въпрос!
От: emagi
15:50 17-11-2009
Може да направиш урок с няколко примера, точно как се ползва.От примери се учи най-добре.Обясни има ли начин за обмяна на информация между php и javascript(ajax) като се ползва json.Ще е хубаво да се види
От: lam3r4370
11:17 18-11-2009
@emagi добро предложение ,на мен също ще ми е интересно как става това.
От: F1r3Fl3x
13:58 18-11-2009
Сега съм болен и не съм на училище, така че ще имам време в близките няколко дни ще пусна едно уроче, ориентирано повече към приложенето на JSON :)
От: MontefuckeR
1:36 29-11-2010
каква е разлика м/у JSON и директен HTML, защо да изпращам JSON на PHP-то, а не примерно да сложа информацията в ПОСТ или ГЕТ..., и после PHP да върне отговор директно HTML ?
От: F1r3Fl3x
13:31 29-11-2010
Защото може да искаш да обновиш няколко елемента, а не само един :)
Примерно с обикновен HTML ще обновя съдържанието е див с ID upd, а с JSON, ще мога да обновя съдържанието на колкото си искам елемента, пък и може заявката да не се използва само за изваждане на HTML. С Ajax можеш да поискаш всякакъв вид информация от сървъра :)
От: batmanabg
13:29 22-07-2011
Полезен урок.
1