NF3 - XML i JSON

De wikiserver
La revisió el 19:17, 30 abr 2014 per Asalinas (Discussió | contribucions) (→‎Creació del Arbre XML)
Dreceres ràpides: navegació, cerca

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.


Exemple 1 : 

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

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;

Parell Nom/Valor

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: 

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

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 employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }
]

employees[0].firstName + " " + employees[0].lastName;

La conversió d'un text JSON a un objecte JavaScript

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 + ")");

<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 

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

jQuery & JSON

Analitzar text JSON i convertir-lo en un objecte

  • Es pot fer amb la funció Jquery.parse(): rep una cadena JSON ben formatada i retorna l'objecte JavaScript resultant.
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

https://api.jquery.com/jQuery.parseJSON/

  • Es pot fer amb la llibreria nativa de JSON per javascript
var myObject = JSON.parse('{ "name": "John" }');

http://www.json.org/js.html

Donat un objecte JSON converti-lo en Text

  • Es pot fer amb la llibreria nativa de JSON:
var myJSONText = JSON.stringify(myObject);

Més informació a http://www.json.org/js.html

LLegir dades des de un fitxer JSON

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 in data.users) {
            output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
        }

        output+="</ul>";
        document.getElementById("placeholder").innerHTML=output;
  });

Enviar un objecte JSON amb $.ajax()

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);
        }
    });

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

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ó del 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 del 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 = $this->xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("aula");
$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.tutorialswitch.com/web-development/quick-and-simple-ajax-forms-with-json-responses/

Obtingut de «http://wikiserver.infomerce.es/index.php?title=NF3_-_XML_i_JSON&oldid=1568»