Използване на Ajax и JSON

Автор: F1r3Fl3x

Често наричан „наследника на 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 е предоставил лесен за използване начин за обезопасяване на изпълненият код.
Всичко което трябва да направите е да вкарате този джаваскрипт файл в секцията на сайта ви.
Авторт се е пострудил и ни е улеснил максимално.
Ето малко по-различна форма на горният код:

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 формат.
В архива има примери, как се ползват функциите.

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