Per visualizzare i dati XML come parte di una pagina Web, puoi utilizzare XSLT; i browser non forniscono questa funzionalità da soli.
XML è un linguaggio utilizzato per strutturare, archiviare e scambiare dati. XSLT è un altro linguaggio che ti consente di trasformare i tuoi dati XML in altri formati, come HTML.
È possibile utilizzare XSLT per visualizzare i dati XML su una pagina Web HTML. L'utilizzo di XML e XSLT per visualizzare i dati può essere utile, in quanto consente di strutturare i dati in modo sensato per le proprie esigenze specifiche.
Come aggiungere dati di esempio a un file XML
Per visualizzare i dati XML su una pagina Web, devi prima creare il file XML e aggiungervi i dati.
- Crea un nuovo file chiamato dati.xml.
- All'interno del file XML, dichiara la codifica e la versione XML:
1.0 UTF-8?> - Collega il file XML a un file di foglio di stile XSL, che creerai in un passaggio successivo.
testo/xsl xmlstylesheet.xsl?> - Aggiungere dati al file XML. XML contiene dati strutturati e memorizza ogni punto dati in un tag separato. Questo esempio include un tag radice chiamato Giochi. Dentro il Giochi tag, memorizza ogni singolo gioco all'interno del proprio gioco etichetta. Memorizza i dati per ogni gioco come il file nome E sviluppatore in tag separati.
1.0 UTF-8?>
testo/xsl xmlstylesheet.xsl?>
<Giochi>
<gioco>
<nome>L'ultimo di noi parte IInome>
<sviluppatore>Cane cattivosviluppatore>
gioco>
<gioco>
<nome>Fantasma di Tsushimanome>
<sviluppatore>Sucker Punch Productionssviluppatore>
gioco>
<gioco>
<nome>Incagliamento della mortenome>
<sviluppatore>Kojima Productionssviluppatore>
gioco>
Giochi>
Come utilizzare XSLT per leggere i dati dal file XML
Creare un nuovo file XSL per scorrere ogni punto dati nella pagina XML e visualizzare i dati.
- Nella stessa cartella del tuo file XML, crea un nuovo file chiamato xmlstylesheet.xsl.
- All'interno del file, dichiara la versione XSL e aggiungi la struttura di tag XSL di base:
1.0 UTF-8?>
<xsl: foglio di stileversione="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Il tuo codice qui
xsl: foglio di stile> - All'interno del tag XSL principale, aggiungi a modello etichetta. Qui è dove puoi aggiungere codice HTML personalizzato per visualizzare e modellare i tuoi dati XML.
<xsl: modelloincontro="/">
<html>
<corpo>
// Il tuo codice HTML qui
corpo>
html>
xsl: modello> - All'interno del tag body, usa il xsl: per-ciascuno selettore di etichette. Questo fungerà da ciclo for per scorrere ciascuno gioco tag nidificato sotto il Giochi etichetta.
<xsl: per-ciascunoSelezionare="giochi/gioco">
xsl: per-ciascuno> - All'interno del ciclo for-each, visualizza il nome e i punti dati dello sviluppatore, utilizzando il xsl: valore di selettore di etichette.
<xsl: valore diSelezionare="nome" />
<xsl: valore diSelezionare="sviluppatore" />
Come visualizzare i dati su una pagina Web HTML
Non sarai in grado di aprire il file XSLT o XML direttamente nel browser per visualizzare i dati come parte di una pagina web. Crea un nuovo file HTML e visualizza i dati utilizzando un file iframe etichetta.
- Nella stessa cartella dei tuoi file XML e XSL, crea un nuovo file chiamato indice.html.
- Aggiungi la struttura di base di un file HTML. Se non hai mai usato l'HTML prima, puoi rispolverare concetti introduttivi HTML.
html>
<html>
<Testa>
<titolo>Esempio XML e XSLTtitolo>
Testa>
<corpo>
corpo>
html> - Dentro il corpo tag, usa un iframe tag per il collegamento al file XML e al file XSL:
<h1>Esempio XML e XSLTh1>
<P>Il seguente contenuto è generato da un file XML:P>
<iframesrc="dati.xml"xslt="xmlstylesheet.xsl">iframe> - Crea un nuovo file chiamato styles.css.
- All'interno del file, aggiungi alcuni CSS per modellare la tua pagina web. Sentiti libero di modificare il tuo CSS usando altri interessanti Suggerimenti e trucchi CSS.
HTML,
corpo {
altezza: 100%;
margine: 0;
}corpo {
display: flessibile;
giustifica-contenuto: centro;
align-items: centro;
direzione flessibile: colonna;
}P {
margine inferiore: 24px;
} - Collega il tuo file HTML allo stile CSS aggiungendo quanto segue al tag head HTML.
<collegamentorel="foglio di stile"href="stili.css"> - Apri il file HTML utilizzando un browser per visualizzare i dati XML. Alcuni browser non supportano XSLT, ma alcuni browser come Firefox sì.
Visualizza i dati nelle pagine Web HTML
Esistono molti modi per visualizzare i dati nelle pagine Web HTML, XML e XSLT sono uno di questi. Sentiti libero di esplorare gli altri modi in cui puoi farlo, come archiviare e visualizzare l'input dell'utente utilizzando JavaScript.
