M06UF4Pr2: JSONP: Receptes de cuina - Historial de revisió

Joan a 13:27, 4 feb 2022

2022-02-04T13:27:29Z

Joan: /* RecipeXML i JSONP (versió 3) */

2022-02-04T13:23:33Z

RecipeXML i JSONP (versió 3)

Joan: /* RecipeXML i JSONP (versió 3) */

2022-02-04T13:17:59Z

RecipeXML i JSONP (versió 3)

Joan: /* RecipeXML i JSONP (versió 3) */

2022-02-04T13:17:17Z

RecipeXML i JSONP (versió 3)

Joan: /* RecipeXML i JSONP (versió 3) */

2022-02-04T12:51:39Z

RecipeXML i JSONP (versió 3)

Joan: /* RecipeXML i JSONP (versió 3) */

2022-02-04T12:18:07Z

RecipeXML i JSONP (versió 3)

Joan: /* RecipeXML i JSONP (versió 2) */

2022-02-04T11:25:19Z

RecipeXML i JSONP (versió 2)

Joan: /* RecipeXML i JSONP (versió 1) */

2022-02-04T11:12:28Z

RecipeXML i JSONP (versió 1)

Joan: /* RecipeXML i JSONP (versió 2) */

2022-02-04T11:09:09Z

RecipeXML i JSONP (versió 2)

Joan: /* RecipeXML i JSONP (versió 2) */

2022-02-04T11:04:33Z

RecipeXML i JSONP (versió 2)

@@ Línia 463: / Línia 463: @@
 </html>
 </pre>
 {{Autor}}, febrer 2022

@@ Línia 346: / Línia 346: @@
+                 }
+             }
-             $data[] = array('file' => $entry,'title'=> $title);
+             $data[] = array('file' => $entry,'title'=> (string)$title);
+         }
+     }
@@ Línia 381: / Línia 381: @@
 	let sel = document.getElementById("receptes")
 	for (let i=0;i<arrReceptes.length;i++) {
 		let option = document.createElement("option")
-		option.text = Object.values(arrReceptes[i].title)[0] ;
+		option.text = arrReceptes[i].title;
 		option.value = arrReceptes[i].file;
 		sel.appendChild(option);

@@ Línia 319: / Línia 319: @@
 En l'anterior versió hem vist com el script PHP ens enviava totes les ''opcions'' construïdes en format html. Això no és el més correcte. Sempre voldrem que la informació que rebem del servidor (o enviem cap al servidor) sigui ''agnòstica'' respecte la tecnologia. Per fer-ho, s'utiltizen formats com ara el JSON.
-*http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_callback_jsonp.php?callback=foo
+*http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_callback_json.php?callback=foo
 script '''list_recipes_callback_json.php''':

@@ Línia 318: / Línia 318: @@
 =RecipeXML i JSONP (versió 3)=
 En l'anterior versió hem vist com el script PHP ens enviava totes les ''opcions'' construïdes en format html. Això no és el més correcte. Sempre voldrem que la informació que rebem del servidor (o enviem cap al servidor) sigui ''agnòstica'' respecte la tecnologia. Per fer-ho, s'utiltizen formats com ara el JSON.
 script '''list_recipes_callback_json.php''':

@@ Línia 354: / Línia 354: @@
 ?>
 </pre>
 {{Autor}}, febrer 2022

@@ Línia 215: / Línia 215: @@
 Per provar-ho:
 *http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_callback.php?callback=foo
 {{Autor}}, febrer 2022

@@ Línia 38: / Línia 38: @@
 <script>
-let gloabal_url = "";
+let global_url = "";
 function loadXMLDoc_jsonp(url)
+{
-	gloabal_url = url;
+	global_url = url;
 	tempscript = document.createElement("script");
 	tempscript.type = "text/javascript";
@@ Línia 69: / Línia 69: @@
 	txt = `<h2>${titol}</h2>`;
-	txt += `<img src='recipes/img/${gloabal_url.replace('xml','png')}'/>`;
+	txt += `<img src='recipes/img/${global_url.replace('xml','png')}'/>`;
 	txt += `<h2>Capçalera</h2>`;

← Versió més antiga		Revisió del 11:09, 4 feb 2022
Línia 175:		Línia 175:

	Per tant, si podem fer la crida a aquest script en l'inici de la nostra aplicació, podem construir la nostra llista de receptes actualitzada.		Per tant, si podem fer la crida a aquest script en l'inici de la nostra aplicació, podem construir la nostra llista de receptes actualitzada.
		+
		+	Ara necessitem encapsular-ho dins d'una funció de ''callback'' amb la tècnica del jsonp:
		+
		+	script '''list_recipes_callback.php''':
		+	<pre>
		+	<?php
		+	header('content-type: text/plain; charset=utf-8');
		+	header("access-control-allow-origin: *");
		+
		+	if ($handle = opendir('recipes22/')) {
		+
		+	while (false !== ($entry = readdir($handle))) {
		+	if (strstr($entry, '.xml')) {
		+	//SimpleXML functions are part of the PHP core
		+	$xml = simplexml_load_file('recipes22/'.$entry)
		+	or die("Error: Cannot create object");
		+
		+	foreach($xml->children() as $child)
		+	{
		+	if (!strstr($child->getName(),'recipe')) {
		+	//echo $child->getName() . ": " . $child . "<br />";
		+	if ($child->getName() == "title") {
		+	$title = $child;
		+	break;
		+	}
		+	}
		+	}
		+	$data .= "<option value=\"".$entry."\">".$title."</option>";
		+	}
		+	}
		+
		+	closedir($handle);
		+	}
		+
		+	echo $_GET['callback'] . '('.json_encode($data).')';
		+	?>
		+
		+	</pre>
		+	Per provar-ho:
		+	*http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_callback.php?callback=foo

	{{Autor}}, febrer 2022		{{Autor}}, febrer 2022

← Versió més antiga		Revisió del 11:04, 4 feb 2022
Línia 138:		Línia 138:

	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.		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.
		+
		+	El següent script s'executa en el servidor (tu no hi tens accés), i llista tots els fitxers del directori ''recipes22'' i retorna totes les ''option'' de la select box (per veure-ho més clar fes Ctrl-U, ''ver código fuente'').
		+
		+	script '''list_recipes.php'''
		+	<pre>
		+	<?php
		+	header('Content-Type: text/html; charset=utf-8');
		+
		+	if ($handle = opendir('recipes22/')) {
		+
		+	/* This is the correct way to loop over the directory. */
		+	while (false !== ($entry = readdir($handle))) {
		+	if (strstr($entry, '.xml')) {
		+	//SimpleXML functions are part of the PHP core
		+	$xml = simplexml_load_file('recipes22/'.$entry)
		+	or die("Error: Cannot create object");
		+
		+	foreach($xml->children() as $child)
		+	{
		+	if (!strstr($child->getName(),'recipe')) {
		+	//echo $child->getName() . ": " . $child . "<br />";
		+	if ($child->getName() == "title") {
		+	$title = $child;
		+	break;
		+	}
		+	}
		+	}
		+	echo "<option value=\"".$entry."\">".$title."</option>\n";
		+	}
		+	}
		+
		+	closedir($handle);
		+	}
		+	?>
		+	</pre>
		+
		+	Per tant, si podem fer la crida a aquest script en l'inici de la nostra aplicació, podem construir la nostra llista de receptes actualitzada.

	{{Autor}}, febrer 2022		{{Autor}}, febrer 2022