JSONP adatforrás előállítása Drupal segítségével
Mobiltelefonra készülő alkalmazások írásakor gyakran merül fel az igény arra, hogy a programunk egy távoli adatforrásból (valamilyen szerverről) olvasson be adatokat. Webes technológiák használatakor a kliens és szerver közötti adatátvilelre gyakran használják a JSON (JavaScript Object Notation) adatformátumot. Ha a weboldalunk adatokat akar lekérni a szervertől a teljes oldal újratöltése nélkül, egy ajax kéréssel JavaScript kódból megtehetjük ezt. Ha az adatforrás azonos domain alatt érhető el mint amin a weboldal fut, a JSON formátum megfelelő is lesz.
Ha viszont az adatforrásunk eltérő domain alatt található mint a futó weboldal, vagy nem weboldalról, hanem egy mobil alkalmazásból kívánjuk elérni azt, a JSON formátumra épülő adatcsere nem fog működni (biztonsági megfontolásokból JSON adatforrást csak azonos domainnév alól érünk el).
Erre kínál megoldást a JSONP (JSON with Padding) kommunikáció. Egy JSON adatlekérés a következőképpen nézhet ki:
http://valami.hu/json/adatok
A szervertől kapott válasz:
{
"Name": "Foo",
"Id": 1234,
"Rank": 7
}Ugyan ez JSONP formátumban:
http://valami.hu/json/adatok?callback=parseResponse
És a kapott válasz (amit valamilyen szerver oldali script állít elő, felhasználva a kérésben kapott callback paraméter értékét):
parseResponse({
"Name": "Foo",
"Id": 1234,
"Rank": 7
});JSONP kiszolgálása Drupal-lal
A feltelepített Drupal 7-es oldalon létrehoztam egy tartalomtípust a kívánt mezőkkel és felvettem belőle pár próba tartalmat. A JSONP tartalom előállításához a következő kiegészítő modulokra lesz szükségünk:
- Views
- Chaos tools suit (vagyis ctools, a Views modul igényli)
- Views Datasource (a JSON és JSONP típusú kimenetekhez)
A Views, Views UI, Chaos tools és Views JSON modulokat kell bekapcsolnunk.
Készítsük el a kívánt adatokat tartalmazó nézetet (view), válasszuk ki a "JSON data document" formátumot!
A nézet szerkesztésekor megjelenő előképen a következőt láthatjuk:
Ez egy szabványos JSON formátumú kimenet, látszólag megfelelő is. Ha viszont elmentjük a nézetet és megnyitjuk a hozzá tartozó url-t, a következőt kapjuk:
Egyrészt a kimenetet "magában" kellene látnunk, a szokásos smink elemek nélkül, másrészt ez még mindig csak JSON adat, nem JSONP. A megoldáshoz a nézetünk formátumának beállításait kell megvizsgálnunk (Format / Settings):
A JSONP prefix mezőhöz beírtam a callback nevet, valamint kikapcsoltam a "Views API mode" beállítást.
A nézethez beállított url végére ha beírjuk a ?callback=jsonCallback paramétert, a következő kimenetet kapjuk:
Ez már megfelelő.
Az alkalmazásunkból a következő kóddal tudjuk feldolgozni az adatokat (a konkrét alkalmazás PhoneGap segítségével, jQuery felhasználásával készült, egy remote-data id-vel rendelkező sorszámozatlan listába helyezi el az adatforrás egy-egy mezőjét):
