Что такое JSONP?
Я понимаю JSON, но не JSONP. документ Википедии о JSON is (was) лучший результат поиска для JSONP. Он говорит так:
JSONP или "JSON с заполнением" - это расширение JSON, в котором префикс указан как входной аргумент самого вызова.
да? Какой звонок? Это не имеет никакого смысла для меня. JSON-это формат данных. Никто не звонит.
на 2-й результат поиска С парнем по имени Реми, кто пишет Это О JSONP:
JSONP-это инъекция тега скрипта, передающая ответ с сервера на указанную пользователем функцию.
Я могу понять это, но это все еще не имеет никакого смысла.
Так что же такое JSONP? Почему он был создан (какую проблему он решает)? И зачем мне его использовать?
дополнительное соглашение: я только что создал новая страница для JSONP в в Википедии; теперь у него есть четкое и подробное описание JSONP, основанное на jvenema'ы ответ.
7 ответов
это на самом деле не слишком сложно...
скажем, вы находитесь на домене example.com, и вы хотите сделать запрос к домену example.net - ... Для этого вам нужно пересечь границы домена, нет-нет в большинстве browserland.
единственным элементом, который обходит это ограничение, являются теги
введите JSONP. Когда вы делаете запрос на сервер, который включен JSONP, вы передаете специальный параметр, который немного сообщает серверу о Вашей странице. Таким образом, сервер может красиво обернуть свой ответ таким образом, чтобы ваша страница могла обрабатывать.
например, скажем, сервер ожидает, что параметр под названием "обратный вызов" включит его возможности JSONP. Тогда ваш запрос будет выглядеть так:
http://www.example.net/sample.aspx?callback=mycallback
без JSONP это может вернуть некоторые базовый объект JavaScript, например:
{ foo: 'bar' }
однако, с JSONP, когда сервер получает параметр "обратный вызов", он обертывает результат немного по-другому, возвращая что-то вроде этого:
mycallback({ foo: 'bar' });
как вы можете видеть, теперь он будет вызывать указанный вами метод. Итак, на Вашей странице вы определяете функцию обратного вызова:
mycallback = function(data){
alert(data.foo);
};
и теперь, когда скрипт загружен, он будет оценен, и ваша функция будет выполняться. Вуаля, междоменная просьбы!
также стоит отметить одну важную проблему с JSONP: вы теряете большой контроль над запросом. Например, нет "хорошего"способа вернуть правильные коды сбоев. В результате вы в конечном итоге используете таймеры для мониторинга запроса и т. д., что всегда немного подозрительно. Предложение для JSONRequest - отличное решение для разрешения междоменных сценариев, поддержания безопасности и обеспечения надлежащего контроля над запросом.
в эти дни (2015), CORS рекомендуемый подход и JSONRequest. JSONP по-прежнему полезен для поддержки старых браузеров, но, учитывая последствия для безопасности, если у вас нет выбора, CORS-лучший выбор.
JSONP - это очень простой трюк, чтобы преодолеть XMLHttpRequest та же политика домена. (Как вы знаете, никто не может послать AJAX (XMLHttpRequest) запрос в другой домен.)
So-вместо использования XMLHttpRequest мы должны использовать скрипт HTML-теги, которые вы обычно используете для загрузки JS-файлов, чтобы js получал данные из другого домена. Звучит странно?
дело в том-оказывается скрипт теги можно использовать аналогично XMLHttpRequest! Проверьте это:
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';
вы в конечном итоге с скрипт сегмент, который выглядит так после загрузки данных:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
однако это немного неудобно, потому что мы должны получить этот массив из скрипт тег. Так что JSONP создатели решили, что это будет работать лучше(и это):
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';
уведомления my_callback
JSONP работает, создавая элемент "script" (либо в разметке HTML, либо вставленный в DOM через JavaScript), который запрашивает удаленное расположение службы данных. Ответ-это javascript, загруженный в ваш браузер с именем предопределенной функции вместе с передаваемым параметром, который является запрашиваемыми данными JSON. Когда скрипт выполняется, функция вызывается вместе с данными JSON, позволяя запрашивающей странице получать и обрабатывать данные.
Для Дальнейшего Чтения На Странице: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/
фрагмент кода на стороне клиента
<!DOCTYPE html>
<html lang="en">
<head>
<title>AvLabz - CORS : The Secrets Behind JSONP </title>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="username" placeholder="Enter Your Name"/>
<button type="submit" onclick="sendRequest()"> Send Request to Server </button>
<script>
"use strict";
//Construct the script tag at Runtime
function requestServerCall(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
//Predefined callback function
function jsonpCallback(data) {
alert(data.message); // Response data from the server
}
//Reference to the input field
var username = document.getElementById("username");
//Send Request to Server
function sendRequest() {
// Edit with your Web Service URL
requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
}
</script>
</body>
</html>
серверная часть PHP-кода
<?php
header("Content-Type: application/javascript");
$callback = $_GET["callback"];
$message = $_GET["message"]." you got a response from server yipeee!!!";
$jsonResponse = "{\"message\":\"" . $message . "\"}";
echo $callback . "(" . $jsonResponse . ")";
?>
потому что вы можете попросить сервер добавить префикс к возвращаемому объекту JSON. Е. Г
function_prefix(json_object);
для того, чтобы браузер eval "inline" строка JSON в качестве выражения. Этот трюк позволяет серверу "вводить" код javascript непосредственно в клиентский браузер, минуя ограничения "того же происхождения".
иными словами, вы можете иметь междоменные данные обмен.
как правило, XMLHttpRequest не разрешает междоменный обмен данными напрямую (необходимо пройти через сервер в том же домене), тогда как:
<script src="some_other_domain/some_data.js&prefix=function_prefix> ' можно получить доступ к данным из домена, отличного от исходного.
также стоит отметить: даже если сервер следует рассматривать как" доверенный", прежде чем пытаться такого рода" трюк", побочные эффекты возможного изменения формата объекта и т. д. можно сдерживать. Если function_prefix (т. е. правильная функция js) используется для получения объекта JSON, указанная функция может выполнять проверки перед принятием/дальнейшей обработкой возвращенных данных.
JSONP отлично подходит для обхода ошибок междоменных сценариев. Вы можете использовать службу JSONP исключительно с JS без необходимости реализации прокси-сервера AJAX на стороне сервера.
вы можете использовать b1t.co сервис, чтобы увидеть, как это работает. Это бесплатный сервис JSONP, который позволяет вам минимизировать ваши URL-адреса. Вот url-адрес для использования обслуживание:
http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]
например, вызов, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com
вернутся
whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});
и, таким образом, когда этот get загружается в ваш js как src, он автоматически запускает whateverJavascriptName, который вы должны реализовать в качестве обратного вызова функция:
function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}
чтобы фактически сделать вызов JSONP, вы можете сделать это несколькими способами (включая использование jQuery), но вот чистый пример JS:
function minify(urlToMinify)
{
url = escape(urlToMinify);
var s = document.createElement('script');
s.id = 'dynScript';
s.type='text/javascript';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName('head')[0].appendChild(s);
}
пошаговый пример и веб-служба jsonp для практики доступны по адресу:этот пост
простой пример использования JSONP.
клиент.HTML-код
<html>
<head>
</head>
body>
<input type="button" id="001" onclick=gO("getCompany") value="Company" />
<input type="button" id="002" onclick=gO("getPosition") value="Position"/>
<h3>
<div id="101">
</div>
</h3>
<script type="text/javascript">
var elem=document.getElementById("101");
function gO(callback){
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://localhost/test/server.php?callback='+callback;
elem.appendChild(script);
elem.removeChild(script);
}
function getCompany(data){
var message="The company you work for is "+data.company +"<img src='"+data.image+"'/ >";
elem.innerHTML=message;
}
function getPosition(data){
var message="The position you are offered is "+data.position;
elem.innerHTML=message;
}
</script>
</body>
</html>
сервер.в PHP
<?php
$callback=$_GET["callback"];
echo $callback;
if($callback=='getCompany')
$response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";
else
$response="({\"position\":\"Development Intern\"})";
echo $response;
?>
прежде чем понимать JSONP, вам нужно знать формат JSON и XML. В настоящее время наиболее часто используемым форматом данных в интернете является XML, но XML очень сложный. Это делает пользователей неудобными для обработки встроенных в веб-страницы.
чтобы JavaScript мог легко обмениваться данными, даже как программа обработки данных, мы используем формулировку в соответствии с объектами JavaScript и разработали простой формат обмена данными, который является JSON. JSON может использоваться как данные или как программа JavaScript.
JSON может быть непосредственно встроен в JavaScript, используя их, вы можете напрямую выполнить определенную программу JSON, но из-за ограничений безопасности механизм песочницы браузера отключает выполнение междоменного кода JSON.
чтобы JSON можно было передать после выполнения, мы разработали JSONP. JSONP обходит ограничения безопасности браузера с помощью функции обратного вызова JavaScript и тега .
короче говоря, это объясняет, что такое JSONP, какая проблема решает (когда его использовать).