JSONP я делаю это правильно? - PullRequest
Новая
       1

JSONP я делаю это правильно?

1 голос
/ 21 ноября 2011

У меня есть это в моем основном сценарии ... 

(function(d){
    var shortURLjs, id = 'shortUrl'; 
    if (d.getElementById(id)) {return;}
    shortURLjs = d.createElement('script'); 
    shortURLjs.id = id; 
    shortURLjs.async = true;
    shortURLjs.src = "http://site.com/test.js";
    d.getElementsByTagName('body')[0].appendChild(shortURLjs);
}(document));

А в test.js у меня есть ... 

shortURL = { "firstName": "John", "lastName" : "Smith"};

Но когда я пытаюсь получить доступ к shortURL из скрипта, который включал файл test.js после того, как я его добавил, он не определяется.

Я немного растерялся.

Ответы [ 2 ]

1 голос
/ 21 ноября 2011

Ваша основная функция должна вызывать что-то вроде, которое будет добавлено в качестве тега скрипта к вашей голове: 

<script src="http://www.mydomain.com/file.php?callback=JSONP_callback"></script>

callback=JSONP_callback, означает, что JSONP_callback будет вызываться в JavaScript, который возвращает результат. Таким образом, ваш сервер знает, какую функцию вызывать, чтобы показать результат. И на вашей главной странице вы должны определить ту функцию, которая обрабатывает данные. 

function JSONP_callback(response)
{
    alert(response.name);
}

Затем, когда вы запускаете php или любой другой сценарий, который вы используете, вы должны вызывать функцию из вашего обратного вызова, это может быть что угодно, пока Javascript распознает это: 

// Within PHP it looks like:
echo $_GET['callback'] . "(" . json_encode(array( "name" => "Niels")) . ")";

// Which results in:
JSONP_callback({ name : "Niels" });

В результате получается имя этой функции, потому что мы вызвали страницу с параметром callback=JSONP_callback. И поскольку мы определили function JSONP_callback(result) на нашей главной странице, скрипт выполнит эту функцию с заданными данными.

Несколько месяцев назад мне пришлось исследовать это для школы, демонстрацию, которую я сделал, может быть, вы можете использовать это как-нибудь: http://lutrasoft.nl/school/JSONP.html

0 голосов
/ 21 ноября 2011

Проблема заключается в том, что тег сценария загружается асинхронно, поэтому вместо таких операций, как 

insert tag
set shortURL
use shortURL
//your script finishes

, вставленный сценарий может запускаться только после того, как вы закончите 

insert tag
use shortURL //oops!
//your script finishes
set shortURL

.Хитрость в JSONP заключается в том, что вместо возврата простых данных мы возвращаем то, что выглядит как вызов функции 

//instead of setting a variable like "shortUrl = ..."
// we instead call a function:
on_have_shortUrl({"first_name":...});

, поэтому все, что вам нужно сделать, - это заранее подготовить функцию on_have_shortUrl 

function on_have_shortUrl(shortURL){ use shortURL here}
insert script tag
inserted script calls your function passing the data to it

В ответе Niel более подробно рассказывается о том, как «протокол» JSONP позволяет вам выбирать разные имена для функции обратного вызова и тому подобное.

...