JSONP: JSON with Padding - Historial de revisió

Joan: /* Exemple: Recuperar informació JSON en un servidor (llista d'insectes) */

2022-02-01T17:51:40Z

Exemple: Recuperar informació JSON en un servidor (llista d'insectes)

Joan: /* Exemple: Recuperar informació JSON en un servidor (llista d'insectes) */

2022-02-01T17:50:28Z

Exemple: Recuperar informació JSON en un servidor (llista d'insectes)

Joan: /* Exemple: Recuperar informació JSON en un servidor (llista d'insectes) */

2022-02-01T17:41:50Z

Exemple: Recuperar informació JSON en un servidor (llista d'insectes)

Joan: /* Desenvolupament */

2022-02-01T17:38:20Z

Desenvolupament

Joan: /* RecipeXML i JSONP */

2022-02-01T15:22:40Z

RecipeXML i JSONP

Joan: /* Exercici: conversió euro-dòlar (NO funciona) */

2022-02-01T15:20:47Z

Exercici: conversió euro-dòlar (NO funciona)

Joan: /* Exercici: conversió euro-dòlar */

2022-02-01T15:20:06Z

Exercici: conversió euro-dòlar

Joan: /* Servei Web Temperatura de Barcelona (projecte d'electrònica) */

2022-02-01T15:19:27Z

Servei Web Temperatura de Barcelona (projecte d'electrònica)

Joan: /* Exemple: Recuperar informació JSON en un servidor (llista d'insectes) */

2022-02-01T15:18:31Z

Exemple: Recuperar informació JSON en un servidor (llista d'insectes)

Joan: /* Exemple: crida bàsica */

2022-02-01T15:00:55Z

Exemple: crida bàsica

@@ Línia 240: / Línia 240: @@
 </html>
 </pre>
 '''NOTA''': la funció ''eval()'' avalua la cadena de text (que té format json) i com que té format JSON ho tracta com a objecte JSON. En aquest cas, si no posem ''eval()'' l'avaluació també es fa de forma correcta.
 *https://stackoverflow.com/questions/11523815/is-eval-non-mandatory-in-parsing-json-objects
 En aquest cas concret no tenim cap objecte JSON. Rebem una cadena de text i obtenim un objecte javascript. Per tant, no hi ha objecte JSON. (si tinguéssim objecte JSON el que s'ha de fer és ''JSON.parse'' (ja ho veurem).
 ==Exercici: open data. Dades obertes de l'Àrea Metropolitana de Barcelona==

@@ Línia 240: / Línia 240: @@
 </html>
 </pre>
 De fet, estem oferint un ''servei web públic'' per tal de què gent externa pugui utilitzar la informació del domini ''http://joanqc.no-ip.biz''. Això és el que intentarem fer en la següent pràctica: accedir a les receptes de cuina que estaran allotjades en un repositori públic.

@@ Línia 176: / Línia 176: @@
 De l'estudi pormenoritzat d'aquest codi en podem aprendre moltes coses. Fixa't com es crea un script ''al vuelo'' i s'executa en l'event de clicar el botó. I com s'executa la funció de ''callback'' que al final ens omple en el texarea la informació que ens interessa.
 ==Exemple: Recuperar informació JSON en un servidor (llista d'insectes)==
-Disposem en un servidor remot d'una llista dels insectes en format JSON. El script PHP retorna la informació com a funció de ''callback'':
+Disposem en un servidor remot d'una llista dels insectes en format JSON. El script PHP retorna la informació com a funció de ''callback''.
-'''insectes_jsonp_curt.php''':
+'''insectes_jsonp.php''':
 <pre>
 <?php
@@ Línia 200: / Línia 188: @@
 Podem accedir al script php, que veiem com retorna un objece ''json'':
 *http://joanqc.no-ip.biz/iesbalmes/wec/insectes_jsonp.php
 Podem recuperar la informació remota des d'un recurs local o d'un altre domini: (aquí has de posar la teva ruta en el teu servidor web)
 *http://localhost/M06/UF4/JSONP/llista_insectes.html
 '''llista_insectes.html'''
 <pre>

@@ Línia 17: / Línia 17: @@
 Introduir un nou objecte javascript object des del servidor es pot fer de moltes maneres, però la pràctica més comuna per al servidor és implementar l'execució d'una funció de ''callback'', amb l'objecte que volem obtenir com a argument d'aquest script. The callback function is just a function you have already set up on the client which the script you load calls at the point the script loads to process the data passed in to it.
-=Desenvolupament=
+=Teoria JSONP=
 ==Exemple: crida bàsica==
 *http://www.geekality.net/2010/06/27/php-how-to-easily-provide-json-and-jsonp/

@@ Línia 260: / Línia 260: @@
 ==RecipeXML i JSONP==
-La idea que s'ha comentat a classe és tenir un repositori amb tots els fitxers XML de receptes que van generant els alumnes. Aquest repositori estarà a:
+Al començament de la UF, quan volíem accedir als fitxers XML que estan en un repositori comú i públic, vam tenir problemes degut a la política de domini únic. Ara que ja coneixem JSONP, estem en condicions de poder subsanar aquest problema.
-*http://joanqc.no-ip.biz/iesbalmes/wec/receptes/read_xml_recipe.php?callback=foo&url=corn-chowder.xml
+Això és el que farem en la pràctica corresponent.
-echo $_GET['callback'] . '('.json_encode($xmlrecipe).')';
+{{Autor}}, febrer 2022

@@ Línia 250: / Línia 250: @@
 De fet, estem oferint un ''servei web públic'' per tal de què gent externa pugui utilitzar la informació del domini ''http://joanqc.no-ip.biz''. Això és el que intentarem fer en la següent pràctica: accedir a les receptes de cuina que estaran allotjades en un repositori públic.
-==Exercici: conversió euro-dòlar==
+==Exercici: conversió euro-dòlar (NO funciona)==
 Tenim una url que ens dóna la conversió actual entre euro i dòlar, en format JSON:
 *http://fixer.io/

@@ Línia 318: / Línia 318: @@
 *http://opendata.amb.cat/equipaments/search?subambit=parcs&callback=foo
 ==RecipeXML i JSONP==
 Al començament de la UF, quan volíem accedir als fitxers XML que estan en un repositori comú, vam tenir problemes degut a la política de domini únic (http://localhost/M06b/receptes/index2.html). Ara que ja coneixem JSONP, estem en condicions de poder subsanar aquest problema.

@@ Línia 194: / Línia 194: @@
 <?php
 $callback = $_GET['callback'];
-$data = "{\"insectes\": [{ \"genere\":\"Acherontia\" , \"especie\":\"atropos\" },{ \"genere\":\"Acmaeodera\" , \"especie\":\"rubr
+$data = "{\"insectes\": [{ \"genere\":\"Acherontia\" , \"especie\":\"atropos\" },{ \"genere\":\"Onychogomphus\" , \"especie\":\"forcipatus\" }]}";
 echo $callback.'('.$data.')';
 ?>
 </pre>
-Podem recuperar la informació remota des d'un recurs local o d'un altre domini:
+Podem recuperar la informació remota des d'un recurs local o d'un altre domini: (aquí has de posar la teva ruta en el teu servidor web)
-*file:///home/joan/M06_WEC_1516/UF4/jsonp/llista_insectes.html
+*http://localhost/M06/UF4/JSONP/llista_insectes.html
 '''llista_insectes.html'''
 <pre>
@@ Línia 211: / Línia 213: @@
 <h1>Crida bàsica JSONP. Llista d'insectes</h1>
    <div id="info"></div>
@@ Línia 224: / Línia 220: @@
      var button = document.getElementById("button");
      var tempscript;
-     function startFetch(url) {
+     function startFetch() {
-       if (url!="") {
+       tempscript = document.createElement("script");
-        tempscript = document.createElement("script");
+      tempscript.type = "text/javascript";
-        tempscript.type = "text/javascript";
+      tempscript.id = "tempscript";
-        tempscript.id = "tempscript";
+      tempscript.src = "http://joanqc.no-ip.biz/iesbalmes/wec/insectes_jsonp.php?callback=JSONPHandler";
-        tempscript.src = "http://arthropoda.joanillo.org/"+url+"?callback=JSONPHandler";
+      document.body.appendChild(tempscript);
+     }
      function JSONPHandler(data) {
-       //alert(data);
+       console.log(data);
        var jsondata=eval( data );
        var vinsectes=jsondata.insectes;
@@ Línia 255: / Línia 248: @@
 </html>
 </pre>
-De fet, estem oferint un ''servei web públic'' per tal de què gent externa pugui utilitzar la informació del domini ''arthropoda.joanillo.org''. Això és el que intentarem fer en la següent pràctica: un servei web per accedir a la temperatura de la ciutat de Barcelona.
+De fet, estem oferint un ''servei web públic'' per tal de què gent externa pugui utilitzar la informació del domini ''http://joanqc.no-ip.biz''. Això és el que intentarem fer en la següent pràctica: accedir a les receptes de cuina que estaran allotjades en un repositori públic.
 ==Exercici: conversió euro-dòlar==
 Tenim una url que ens dóna la conversió actual entre euro i dòlar, en format JSON:

@@ Línia 33: / Línia 33: @@
 </pre>
 Aquest és el script bàsic que retorna una crida JSON. Aquest és el script remot (en aquest cas ''joanillo.org'', al qual l'alumne no hi té accés). Per veure com funciona, podem fer:
-*http://arthropoda.joanillo.org/prova_jsonp.php
+*http://joanqc.no-ip.biz/iesbalmes/wec/prova_json.php
 <pre>
 ([1,2,3,4,5,6,7,8,9])
 </pre>
-*http://arthropoda.joanillo.org/prova_jsonp.php?callback=foo
+*http://joanqc.no-ip.biz/iesbalmes/wec/prova_json.php?callback=foo
 <pre>
 foo([1,2,3,4,5,6,7,8,9])
@@ Línia 66: / Línia 66: @@
        tempscript.type = "text/javascript";
        tempscript.id = "tempscript";
-       tempscript.src = "http://arthropoda.joanillo.org/prova_jsonp.php?callback=JSONPHandler";
+       tempscript.src = "http://joanqc.no-ip.biz/iesbalmes/wec/prova_json.php?callback=JSONPHandler";
        document.body.appendChild(tempscript);
+     }
@@ Línia 80: / Línia 80: @@
 </html>
 </pre>
-Aquest script cerca les dades JSON en el servidor, que són retornades en forma de funció de callback, que és una funció que es processa en el cantó del client. És d'aquesta manera que aconseguim rebre dades d'un servidor remot.
+Aquest script cerca les dades JSON en el servidor, que són retornades en forma de funció de ''callback'', que és una funció que es processa en el cantó del client. És d'aquesta manera que aconseguim rebre dades d'un servidor remot.
-file:///home/joan/M06_WEC_1516/UF4/jsonp/prova_jsonp.html (has de ficar la teva ruta)
+*http://localhost/M06/UF4/JSONP/prova_jsonp.html (has de posar la teva ruta en el teu servidor web local)
 ==Exemple: agafar informació aleatòria de la wikipèdia==