Diferència entre revisions de la pàgina «NF3 - XML i JSON»
(→jQuery & JSON) |
(→EXERCICIS) |
||
| (20 revisions intermèdies per 3 usuaris que no es mostren) | |||
| Línia 300: | Línia 300: | ||
</pre> | </pre> | ||
Més informació a https://www.w3schools.com/js/js_json_stringify.asp | Més informació a https://www.w3schools.com/js/js_json_stringify.asp | ||
| + | |||
| + | == PHP & JSON == | ||
| + | A PHP s'utilitzen dos funcions per manipular JSON: json_encode i json_decode. A la següent Web trobareu com utilitzar-les: http://www.php.net/manual/es/function.json-decode.php | ||
| + | |||
| + | '''LLegir i escriure Fitxer desde PHP ''' | ||
| + | |||
| + | Si volem llegir un fitxer .json haurem d'utilitzar la instrucció "file_get_contents". Les dades que obtinguis d'aquesta funció, els hauràs de guardar en una variable qualsevol | ||
| + | <source lang="php"> | ||
| + | $ json = file_get_contents ("./datos.json"); | ||
| + | </source> | ||
| + | |||
| + | Guarda información dentro de un fichero, en este caso un JSON | ||
| + | |||
| + | <source lang="php"> | ||
| + | $json_string1 = {"posicionX":250,"posicionY":100} | ||
| + | file_put_contents('./datos.json', $json_string1) | ||
| + | </source> | ||
| + | |||
| + | |||
| + | |||
| + | '''Crear un JSON desde PHP (json_encode)''' | ||
| + | |||
| + | Creem un objecte Json a partir de un array en PHP | ||
| + | |||
| + | <source lang="php"> | ||
| + | $miArray = array("manzana"=>"verde", "uva"=>"Morada", "fresa"=>"roja"); | ||
| + | print_r(json_encode($miArray)); | ||
| + | |||
| + | //resultat que mostrar {"manzana":"verde","uva":"Morada","fresa":"roja"} | ||
| + | </source> | ||
| + | |||
| + | |||
| + | '''Crear un objeto en PHP con JSON (json_decode)''' | ||
| + | |||
| + | Tenim un objecte Json y el transformen a un array de PHP | ||
| + | exemple 1 un json simple. | ||
| + | |||
| + | <source lang="php"> | ||
| + | |||
| + | <?php | ||
| + | $jsonData = '{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" }'; | ||
| + | |||
| + | $phpArray = json_decode($jsonData); | ||
| + | |||
| + | //print_r($phpArray); | ||
| + | //stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) | ||
| + | |||
| + | //en el cas de volver recorrer l'array mostraría la clau i el valor | ||
| + | foreach ($phpArray as $key => $value) { | ||
| + | echo "<p>$key | $value</p>"; | ||
| + | } | ||
| + | ?> | ||
| + | |||
| + | <php> | ||
| + | </source> | ||
| + | |||
| + | Altre exemple | ||
| + | <source lang="php"> | ||
| + | $jsonData = '[{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" },{ "usuario":"pepe", "edad":28, "comunidad":"valencia" },{ "usuario":"pep", "edad":23, "comunidad":"murcia" }]'; | ||
| + | $phpArray = json_decode($jsonData); | ||
| + | |||
| + | //print_r($phpArray); | ||
| + | /*Array ( [0] => stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) [1] => stdClass Object ( [usuario] => pepe [edad] => 28 [comunidad] => valencia ) [2] => stdClass Object ( [usuario] => pep [edad] => 23 [comunidad] => murcia ) ) Julio 30 catalunya pepe 28 valencia pep 23 murcia */ | ||
| + | |||
| + | //recorrer un array i mostrar les dades. | ||
| + | foreach($phpArray as $obj){ | ||
| + | $id_usuario = $obj->usuario; | ||
| + | $edad = $obj->edad; | ||
| + | $comunidad = $obj->comunidad; | ||
| + | echo $id_usuario." ".$edad." ".$comunidad; | ||
| + | echo ""; | ||
| + | } | ||
| + | |||
| + | |||
| + | //també podem accedir al contingut de la seguüent manera echo "$phparray[0]->usuario"; | ||
| + | </source> | ||
== jQuery & JSON == | == jQuery & JSON == | ||
| Línia 427: | Línia 503: | ||
</source> | </source> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
= XML = | = XML = | ||
| Línia 517: | Línia 528: | ||
Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP. | Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP. | ||
| − | == Creació | + | == Creació de l'Arbre XML == |
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer: | Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer: | ||
<pre> | <pre> | ||
| Línia 525: | Línia 536: | ||
</pre> | </pre> | ||
| − | == Obtenir un element | + | == Obtenir un element de l'arbre == |
Es pot utilitzar la funció ''getElementsByTagName''. Exemple: | Es pot utilitzar la funció ''getElementsByTagName''. Exemple: | ||
<pre> | <pre> | ||
| Línia 648: | Línia 659: | ||
=== EXERCICIS === | === EXERCICIS === | ||
| − | |||
| − | |||
| − | + | 1.Crea una aplicació que rep com paràmetre en un input una ciutat i després es realitza una consulta amb fetch que retorni el temps de la ciutat o que digui que no hi ha cap ciutat anomenada així. | |
| + | |||
| + | |||
| + | |||
| + | *Api d'on treurem el temps: | ||
http://neftali.clubdelphi.com/hablando-del-tiempo-openweathermap-12/ | http://neftali.clubdelphi.com/hablando-del-tiempo-openweathermap-12/ | ||
| − | http:// | + | *Exemple amb la ciutat Barcelona |
| + | http://api.openweathermap.org/data/2.5/find?&q=Barcelona,es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19" | ||
| + | |||
| + | *Exemple html on mostra les dades obtingudes: | ||
| + | <source lang="javascript"> | ||
| + | `<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br> | ||
| + | <b>Estado del cielo: </b>${estado_cielo}<br> | ||
| + | <b>Descripción: </b>${descripcion}<br> | ||
| + | <br> | ||
| + | <b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br> | ||
| + | <b>Presión: </b>${presion}<br> | ||
| + | <b>Humedad: </b>${humedad}<br> | ||
| + | <br><br><br><br><br> ` | ||
| + | </source> | ||
| + | |||
| + | Solució: | ||
| + | <source lang="javascript"> | ||
| + | <!DOCTYPE html> | ||
| + | <meta charset="UTF-8"> | ||
| + | <head> | ||
| + | <script type="text/javascript"> | ||
| + | |||
| + | window.onload=function(){ | ||
| + | |||
| + | function consulta() { | ||
| + | ciutat = document.getElementById("tecla").value; | ||
| + | if(ciutat != null){ | ||
| + | url = `http://api.openweathermap.org/data/2.5/find?&q=${ciutat},es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19` | ||
| + | |||
| + | fetch(url) | ||
| + | .then(function (response) { | ||
| + | if (response.ok) { | ||
| + | return response.text() | ||
| + | } else { | ||
| + | throw "Error a la crida Ajax"; | ||
| + | } | ||
| + | }) | ||
| + | .then(function (responseText) { | ||
| + | var myObject = JSON.parse(responseText); | ||
| + | |||
| + | if (myObject.count==0){ | ||
| + | document.getElementById('resultado').innerHTML = "La ciutat no existeix"; | ||
| + | } | ||
| + | else{ | ||
| + | dades = myObject.list[0]; | ||
| + | |||
| + | ciudad = dades.name; | ||
| + | lat = dades.coord.lat; | ||
| + | lon = dades.coord.lon; | ||
| + | temp = dades.main.temp; | ||
| + | tempmax = dades.main.temp_max; | ||
| + | tempmin = dades.main.temp_min; | ||
| + | presion = dades.main.pressure; | ||
| + | humedad = dades.main.humidity; | ||
| + | vel_viento = dades.main.temp; | ||
| + | estado_cielo = dades.weather[0].main; | ||
| + | descripcion = dades.weather[0].description; | ||
| + | |||
| + | document.getElementById('resultado').innerHTML = `<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br> | ||
| + | <b>Estado del cielo: </b>${estado_cielo}<br> | ||
| + | <b>Descripción: </b>${descripcion}<br> | ||
| + | <br> | ||
| + | <b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br> | ||
| + | <b>Presión: </b>${presion}<br> | ||
| + | <b>Humedad: </b>${humedad}<br> | ||
| + | <br><br><br><br><br> ` | ||
| + | |||
| + | } | ||
| + | }) | ||
| + | .catch(function (err) { | ||
| + | console.log(err); | ||
| + | }); | ||
| + | |||
| + | } | ||
| + | |||
| + | } | ||
| + | document.getElementById("b").onclick=consulta; | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | |||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <label>Ciudad: </label> | ||
| + | <input id="tecla" type="text" name="ciudad" /> | ||
| + | <input id="b" type="submit" name="submit" value="OK" /> | ||
| + | |||
| + | <div id="resultado"> </div> | ||
| + | </body> | ||
| + | </html> | ||
| + | </source> | ||
| + | |||
| + | <!-- | ||
1.b) Es vol retornar el json del temps al client. | 1.b) Es vol retornar el json del temps al client. | ||
:[[solucio_temps]] | :[[solucio_temps]] | ||
| − | |||
2. Tenim un fitxer Json al servidor, volem carregar aquest fitxer i treballar amb la seua informació. | 2. Tenim un fitxer Json al servidor, volem carregar aquest fitxer i treballar amb la seua informació. | ||
http://www.cristalab.com/tutoriales/leer-json-con-javascript-y-php-c104372l/ | http://www.cristalab.com/tutoriales/leer-json-con-javascript-y-php-c104372l/ | ||
| + | |||
| + | |||
| + | 3. Se desea hacer un cuadrado de 100 x 100 px que se vaya desplazando en función de las teclas que se presionen (arriba abajo derecha izquierda).... | ||
| + | |||
| + | --> | ||
Revisió de 15:03, 19 abr 2024
Contingut
JSON
JSON (JavaScript Object Notation) és un format d'intercanvi de dades lleuger. És fàcil per als éssers humans a llegir i escriure. És fàcil per a les màquines per analitzar i generar. Es basa en un subconjunt del llenguatge de programació JavaScript, estàndard ECMA-262 3rd Edition -. Desembre 1999 JSON és un format de text que és completament independent del llenguatge però utilitza convencions que són familiars per als programadors de la C-família de llenguatges, incloent C , C + +, C #, Java, JavaScript, Perl, Python, i molts altres. Aquestes propietats fan de JSON un llenguatge ideal-l'intercanvi de dades. JSON es basa en dues estructures:
- Una col·lecció de parells nom / valor. En diversos idiomes, això es realitza com un objecte, fitxa, estructura, diccionari, taula hash, llista amb clau, o una matriu associativa.
- Una llista ordenada de valors. En la majoria dels idiomes, això es realitza en forma de matriu, vector, llista o seqüència.
Es tracta d'estructures de dades universals. Pràcticament tots els llenguatges de programació moderns els donen suport d'una manera o altra. Té sentit que un format de dades que és intercanviable amb els llenguatges de programació també es basarà en aquestes estructures.
Com que utilitza la sintaxi de JSON amb JavaScript sense necessitat de programari addicional que es necessita per treballar amb JSON en JavaScript.
Exemples de Json
El principi bàsic és amb parells atribut-valor, aquests han d'estar tancats entre claus {,} que és el que defineixen l'inici i la fi de l'objecte.
Parell Nom/Valor
Generador JSON https://www.json-generator.com/
Les dades en format JSON està escrit en forma de parells nom / valor.
Un parell de nom / valor consisteix en un nom de camp (entre cometes), seguit de dos punts, seguit d'un valor:
"firstName" : "John"
Això és fàcil d'entendre, i és igual a la instrucció de JavaScript:
firstName = "John"
Valors Json:
- Un nombre (sencer o punt flotant)
- Una cadena (entre cometes)
- Booleà (cert o fals)
- Un conjunt (entre claudàtors)
- Un objecte (entre claus)
- nul
JSON Objects
Objectes JSON s'escriuen entre claus,
Els objectes poden contenir diversos parells de noms / valors:
{
"firstName": "John",
"lastName": "Doe"
}Això també és fàcil d'entendre, i és igual a les sentències de JavaScript:
firstName = "John";
lastName = "Doe";JSON Array
Arrays JSON s'escriuen entre claudàtors.
Una matriu pot contenir diversos objectes:
{
"profes": [
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]
};En l'exemple anterior, l'objecte "empleats" és una matriu que conté tres objectes. Cada objecte és un registre d'una persona (amb un nom i un cognom).
var profes=[
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]
profes[0].firstName + " " + profes[0].lastName;EXEMPLES
//Ejemplo de JSON para un objeto tipo Persona
{
"nombre":"Julio Noguera",
"edad":30,
"nacionalidad":"Española",
"altura":"182 cm",
"peso":75
}Json amb booleans, nombre, cadenes i un objecte direcció
{
"nombre":"Fulano Probencio",
"edad":27,
"nacionalidad":"Chileno",
"altura":"172 cm",
"peso":75,
"pasatiempos":["Polo","Cricket","Ski","Drafting","Gaming"],
"soltero":true,
"direccion":{
"calle":"Ave. Siempre Viva",
"numero":"123",
"pais":"México"
}
}Un array de objectes persona.
{
"personas": [
{
"nombre": "Julio Noguera",
"edad": 30,
"nacionalidad": "Española",
"altura": "182 cm",
"peso": 75,
"pasatiempos": [
"Polo",
"Cricket",
"Ski",
"Drafting",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "España"
}
},
{
"nombre": "Ramón",
"edad": 22,
"nacionalidad": "Catalana",
"altura": "178 cm",
"peso": 72,
"pasatiempos": [
"Pintar",
"Programar",
"Scuba Diving"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "Catalana"
}
},
{
"nombre": "Amiga Pepita",
"edad": 25,
"nacionalidad": "Cubana",
"altura": "167 cm",
"peso": 55,
"pasatiempos": [
"Natación",
"Alpinismo",
"Cinéfila",
"Socializar",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Cerro del Estudiante",
"numero": "456",
"pais": "Argentina"
}
}
]
}Exemple 1 :
{
"employees": [
{
"firstName": "Julio",
"lastName": "Noguera"
},
{
"firstName": "Albert",
"lastName": "Canela"
},
{
"firstName": "Alex",
"lastName": "Salinas"
}
]
}Exemple 2 :
var JSONObject={
"name": "John Johnson",
"street": "Oslo West 555",
"age": 33,
"phone": "555 1234567"
};
document.getElementById("jname").innerHTML=JSONObject.name;
document.getElementById("jage").innerHTML=JSONObject.age;
document.getElementById("jstreet").innerHTML=JSONObject.street;
document.getElementById("jphone").innerHTML=JSONObject.phone;
Validadors de json
La conversió d'un text JSON a un objecte JavaScript
NO RECOMENDADO
http://www.etnassoft.com/2011/01/05/javascript-eval-uso-y-alternativas/
Crear una cadena de JavaScript que conté la sintaxi de JSON:
var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';La sintaxi JSON és un subconjunt de la sintaxi de JavaScript, la funció eval () de JavaScript es pot utilitzar per convertir un text JSON en un objecte de JavaScript.
La funció eval () utilitza el compilador de JavaScript que analitzar el text JSON i produeix un objecte de JavaScript. El text ha de ser embolicat amb parèntesi per evitar un error de sintaxi:
var obj = eval ("(" + txt + ")");
First Name:
Last Name:
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
És més segur utilitzar un analitzador JSON per a convertir un text JSON en un objecte de JavaScript. Un analitzador JSON reconeixerà només text JSON i no compilar scripts.
En els navegadors que donen suport JSON natiu, analitzadors JSON són també més ràpid.
Suport JSON nadiu està inclòs en tots els principals navegadors i en l'últim estàndard ECMAScript (JavaScript).
JAVASCRIPT & JSON
Analitzar text JSON i convertir-lo en un objecte (JAVASCRIPT)
- Es pot fer amb la llibreria nativa de JSON per javascript (Javascript)
- la llibreria tracta una cadena de text i el transforma com a objecte JSON
var myObject = JSON.parse('{ "name": "John" }');
https://www.w3schools.com/js/js_json_parse.asp
Donat un objecte JSON converti-lo en Text
- Transforma tot el contingut de un objecte Json a string
var myJSONText = JSON.stringify(myObject);
Més informació a https://www.w3schools.com/js/js_json_stringify.asp
PHP & JSON
A PHP s'utilitzen dos funcions per manipular JSON: json_encode i json_decode. A la següent Web trobareu com utilitzar-les: http://www.php.net/manual/es/function.json-decode.php
LLegir i escriure Fitxer desde PHP
Si volem llegir un fitxer .json haurem d'utilitzar la instrucció "file_get_contents". Les dades que obtinguis d'aquesta funció, els hauràs de guardar en una variable qualsevol
$ json = file_get_contents ("./datos.json");Guarda información dentro de un fichero, en este caso un JSON
$json_string1 = {"posicionX":250,"posicionY":100}
file_put_contents('./datos.json', $json_string1)
Crear un JSON desde PHP (json_encode)
Creem un objecte Json a partir de un array en PHP
$miArray = array("manzana"=>"verde", "uva"=>"Morada", "fresa"=>"roja");
print_r(json_encode($miArray));
//resultat que mostrar {"manzana":"verde","uva":"Morada","fresa":"roja"}
Crear un objeto en PHP con JSON (json_decode)
Tenim un objecte Json y el transformen a un array de PHP exemple 1 un json simple.
<?php
$jsonData = '{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" }';
$phpArray = json_decode($jsonData);
//print_r($phpArray);
//stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya )
//en el cas de volver recorrer l'array mostraría la clau i el valor
foreach ($phpArray as $key => $value) {
echo "<p>$key | $value</p>";
}
?>
<php>Altre exemple
$jsonData = '[{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" },{ "usuario":"pepe", "edad":28, "comunidad":"valencia" },{ "usuario":"pep", "edad":23, "comunidad":"murcia" }]';
$phpArray = json_decode($jsonData);
//print_r($phpArray);
/*Array ( [0] => stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) [1] => stdClass Object ( [usuario] => pepe [edad] => 28 [comunidad] => valencia ) [2] => stdClass Object ( [usuario] => pep [edad] => 23 [comunidad] => murcia ) ) Julio 30 catalunya pepe 28 valencia pep 23 murcia */
//recorrer un array i mostrar les dades.
foreach($phpArray as $obj){
$id_usuario = $obj->usuario;
$edad = $obj->edad;
$comunidad = $obj->comunidad;
echo $id_usuario." ".$edad." ".$comunidad;
echo "";
}
//també podem accedir al contingut de la seguüent manera echo "$phparray[0]->usuario";jQuery & JSON
Analitzar text JSON i convertir-lo en un objecte (JQUERY)
- Es pot fer amb la funció Jquery.parse(): rep una cadena JSON ben formatada i retorna l'objecte JavaScript resultant. (JQuery)
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
https://api.jquery.com/jQuery.parseJSON/
LLegir dades des de un fitxer JSON (JQUERY)
Supossem que tenim un fitxer anonenat dades.json i el volem llegir amb Javascript. Fitxer dades.json :
{
"users": [
{
"firstName": "Ray",
"lastName": "Villalobos",
"joined": {
"month": "January",
"day": 12,
"year": 2012
}
},
{
"firstName": "John",
"lastName": "Jones",
"joined": {
"month": "April",
"day": 28,
"year": 2010
}
}
]
}S'utilitza la funcion getJSON de jQuery:
$.getJSON('files/data.json', function(data) {
var output="<ul>";
for (var i=0;i<data.users.length;i++) {
output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
Ens mostrará en pantalla
* Ray Villalobos--January
* John Jones--AprilEnviar un objecte JSON amb $.ajax() (JQUERY)
Exemple 1:
$.ajax({
type: "POST",
url: hb_base_url + "consumer",
contentType: "application/json",
dataType: "json",
data: JSON.stringify({
first_name: $("#namec").val(),
last_name: $("#surnamec").val(),
email: $("#emailc").val(),
mobile: $("#numberc").val(),
password: $("#passwordc").val()
}),
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
Exemple 2:
var obj = {};
obj.first_name = $("#namec").val();
obj.last_name = $("#surnamec").val();
obj.email = $("#emailc").val();
obj.mobile = $("#numberc").val();
obj.password = $("#passwordc").val();
$.ajax({
type: "POST",
url: hb_base_url + "consumer",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(obj),
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
Exemple 3:
var parametros = {
"valorCaja1" : valorCaja1,
"valorCaja2" : valorCaja2
};
$.ajax({
data: parametros,
url: 'ejemplo_ajax_proceso.php',
type: 'post',
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}
XML
En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP. Exemple de XML:
Fitxer aules.xml:
<aules>
<aula>
<nom>205</nom>
<subxarxa>172.16.205.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>filtra</estatactual>
</aula>
<aula>
<nom>206</nom>
<subxarxa>172.16.206.0</subxarxa>
<mascara>24</mascara>
<estatinicial>denega</estatinicial>
<estatactual>denega</estatactual>
</aula>
</aules>Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.
Creació de l'Arbre XML
Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:
$file = "files/aules.xml"; $xmldom = new DOMDocument(); $xmldom->load($file);
Obtenir un element de l'arbre
Es pot utilitzar la funció getElementsByTagName. Exemple:
$aules = $xmldom->getElementsByTagName("aula");
Recòrrer tots els elemens
Podem recòrrer tots els element amb un foreach:
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
$net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
$mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}
Afegir un nou element
Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte. Exemple:
$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);
//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);
//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);
//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);
//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);
//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);
//guardem
$xmldom->save($filename);
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.
Esborrar un element
Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.
//funció que esborra un node i els seus fills
function deleteNode($node) {
deleteChildren($node);
$parent = $node->parentNode;
$oldnode = $parent->removeChild($node);
}
//funció que esborra els fills d'un node
function deleteChildren($node) {
while (isset($node->firstChild)) {
deleteChildren($node->firstChild);
$node->removeChild($node->firstChild);
}
}
//funció que cerca al XML un node amb el nom=$classroomname
function delete($classroomName){
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
deleteNode($aula);
$xmldom->save($this->filename);
}
}
}Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.
Modificar un valor
Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:
function setNewClassroomAttr($classroomName, $attr, $value)
{
$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
$name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
$aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
$this->xmldom->save($this->filename);
}
}
}
Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.
Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php
Traduïr un XML a JSON
En el següent enllaç podem veure que els fitxers XML es poden traduir a sintaxi JSON. Tanmateix, quan els fitxers XML es compliquen, el seu equivalent JSON passa a ser bastant difícil de llegir i interpretar: http://www.utilities-online.info/xmltojson/#.WjqMa2fWxMw
EXERCICIS
1.Crea una aplicació que rep com paràmetre en un input una ciutat i després es realitza una consulta amb fetch que retorni el temps de la ciutat o que digui que no hi ha cap ciutat anomenada així.
- Api d'on treurem el temps:
http://neftali.clubdelphi.com/hablando-del-tiempo-openweathermap-12/
- Exemple amb la ciutat Barcelona
- Exemple html on mostra les dades obtingudes:
`<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br>
<b>Estado del cielo: </b>${estado_cielo}<br>
<b>Descripción: </b>${descripcion}<br>
<br>
<b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br>
<b>Presión: </b>${presion}<br>
<b>Humedad: </b>${humedad}<br>
<br><br><br><br><br> `Solució:
<!DOCTYPE html>
<meta charset="UTF-8">
<head>
<script type="text/javascript">
window.onload=function(){
function consulta() {
ciutat = document.getElementById("tecla").value;
if(ciutat != null){
url = `http://api.openweathermap.org/data/2.5/find?&q=${ciutat},es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19`
fetch(url)
.then(function (response) {
if (response.ok) {
return response.text()
} else {
throw "Error a la crida Ajax";
}
})
.then(function (responseText) {
var myObject = JSON.parse(responseText);
if (myObject.count==0){
document.getElementById('resultado').innerHTML = "La ciutat no existeix";
}
else{
dades = myObject.list[0];
ciudad = dades.name;
lat = dades.coord.lat;
lon = dades.coord.lon;
temp = dades.main.temp;
tempmax = dades.main.temp_max;
tempmin = dades.main.temp_min;
presion = dades.main.pressure;
humedad = dades.main.humidity;
vel_viento = dades.main.temp;
estado_cielo = dades.weather[0].main;
descripcion = dades.weather[0].description;
document.getElementById('resultado').innerHTML = `<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br>
<b>Estado del cielo: </b>${estado_cielo}<br>
<b>Descripción: </b>${descripcion}<br>
<br>
<b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br>
<b>Presión: </b>${presion}<br>
<b>Humedad: </b>${humedad}<br>
<br><br><br><br><br> `
}
})
.catch(function (err) {
console.log(err);
});
}
}
document.getElementById("b").onclick=consulta;
}
</script>
</head>
<body>
<label>Ciudad: </label>
<input id="tecla" type="text" name="ciudad" />
<input id="b" type="submit" name="submit" value="OK" />
<div id="resultado"> </div>
</body>
</html>
