Учебник по JSONP

Последнее обновление 18 июля 2019 07:18:51 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Введение в JSONP

На этой странице мы обсудим JSONP, то есть JSON с отступом. JSONP используется для запроса данных с сервера, находящегося в другом домене. Но зачем нам нужен специальный метод для доступа к данным из другого домена? Это из-за единой политики происхождения.

Политика единого происхождения

В целом, эта политика гласит, что если протокол (например, http), номер порта (например, 80) и хост (например, example.com) отличается от того, где запрашиваются данные, это не должно быть разрешено.

Но элемент HTML <script> может выполнять поиск контента из других источников.

Как работает JSONP - шаг за шагом

Шаг 1 - Вам необходимо создать функцию обратного вызова. Функция принимает некоторые данные. Как следующий код:

function w3r_callback(data){
         	  console.log(data);
         	  }

Шаг 2 - Включите скрипт на вашей веб-странице, который содержит функцию обратного вызова, созданную в качестве параметра шага 1.

<script src="http://www.example.com?q=w3r_callback"><script>

Шаг 3 - Он выводит скрипт, который вызывает функцию, и запрашиваемые данные передаются.

w3r_callback({
  "FirstName" : "xyz",
  "LastName"  : "abc",
  "Grade"     : "A"
         	  }
         	  );

Заметка

JSONP не имеет ничего общего с Ajax, поскольку он не использует XMLHttpRequest. Вместо этого он динамически вставляет тег <script> в веб-страницу.

Но если вы используете Jquery для выполнения такого рода работы, вы должны использовать утилиту Jquery Ajax. Что-то вроде следующего -

 $.ajax({
         	  // ...
         	  dataType: 'jsonp',
         	  // ...
         	  });

Где использовать JSONP

JSONP в основном используется для получения данных с использованием API RESTFull (например, Flicker).

Пример - получение последних обновлений от фликера относительно тега "dogs" с использованием Jquery и JSONP

<!DOCTYPE html>
  <html>
  <head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <title>An JSONP example from w3resource</title>
  </head>
  <body>
  <div id="images">
  </div>
  <script>
         	  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
         	  {
         	  tags: "dogs",
         	  tagmode: "any",
         	  format: "json"
         	  },
         	  function(data) {
         	  $.each(data.items, function(i,item){
         	  $("<img/>").attr("src", item.media.m).appendTo("#images");
         	  if ( i == 3 ) return false;
         	  });
         	  });</script>
  </body>
  </html>

Просмотрите вывод приведенного выше примера JSONP в отдельном окне браузера.

Предыдущий: Введение в BSON
Далее: Учебник по JSON