Статьи

Форматы данных Ajax и Web-сервисов. Часть 2. JSON и JSONP

Март 6, 2019

Это вторая статья в серии, посвященная форматам данных веб-сервисов для Ajax. В первой части мы рассмотрели XML, SOAP и HTML . Сегодня мы подробнее рассмотрим JSON и JSONP.

JSON

JavaScript Object Notation была разработана гуру JavaScript Дугласом Крокфордом. По сути, это легкий формат обмена данными, написанный с использованием JavaScript-объекта и литерального синтаксиса массива.

Мы можем преобразовать пример книг XML в первой статье в сопоставимый формат JSON: 


[
	{
		title: "The Principles of Beautiful Web Design, 2nd Edition",
		url: "http://www.sitepoint.com/books/design2/",
		author: "Jason Beaird",
		publisher: "SitePoint",
		price: {
			currency: "USD",
			amount: 39.95
		}
	},
	{
		title: "jQuery: Novice to Ninja",
		url: "http://www.sitepoint.com/books/jquery1/",
		author: "JEarle Castledine & Craig Sharkie",
		publisher: "SitePoint",
		price: {
			currency: "USD",
			amount: 29.95
		}
	},
	{
		title: "Build Your Own Database Driven Website",
		url: "http://www.sitepoint.com/books/phpmysql4/",
		author: "Kevin Yank",
		publisher: "SitePoint",
		price: {
			currency: "USD",
			amount: 39.95
		}
	}
]

Это массив книг, представленных в виде объектов со свойствами заголовка, URL, автора, издателя и цены. Цена — это дочерний объект со свойствами валюты и числовой суммы.

Анализировать строку данных JSON в JavaScript легко. В идеале вы можете использовать встроенный в браузер метод JSON.parse ( json-string ) или библиотеку, такую ​​как JSON-js Дугласа Крокфорда. Даже если они недоступны, вы можете вернуться к встроенной в JavaScript функции eval () . Там нет никакого кода для написания, и легко получить данные: 

 
var json = xhr.responseText;
var book = JSON.parse(json);
alert(book[0].title); // first book title
alert(book[1].url); // second book URL

Преимущества JSON:

  • Меньший, менее подробный формат, чем XML.
  • Обычно JSON удобочитаем, хотя для разделения данных лучше использовать табуляцию и возврат каретки. В отличие от XML, браузеры обычно не отображают JSON в удобочитаемом формате, хотя для Firefox , Chrome и Opera доступны надстройки для просмотра.
  • Анализировать и использовать данные JSON в JavaScript легко.
  • Поддержка JSON предоставляется на других языках, таких как PHP .

Есть несколько недостатков:

  • JSON имеет меньшую поддержку, чем XML на серверных языках, хотя многие сторонние библиотеки доступны на веб-сайте JSON.org .
  • Проблемы безопасности могут возникнуть, если вы используете eval () для анализа строк JSON — полезная нагрузка может содержать вредоносный скрипт.

Однако преимущества JSON более чем перевешивают риски. Это идеальный формат данных Ajax, который, вероятно, должен быть вашим первым выбором.

JSONP (или JSON-P)

Если вы используете XMLHttpRequest для вызова веб-службы JSON, ответ возвращается в виде строки, которую можно проанализировать с помощью JSON.parse () или eval (). Тем не менее, вы также можете создавать компоненты Ajax, которые используют методы внедрения сценариев, то есть тег script 

 
var script = document.createElement("script");
script.src = "http://webservice.com/?a=1&b=2";
document.getElementsByTagName("head")[0].appendChild(script);

В отличие от XMLHttpRequest, внедрение сценариев может получать данные с удаленных серверов в разных доменах. Это делает метод идеальным для анализаторов трафика, букмарклетов, виджетов и рекламных систем.

К сожалению, любые возвращенные данные JSON выполняются немедленно как собственный код JavaScript. Он не присвоен переменной, поэтому он потерян навсегда. Мы можем преодолеть эту проблему, передав имя функции обратного вызова нашему веб-сервису: 

 
var script = document.createElement("script");
script.src = "http://webservice.com/?a=1&b=2&callback=MyDataHandler";
document.getElementsByTagName("head")[0].appendChild(script);

Веб-сервис возвращает данные JSON, заключенные в вызов функции обратного вызова. Это JSONP или «JSON с отступом», например 

 
MyDataHandler([
	{
		title: "The Principles of Beautiful Web Design, 2nd Edition",
		url: "http://www.sitepoint.com/books/design2/",
		author: "Jason Beaird",
		publisher: "SitePoint",
		price: {
			currency: "USD",
			amount: 39.95
		}
	}
	...
]);

JSON-объект анализируется и передается в функцию MyDataHandler () после завершения загрузки.

JSON и JSONP стали популярными форматами данных Ajax. Однако, возможно уменьшить размер данных еще больше — мы обсудим варианты в последнем посте этой серии .

38
Share: