jQuery. Обмен данными в формате JSON

Обмен данными в формате JSON

Хорошей альтернативой использования XML-документа для обмена данными с сервером служит использование JSON-объектов. XML-документ из листинга 10.9 можно представить в качестве JSON-объекта следующим образом.

var json = '{' +
'"text1":"Поле 1 – Строка 1",' +
'"text2":"Поле 2 – Строка 2"' +
'}';

Чтобы преобразовать строку json в JSON-объект, достаточно обработать ее с помощью функции eval(). Функция eval() помещает JSON-объект в память интерпретатора JavaScript и возвращает ссылку на него. Для корректной работы функции eval() строку, содержащую JSON-объект, необходимо взять в круглые скобки.

var jsonObject = eval('(' + json + ')');

Получить доступ к данным можно следующим образом.

var text1 = jsonObject.text1;
var text2 = jsonObject.text2;

В качестве JSON-объекта может быть указан массив с данными.

var json = '["Элемент1", "Элемент2", "Элемент3", "Элемент4"]';
var jsonObject = eval('(' + json + ')');
alert(jsonObject[0]); // Выведет: Элемент1

JSON-объект может иметь сложную структуру. Например, он может быть массивом объектов.

var json = '[ {"text1":"Поле 1", "text2":"Поле 2"}, ';
json += '{"text3":"Поле 3", "text4":"Поле 4"} ]';
var jsonObject = eval('(' + json + ')');
alert(jsonObject[1].text3); // Выведет: Поле 3

Или объектом, значения свойств которого являются массивами.

var json = '{ "elem1":[1, 2, 3], "elem2":[4, 5, 6] }';
var jsonObject = eval('(' + json + ')');
alert(jsonObject.elem2[0]); // Выведет: 4

Можно также комбинировать различные варианты.

var json = '{ "elem1":[{ "txt1": "Текст1", "txt2": "Текст2" }, 2] }';
var jsonObject = eval('(' + json + ')');
alert(jsonObject.elem1[0].txt2); // Выведет: Текст2

Приведем пример обмена данными в формате JSON. Создадим документ с формой (листинг 10.10), который будет обмениваться данными с файлом ajax.php (листинг 10.11), расположенным на сервере.

Листинг 10.10. Обмен данными в формате JSON

<!doctype html>
<html>
<head>
<title>Обмен данными в формате JSON</title>
<meta charset="utf-8">
<script>
function f_GET() {
   // Отправка запроса методом GET
   var link;
   var url;
   var txt1 = document.getElementById("text1").value;
   var txt2 = document.getElementById("text2").value;
   if (txt1 == "" || txt2 == "") {
      window.alert("Не заполнено поле");
      return false;
   }
   if (window.XMLHttpRequest) {
      link = new XMLHttpRequest();
   }
   else {
      if (window.ActiveXObject) {
         var XMLHTTP = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
         for (var i=0; i<4; i++) {
            try { // Обработка исключений
               link = new ActiveXObject(XMLHTTP[i]);
               break; // Если объект создан, то выход из цикла
            }
            catch (e) {}
         }
      }
   }
   if (!link) {
      window.alert("Ваш веб-браузер не поддерживает технологию Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt1);
   url += "&text2=" + encodeURIComponent(txt2);
   // Подготовка асинхронного запроса методом GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); // Отправляем запрос
   document.getElementById("otvet").innerHTML = "Загрузка...";
}

function f_razborRequest(link) {
   // Обрабатываем асинхронный запрос
   if (link.readyState == 4) {
      if (link.status == 200) { // Запрос успешно обработан
         var json = link.responseText;
         var otvet = eval('(' + json + ')');
         var msg = otvet.text1 + "<br>" + otvet.text2;
         document.getElementById("text1").value = "";
         document.getElementById("text2").value = "";
         document.getElementById("otvet").innerHTML = msg;
      }
      else {
         document.getElementById("otvet").innerHTML = "Ошибка";
      }
   }
}
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="Отправить методом GET"
       onclick="f_GET();">
<br>
<div id="otvet"></div>
</body>
</html>

Листинг 10.11. Исходный код файла ajax.php

<?php
header('Content-Type: text/plain; charset=utf-8');
if (isset($_GET['text1']) && isset($_GET['text2'])) {
   $text1 = htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-8');
   $text2 = htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-8');
   $arr = array('text1' => $text1, 'text2' => $text2);
   echo json_encode($arr);
}
else {
   $arr = array('text1' => 'Данные не получены', 'text2' => '');
   echo json_encode($arr);
}
?>

Для работы с JSON-объектами в PHP существует две функции.

json_encode(<Ассоциативный массив>) — преобразует ассоциативный массив в JSON-объект.
json_decode(<JSON-объект>[, <Тип результата>]) — производит разбор JSON-объекта. Необязательный параметр <Тип результата> может принимать следующие значения:

true — результат в виде ассоциативного массива;
false — результат в виде объекта (значение по умолчанию).

Рассмотрим пример.

<?php
$arr['text1'] = 'Строка 1';
$arr['text2'] = "Строка 2";
$json = json_encode($arr);
$arr2 = json_decode($json);
echo $arr2->text1, '<br>';           // Строка 1
echo $arr2->text2, '<br>';           // Строка 2
$arr3 = json_decode($json, true);
echo $arr3['text1'], '<br>';         // Строка 1
echo $arr3['text2'];                 // Строка 2
?>