Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- cordova [2025/11/06 18:57]
enric_mieza_sanchez [Inicialitzacions Cordova]
+++ cordova [2025/12/04 17:52] (actual)
enric_mieza_sanchez [AJAX amb jQuery]
@@ Línia 178: / Línia 178: @@
 ==== Inicialitzacions HTML ====
 Abans d'executar codi JavaScript sol convenir esperar a que estigui carregat tot el document. Tenim 2 estratègies bàsiques:
   - Posar el tag ''<script src=...'' al final del document HTML.
-  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<tabbox jQuery>Estil jQuery amb la funció ''ready'':<code javascript>
+  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<tabbox jQuery>
+Estil jQuery amb la funció ''ready'':
+<code javascript>
 $(document).ready( function ()  {
     // inicialitzar: assignar events
@@ Línia 275: / Línia 278: @@
 </WRAP>
-==== AJAX amb jQuery ====
+==== Exemple AJAX amb API Musicbrainz.org ====
 Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem [[http://api.jquery.com/jquery.ajax/|AJAX amb jQuery]] que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org :
+<tabbox JavaScript>
+<code javascript>
+fetch('https://musicbrainz.org/ws/2/artist?query=queen&fmt=json')
+  .then(response => {
+      if (!response.ok) {
+          throw new Error('Error de xarxa.');
+      }
+      return response.json();
+  })
+  .then(data => {
+    // iterem pels diversos elements de l'array artists
+    for( const artist of data.artists ) {
+      console.log(`${artist.name} (${artist.disambiguation}`)
+      // pintar l'HTML necessari...
+    }
+  })
+  .catch(error => {
+    console.error('Error en obtenir les notícies:', error);
+  });
+</code>
+<tabbox jQuery>
 <code javascript>
 $.ajax({
@@ Línia 283: / Línia 307: @@
   url: "https://musicbrainz.org/ws/2/artist?query=queen",
   dataType: "json",   // necessitem això pq ens retorni un objecte JSON
-}).done(function (msg) {
+}).done(function (data) {
-  for(let item in msg.artists) {
+  for(let item in data.artists) {
-    console.log(msg.artists[item]);
+    var artista = data.aritsts[item].name;
-    // aquí caldría fer mes coses, of course...
+    var descripcio = data.aritsts[item].disambiguation;
+    console.log(`${artista} (${descripcio}`)
+    // aquí caldria pintar l'HTML necessari
     // ...
   };
@@ Línia 293: / Línia 319: @@
 });
 </code>
+</tabbox>
 Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat.

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina