W poprzednim wpisie pokazałem jak korzystać z JSONP w JQuery. Wiemy, że usługa musi rozpoznawać parametr callback i zwrócić treść w odpowiedniej formie tzn. “callback(dane)”. Załóżmy, że mamy następujący kontroler:
public class DataController : ApiController { public string[] Get() { return new[] {"Hello", "World", "!!!"}; } }
Domyślnie WebAPI nie wspiera JSONP. Możemy to potwierdzić wysyłając następujące zapytanie:
GET http://localhost:5081/api/data?callback='myfunction' HTTP/1.1 User-Agent: Fiddler Host: localhost:5081
Odpowiedź będzie wyglądać tak:
HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Type: application/json; charset=utf-8 Expires: -1 Server: Microsoft-IIS/10.0 X-AspNet-Version: 4.0.30319 X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcUGlvdHJcRG93bmxvYWRzXFNwb3RsaWdodERldmVsb3BlclRlc3RcTGltZXJpY2tcV2ViQXBwbGljYXRpb240XFdlYkFwcGxpY2F0aW9uNFxhcGlcZGF0YQ==?= X-Powered-By: ASP.NET Date: Fri, 12 Jun 2015 18:30:34 GMT Content-Length: 23 ["Hello","World","!!!"]
Widzimy, że nasz callback nie został rozpoznany.
Na szczęście możemy skorzystać z gotowego pakietu “WebApiContrib.Formatting.Jsonp”. Najpierw zatem należy zainstalować go za pomocą:
Install-Package WebApiContrib.Formatting.Jsonp
W pliku Global.asax.cs następnie wystarczy, że umieścimy:
GlobalConfiguration.Configuration.AddJsonpFormatter();
Instrukcja po prostu dodaje formater JSONP, który rozpozna przychodzące zapytania JSONP i umieści odpowiednio callback. Wysyłając teraz takie same zapytanie, serwis odpowie:
HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Type: text/javascript; charset=utf-8 Expires: -1 Server: Microsoft-IIS/10.0 X-AspNet-Version: 4.0.30319 X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcUGlvdHJcRG93bmxvYWRzXFNwb3RsaWdodERldmVsb3BlclRlc3RcTGltZXJpY2tcV2ViQXBwbGljYXRpb240XFdlYkFwcGxpY2F0aW9uNFxhcGlcZGF0YQ==?= X-Powered-By: ASP.NET Date: Fri, 12 Jun 2015 18:39:22 GMT Content-Length: 36 myfunction(["Hello","World","!!!"]);
Powyższą odpowiedź można załadować jako skrypt JavaScript i wykonać. Jeśli mamy tylko zaimplementowaną myfunction, przekazane parametry będą stanowić dane, które chcemy pobrać z serwisu.
Jeśli pominiemy parametr callback, wtedy serwis zwróci standardową odpowiedź czyli czyste dane.
Cześć,
Dlaczego używasz JSONP zamiast CORS, który jest częścią WebAPI 2 ?
Rownniez o CORS mam zamiar napisac pewnego dnia, generalnie zalezy jakie wersje przegladarek nalezy wspierac…