Работа с json средствами JavaScript

Название	Работа с json средствами JavaScript
Дата	19.11.2022
Размер	27.91 Kb.
Формат файла
Имя файла	JSON.docx
Тип	Документы #798219

Работа с JSON средствами JavaScript
Формат JSON используется для обмена текстовой информацией между сервером и браузером. Основными операциями по работе с данными в формате JSON является преобразование объектов в формат JSON и обратно.
Для преобразования объекта в строку JSON применяется функция JavaScript JSON.stringify(). На вход функции могут передаваться массивы (за исключением ассоциативных) и объекты. Операция преобразования объектов и массивов в строку JSON называется сериализацией.

Ниже представлен код, в котором создается объект person и массив someArray. Данные сериализуются в строку JSON и выводятся на экран в контейнер container.

var person = {

    name: "Jhon",

    gender: "Male",

    age: 36

}
var someArray = [];

someArray[0] = "Data1";

someArray[1] = 12;
var out = JSON.stringify(person);

document.getElementById("container").innerHTML = out + "
";

out = JSON.stringify(someArray);

document.getElementById("container").innerHTML += out + "
";

Обратное преобразование из строки JSON в объект или массив называется десериализацией данных. Обратное преобразование осуществляется с помощью фукнции JSON.pase().

После десериализации доступ к данным осуществляется стандартным образом для объекта:
var person_data = '{"name":"Jhon","gender":"Male","age":36}';

var obj = JSON.parse(person_data);

document.getElementById("container").innerHTML += obj.name + "
";

document.getElementById("container").innerHTML += obj.gender + "
";
В качестве имен свойств объекта, как видно из кода выше, используются ключи строки JSON.
Работа с JSON средствами PHP
В языке также имеются функции для сериализации/десериализации данных:

json_encode() – преобразование объекта в строку JSON;

json_decode() – преобразование строки JSON в объект.
В языке php данные могут быть десериализованы как в объект, так и в ассоциативный массив. Ключи JSON становятся индексами ассоциативного массива или полями объекта, значения – соответствующими значениями.

    class Person {

        function __construct($name, $age, $gender) {

            $this->name = $name;

            $this->age = $age;

            $this->gender = $gender;

        }

    }
    $jhon = new Person("Jhon", 36, "male");
    $str = json_encode($jhon);

    echo $str;

?>
В примере выше создается класс Person. Через конструктор класса устанавливаются поля name, age, gender.

Далее создается объект, являющийся экземпляром класса Person, с именем $jhon. Объект $jhon преобразуется в строку JSON с помощью функции json_encode.
Пример обратного преобразования приведен ниже:

    $json_str = '{"name":"Jhon","age":36,"gender":"male"}';
    $jhon_person = json_decode($json_str);

    echo $jhon_person->name . "
";

    echo $jhon_person->age . "
";

    echo $jhon_person->gender . "
";

?>
В приведенном примере строка JSON десериализуется в объект $jhon_person.

Однако, можно преобразовать строку в ассоциативный массив, передав дополнительный аргумент в функцию json_decode():

    $json_str = '{"name":"Jhon","age":36,"gender":"male"}';
    $jhon_person_array = json_decode($json_str, true);

    echo $jhon_person_array['name'] . "
";

    echo $jhon_person_array['age'] . "
";

    echo $jhon_person_array['gender'] . "
";

?>
В примере выше в функцию json_decode() передается значение второго параметра $assoc логического типа. Значение true предписывает функции преобразовать данные в ассоциативный массив. По умолчанию значение параметра $assoc – false.

Применение JSON
Основное применение JSON находит в передаче данных между сервером и веб-браузером. С помощью технологии асинхронных запросов (AJAX) существует возможность передавать только данные, без перезагрузки html документа. Кроме того, данные могут передаваться в различные программы, не являющиеся web-браузерами. Как правило, в таких программах имеется некоторый интерфейс для отображения полученных данных.
Для обеспечения асинхронной передачи данных в JavaScript используется специальный класс XMLHttpRequest.

Работа с объектом состоит из следующих этапов:

Создание экземпляра класса.
Открытие соединения с помощью функции open().
Отправка запроса на сервер с помощью функции send().
Получение и отображение результата.

Получение данных возможно либо в синхронном, либо в асинхронном режиме.

В синхронном режиме после отправки данных на сервер веб-страница в браузере «замораживается» до тех пор, пока сервер не передаст ответ. Если ответа не получено, взаимодействие со страницей не возможно. Синхронные режимы применяются когда данные между веб-страницей и сервером передаются быстро, и время ожидания таких данных не значительно.
При асинхронном режиме экземпляру объекта передается ссылка на обработчик события получения ответа от сервера. После того, как запрос на сервер отправлен, веб страница доступна в обычно режиме. При получении ответа от сервера генерируется специальное событие, по которому вызывается функция-обработчик полученных данных.

Рассмотрим пример:
DOCTYPE html>





В скрипте объявлена функция loadDoc для взаимодействия с сервером посредством AJAX запросов.

Переменная xmlHttp является экземпляром класса XMLHttpRequest.

После создания объекта XMLHttpRequest полю onreadystatechange присваивается функция обработчик ответа от сервера. Пример, приведенный выше является примером асинхронного взаимодействия.

Функция обработчик ответа проверяет состояние ответа (поле readyState) и статус ответа (status), и если ответ получен (this.readyState == 4 && this.status == 200)
происходит его обработка: в первую очередь объект десериализуется, затем данные выводятся на экран.
Далее по тексту программы идет открытие соединения с помощью функции open, и отправка запроса с помощью функции send().

Функция open() принимает на вход следующие параметры: тип запроса (POST/GET), url запроса, и признак синхронного/асинхронного взаимодействия (true – для асинхронного взаимодействия).
На стороне сервера исполняется следующий скрипт ajax_info.php:

    header("Content-type: application/json");

    class Person {

        function __construct($name, $age, $gender) {

            $this->name = $name;

            $this->age = $age;

            $this->gender = $gender;

        }

    }
    $jhon = new Person("Jhon", 36, "male");

    $str = json_encode($jhon);

    echo $str;

?>
В первой строке устанавливается заголовок Content-type, сигнализирующий о том, что передаются данные в формате json.
Для проверки работоспособности приведенных выше скриптов необходимо на сервере создать два файла index.hml, содержащий код из первого скрипта, и файл ajax_info.php, содержащий код второго скрипта.

Домашнее задание
Модифицировать код файла с блогом следующим образом: необходимо чтобы заполнение поля с сообщениями происходило в реальном времени. То есть для показа сообщений из базы данных не требовалось перезагружать страницу.