XMLHttpRequest: обработка JSON в теле ответа онлайн урок.


Теперь попробуем передать в качестве тела ответа сервера JSON строку. Для этого нам понадобится PHP функция json_encode($data), которая принимает в качестве аргумента любой тип данных. Например, массив. Определим в файле test.php массив $data и выведем JSON строку этого массива

<?php 
$data = array(
'name' => 'Steven',
'email' => 'steve@junkie.com',
'phone' => '123-45-67',
'message' => 'Hello. I want to buy some weed.'
);

echo json_encode($data);


Для проверки можно напрямую обратиться к этому файлу в браузере. Тогда получим на экране строку

{"name":"Steven","email":"steve@junkie.com","phone":"123-45-67","message":"Hello. I want to buy some weed."}

Осталось подправить JS скрипт. Воспользуемся объектом JSON для извлечения данных из переданной строки.

request = getXMLHttpRequest();

request.onreadystatechange = function() {
   if (request.readyState == 4) {
     responseBody = request.responseText;
     data = JSON.parse(responseBody);
     console.log(data);
     alert(data['message']);
   }
};

request.open('GET', '/test.php', true);
request.send(null);


После получения тела ответа, мы преобразовали JSON строку в JS объект. Далее в консоль вывели информацию о нем, а в модальное окно вывели текст свойства message. Как видим, ничего сложного.

Необходимо понимать, что в скрипте test.php мы имеем право писать любой PHP код, лишь бы он работал и выводил данные, например, при помощи echo.

В следующих уроках мы получим данные из БД при помощи асинхронного запроса.