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:

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):

Plain text

  • A HTML jelölők használata nem megengedett.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
Frissítés Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.