Diferència entre revisions de la pàgina «M06UF4Pr2: JSONP: Receptes de cuina»
Salta a la navegació
Salta a la cerca
| Línia 58: | Línia 58: | ||
xmlDoc = parser.parseFromString(data,"text/xml"); | xmlDoc = parser.parseFromString(data,"text/xml"); | ||
| − | + | let titol = (xmlDoc.getElementsByTagName("title")[0]) ? xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue : ""; | |
| − | + | let blurb = (xmlDoc.getElementsByTagName("blurb")[0]) ? xmlDoc.getElementsByTagName("blurb")[0].firstChild.nodeValue : ""; | |
| − | + | let genre = (xmlDoc.getElementsByTagName("genre")[0]) ? xmlDoc.getElementsByTagName("genre")[0].firstChild.nodeValue : ""; | |
| − | + | let author = (xmlDoc.getElementsByTagName("author")[0]) ? xmlDoc.getElementsByTagName("author")[0].firstChild.nodeValue : ""; | |
| − | + | let yield = (xmlDoc.getElementsByTagName("yield")[0]) ? xmlDoc.getElementsByTagName("yield")[0].firstChild.nodeValue : ""; | |
| − | + | let preptime = (xmlDoc.getElementsByTagName("preptime")[0]) ? xmlDoc.getElementsByTagName("preptime")[0].firstChild.nodeValue : ""; | |
| − | + | let preparation = (xmlDoc.getElementsByTagName("preparation")[0]) ? xmlDoc.getElementsByTagName("preparation")[0].firstChild.nodeValue.replace(/\\n/g,'<br />') : ""; | |
| − | + | let serving = (xmlDoc.getElementsByTagName("serving")[0]) ? xmlDoc.getElementsByTagName("serving")[0].firstChild.nodeValue : ""; | |
| − | + | txt = `<h2>${titol}</h2>`; | |
| − | |||
| − | |||
| − | + | txt += `<img src='recipes/img/${gloabal_url.replace('xml','png')}'/>`; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | txt += `<h2>Capçalera</h2>`; | |
| − | + | txt += `<ul>`; | |
| + | txt += `<li>${blurb}</li>`; | ||
| + | txt += `<li>${genre}</li>`; | ||
| + | txt += `<li>${author}</li>`; | ||
| + | txt += `<li>${yield}</li>`; | ||
| + | txt += `<li>${preptime}</li>`; | ||
| + | txt += `</ul>`; | ||
| + | |||
| + | txt += `<h2>Ingredients</h2>`; | ||
| + | txt += `<ul>`; | ||
x=xmlDoc.getElementsByTagName("ingredient"); | x=xmlDoc.getElementsByTagName("ingredient"); | ||
for (let i=0;i<x.length;i++) { | for (let i=0;i<x.length;i++) { | ||
| − | |||
txt +=`<li>${x[i].firstChild.nodeValue}</li>`; | txt +=`<li>${x[i].firstChild.nodeValue}</li>`; | ||
} | } | ||
| − | + | txt += `</ul>`; | |
| − | + | txt += `<h2>Preparation</h2>`; | |
| − | + | txt += preparation; | |
| − | + | txt += `<h2>Serving</h2>`; | |
| − | + | txt += serving; | |
| − | + | document.getElementById('info').innerHTML=txt; | |
} | } | ||
| Línia 134: | Línia 133: | ||
</html> | </html> | ||
</pre> | </pre> | ||
| + | |||
=RecipeXML i JSONP (versió 2)= | =RecipeXML i JSONP (versió 2)= | ||
Què podem millorar de la versió 1? Si ens fixem, totes les receptes estan ''hardcoded'' dins de la select. Això vol dir que si pugem una nova recepta al servidor (via FTP, per ex), haurem d'actualitzar tota aquesta llista d'opcions. | Què podem millorar de la versió 1? Si ens fixem, totes les receptes estan ''hardcoded'' dins de la select. Això vol dir que si pugem una nova recepta al servidor (via FTP, per ex), haurem d'actualitzar tota aquesta llista d'opcions. | ||
Revisió del 10:38, 4 feb 2022
RecipeXML i JSONP (versió 1)
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.
Això és el que farem en aquesta pràctica.
La idea que s'ha comentat a classe és tenir un repositori amb tots els fitxers XML de receptes que han generat els alumnes. Aquest repositori és a:
En el servidor s'executa un script PHP que llegeix el fitxer xml. Per exemple:
- http://joanqc.no-ip.biz/iesbalmes/wec/receptes/read_xml_recipe.php?callback=foo&url=corn-chowder.xml
script read_xml_recipe.php:
<?php
//header('content-type: application/json; charset=utf-8');
header('content-type: text/plain; charset=utf-8'); //millor
header("access-control-allow-origin: *");
$url = $_GET['url'];
$xmlrecipe = file_get_contents('recipes22/'.$url);
echo $_GET['callback'] . '('.json_encode($xmlrecipe).')';
//echo $_GET['callback'] . '('.$xmlrecipe.')'; //així no!
?>
I des el domini local (localhost o qualsevol altre domini diferent de joanqc.no-ip.biz), podem accedir a aquests fitxers XML amb la tècnica JSONP, i parsejar-los.
script recpetes_jsonp_v1.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=utf-8" />
<title>Receptes AJAX (JSONP)</title>
<script>
let gloabal_url = "";
function loadXMLDoc_jsonp(url)
{
gloabal_url = url;
tempscript = document.createElement("script");
tempscript.type = "text/javascript";
tempscript.id = "tempscript";
tempscript.src = "http://joanqc.no-ip.biz/iesbalmes/wec/receptes/read_xml_recipe.php?callback=JSONPHandler&url="+url;
document.body.appendChild(tempscript);
}
function JSONPHandler(data) {
//console.log(data);
//hem de parsejar el document XML que tenim a data
//http://www.w3schools.com/xml/xml_parser.asp
parser = new DOMParser();
xmlDoc = parser.parseFromString(data,"text/xml");
let titol = (xmlDoc.getElementsByTagName("title")[0]) ? xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue : "";
let blurb = (xmlDoc.getElementsByTagName("blurb")[0]) ? xmlDoc.getElementsByTagName("blurb")[0].firstChild.nodeValue : "";
let genre = (xmlDoc.getElementsByTagName("genre")[0]) ? xmlDoc.getElementsByTagName("genre")[0].firstChild.nodeValue : "";
let author = (xmlDoc.getElementsByTagName("author")[0]) ? xmlDoc.getElementsByTagName("author")[0].firstChild.nodeValue : "";
let yield = (xmlDoc.getElementsByTagName("yield")[0]) ? xmlDoc.getElementsByTagName("yield")[0].firstChild.nodeValue : "";
let preptime = (xmlDoc.getElementsByTagName("preptime")[0]) ? xmlDoc.getElementsByTagName("preptime")[0].firstChild.nodeValue : "";
let preparation = (xmlDoc.getElementsByTagName("preparation")[0]) ? xmlDoc.getElementsByTagName("preparation")[0].firstChild.nodeValue.replace(/\\n/g,'<br />') : "";
let serving = (xmlDoc.getElementsByTagName("serving")[0]) ? xmlDoc.getElementsByTagName("serving")[0].firstChild.nodeValue : "";
txt = `<h2>${titol}</h2>`;
txt += `<img src='recipes/img/${gloabal_url.replace('xml','png')}'/>`;
txt += `<h2>Capçalera</h2>`;
txt += `<ul>`;
txt += `<li>${blurb}</li>`;
txt += `<li>${genre}</li>`;
txt += `<li>${author}</li>`;
txt += `<li>${yield}</li>`;
txt += `<li>${preptime}</li>`;
txt += `</ul>`;
txt += `<h2>Ingredients</h2>`;
txt += `<ul>`;
x=xmlDoc.getElementsByTagName("ingredient");
for (let i=0;i<x.length;i++) {
txt +=`<li>${x[i].firstChild.nodeValue}</li>`;
}
txt += `</ul>`;
txt += `<h2>Preparation</h2>`;
txt += preparation;
txt += `<h2>Serving</h2>`;
txt += serving;
document.getElementById('info').innerHTML=txt;
}
</script>
</head>
<body>
<h1>Receptes (JSONP)</h1>
Les receptes estan en un repositori remot:
<ul><li><a href="http://joanqc.no-ip.biz/iesbalmes/wec/receptes/recipes22/">http://joanqc.no-ip.biz/iesbalmes/wec/receptes/recipes22/</a></li></ul>
<div id="formulari">
<form name="frm_receptes" id="formu" action="#">
<select name="recipes" onchange="loadXMLDoc_jsonp(this.value)">
<option value="bean-and-ham.xml">bean and ham</option>
<option value="corn-chowder.xml">corn chowder</option>
<option value="macarrons_de_la_parenta.xml">macarrons_de_la_parenta</option>
<option value="conill_farcit_catalana.xml">conill_farcit_catalana</option>
<option value="croquetes_levon_gukasyan.xml">croquetes_levon_gukasyan</option>
<option value="khash_levon_gukasyan.xml">khash_levon_gukasyan</option>
<option value="espaguetisBolonyesa.xml">espaguetisBolonyesa</option>
<option value="truitaPatates.xml">truitaPatates</option>
<option value="bolitas_rellenas_de_queso_Laura.xml">bolitas_rellenas_de_queso_Laura</option>
<option value="espaguetis_carbonara_Laura.xml">espaguetis_carbonara_Laura</option>
<option value="bunuelos.xml">bunuelos</option>
<option value="pollo.xml">pollo</option>
<option value="ous_de_guatlla_amb_bacon.xml">Ous de guatlla amb bacon</option>
<option value="carpaccio_de_peu_de_porc.xml">Carpaccio de peu de porc</option>
<option value="mandonguilles_de_sipia_i_marisc.xml">Mandonguilles de sípia i marisc</option>
<option value="pollastre_amb_salsifis.xml">Pollastre amb salsifís</option>
<option value="silpancho.xml">Silpancho</option>
<option value="charque.xml">Charque</option>
</select>
</form>
</div>
<div id="info">
</div>
</body>
</html>
RecipeXML i JSONP (versió 2)
Què podem millorar de la versió 1? Si ens fixem, totes les receptes estan hardcoded dins de la select. Això vol dir que si pugem una nova recepta al servidor (via FTP, per ex), haurem d'actualitzar tota aquesta llista d'opcions.
L'objectiu de la versió 2 és que tinguem totes les opcions de les receptes generades de forma dinàmica. I això ho haurem de fer a l'inici de l'aplicació fent una consulta AJAX per saber què hi ha a dins de la carpeta de receptes.
creat per Joan Quintana Compte, febrer 2022
