2012-03-01 8 views
12

Czego potrzebuję po stronie serwera, aby umożliwić komuś uzyskanie danych z tego serwera przy użyciu JSONP. I co muszę zrobić również po stronie użytkownika? Chcę użyć JSONP jako alternatywy dla XMLHttpRequest.Jak skonfigurować JSONP?

Nie będzie działać z mojego rozszerzenia przeglądarki Firefox, z powodu zasad tego samego pochodzenia. Ludzie zalecali JSON, ale jestem zagubiony po wyszukaniu samouczków i przewodników po Internecie.

Dzięki za pomoc!

Odpowiedz

12

Zakładając, że twój serwer działa w PHP, wystarczy dodać żądanie "oddzwaniania" GET.

<?php header('content-type: application/json; charset=utf-8'); 
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')'; 

A po stronie klienta (przy użyciu jQuery):

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'}); 

Kod PHP powyżej jest tylko demo, nie zapomnij sanitise $ _GET [ ''] zwrotnego

Że powiedział, jeśli twój problem dotyczy tylko tej samej reguły pochodzenia, prawdopodobnie będziesz potrzebować allow cross-origin od strony serwera i wszystko powinno działać.

+0

Dziękuję bardzo! Rozwiązanie CORS naprawiło mnie. –

+0

Po prostu w dół bc ta odpowiedź zakłada php, a więc wolę T.J. Odpowiedź Crowdera poniżej. – Steven2163712

+0

@ Steven2163712 jeśli czytasz poza tytułem, problem OP jest w rzeczywistości CORS, niezależnie od języka. Podczas gdy odpowiedź TJ jest bardziej ogólna (IMO php jest dość ogólny), nie rozwiązuje problemu PO. – soemarko

7

Po stronie serwera, wszystko trzeba skonfigurować to zasób internetowej (np strona), który akceptuje żądania GET i zwraca dane stosując konwencję JSON-P, który jest:

callback({"data": "here"}); 

... gdzie nazwa funkcji ("wywołanie zwrotne" w tym przykładzie) jest zwykle pobierana z jednego z parametrów ciągu zapytania (zgodnie z konwencją, parametr "oddzwanianie"), a dane mają tekst JSON (choć technicznie może to być wszystko, co jest poprawne w obiekcie literowym JavaScript, konwencja z JSON-P polega na ograniczeniu się do tego, co jest poprawne w JSON). Tak na przykład, powiedzmy, że wniosek wyglądał następująco:

http://example.com/foo.php?callback=bar

To wywołuje stronę foo.php (nie musi być PHP, może być dowolny dynamiczny system server-side), informując go, że funkcja, którą chcemy wywołać, to "bar". Nasza odpowiedź będzie:

bar({"data": "here"}); 

Po stronie klienta, trzeba dodać element script do strony dynamicznie, a także dodawać funkcję wywołania zwrotnego, która będzie uzyskać wyzwolone przez odpowiedź JSON-P. Zwykle chcesz nadać tej funkcji jakąś przypadkową nazwę i usunąć ją, gdy skończysz.

Here's a complete example jako odpowiedź na inne pytanie tutaj na przepełnienie stosu. Być może będziesz musiał dostosować go nieco do wykorzystania w dodatku Firefox, ale koncepcje są takie same.

1

jsonp to json z opakowaniem, dzięki czemu można sfałszować zapytania ajax do innego serwera, dynamicznie wstawiając nowe znaczniki <script>, wskazując src na drugi serwer. Owijarka zasadniczo sprawia, że ​​zwrotny plik jsonp jest prawidłowym wywołaniem funkcji javascript, które można wykonać w celu wyodrębnienia standardowych danych json.

Generalnie w niebezpieczny „demo” tylko do wersji, że masz coś takiego:

function unwrap_jsonp(data) { 
    eval(data); 
} 

Zdalny serwer zwróci następujący tekst dosłowne:

unwrap_json("{'this':'is','sparta':'!'}"); 

Należy pamiętać, że jest to literalny kod jawnego kodu JavaScript, który jest wykonywany i "rozpakowuje" osadzony ciąg JSON z powrotem do macierzystej struktury danych javascript.

usługi

Większość jsonp umożliwiają określenie dodatkowych parametrów poprzez ciąg kwerendy nazwać funkcję obsługi chcesz zawinąć w odpowiedzi, na przykład

http://example.com/getjsonp.php?callback=unwrap_json