私は、サイト上でフロントエンド要素を作成するバックエンド プログラマーです。
外部 XML ファイルから 2 つのデータ ポイントだけを取得し、両方をサイトの既存の HTML 内に配置し、数分ごとに更新するだけです。
XML ツリーは大きく、いくつかの親要素があります。必要な子要素は最初の親要素「Main-Library」から 2 つだけです。
XML は次のようになります。最初の 2 つの親の最初の子だけが表示されるように圧縮しました。
<Root>
<Main-Library>
<Book>
<Title>Book Name</Title>
<Author>John Smith</Author>
<Genre>Fiction</Genre>
<Loaned>2020-09-03 13:13:48</Loaned>
<Price>-13.30</Price>
</Book>
.
.
.
</Main-Library>
<Second-Library>
<Book>
<Title>Book Name</Title>
<Author>John Smith</Author>
<Genre>Fiction</Genre>
<Loaned>2020-09-03 13:13:48</Loaned>
<Price>-13.30</Price>
</Book>
.
.
.
</Second-Library>
</Root>
最初の親要素 Main-Library から Loaned と Price を取得し、次の HTML 内に配置する必要があります。
<p class="feed">
<span class="feed-text-large">Status: </span>
<span class="price">.98</span>
<span class="timestamp">Loaned at 13:13 on September 03, 2020</span>
</p>
価格と日付は XML から取得され、XML が変更されると更新されます。
この Wi を始めるにあたっての助けがあれば教えてください大変感謝いたします。ありがとう！
XML の構造が決して変更されないと仮定すると、少量の JavaScript を含む XSLT ファイルを使用してページを時々更新してみることができます。
– タイソン T.
2020 年 9 月 3 日 22:11
「XML の変更に応じて更新」それは挑戦になるだろう。そうする必要がありますファイルをポーリングして、変更されているかどうかを確認します。 ETag を使用するとそれを軽減できますが、それ自体が全体のトピックです...
– 異端の猿
2020 年 9 月 3 日 22:33
重複として引用された質問には、定期的な更新の要件が含まれていないため、これを再度公開しました。これは、適切なアプローチを選択するための鍵であると考えられます。
– マイケル ケイ
2020 年 9 月 4 日 8:38
@MichaelKay 回答がある質問に対してゴールド バッジを使用して質問を再開することは、礼儀の限界を押し広げることになります... 言うまでもなく、そうすることで会社の製品を宣伝することになります。
– 異端の猿
2020 年 9 月 4 日 11:46
申し訳ありませんが、私はバッジなどにはあまり注目していないので、特別な権限が必要とは知りませんでした。私はちょうどそれを感じました引用された重複した質問には存在しない重要な側面が質問にあったため、それは間違いでした。それが私の製品であるかどうかについては、それが私の製品であるかどうかに関係なく、OP が有益であると判断してくれることを期待して、問題が発生した場合に使用する解決策を質問に答えます。
– マイケル ケイ
2020 年 9 月 4 日 15:37
------------------------
まず第一に、JSON は使用できますか? 「はい」の場合は、進んで、データが JSON でどのように表示されるかを示してください。
実行する手順:
データを取得する関数を作成する
function getData() {
return fetch(theUrl).then(response => response.text())
}
データを解析する関数を作成する
function parseData(str) {
const data = (new window.DOMParser()).parseFromString(str, 'text/xml')
// never did anything with XML so this might be wrong
// that's why JSON would be A LOT EASIER
// this should get the first Book
const Book = data.querySelector('Root Main-Library Book')
const price = Book.querySelector('Price').innerHTML
const loaned = Book.querySelector('Loaned').innerHTML
return { price, loaned }
}
データを印刷する
function printData(data) {
const priceTarget = document.querySelector('.price')
const loanedTarget = document.querySelector('.timestamp')
priceTarget.innerHTML = data.price
loanedTarget = data.loaned
}
フーを作成する定期的に実行される機能
function update() {
getData().then(parseData).then(printData)
}
関数を 1 回実行して間隔を設定する
const minutes = 5
update()
setInterval(update, minutes * 60 * 1000) // interval in ms, so 60*1000 gets us a minute
それが機能するかどうかは 100% わかりません。JavaScript で XML を使って何もやったことがないので、私の主な関心事は parseData() です。
編集: このコードは、最初の Book 要素からデータを読み取ります。すべての書籍をリストしたい場合は、コードを変える必要があります。教えてください。私より早い人がいない場合は、8 時間以内に回答します。おやすみ
0
------------------------
Saxon-JS を使用すると、次の行に沿って XSLT 3.0 スタイルシートを実行することでこれを行うことができます。
<xsl:template name="display">
<xsl:result-document href="#timestamp">
<xsl:text>Loaned at {/Root/Main-Library/Book/Loaned
=> translate(' ', 'T')
=> xs:dateTime()
=> format-date('[H00].[m00] on [MNn] [D1o], [Y0001]')
}</xsl:text>
</xsl:result-document>
<xsl:result-document href="#price">
<xsl:text>${/Root/Main-Library/Book/Price}</xsl:text>
</xsl:result-document>
<ixsl:schedule-action wait="60000">
<xsl:call-template name="refresh"/>
</ixsl:schedule-action>
</xsl-template>
<xsl:template name="refresh">
<ixsl:schedule-action http-request="....">
<xsl:call-template name="display"/>
</ixsl:schedule-action>
</xsl-template>
これは単なるスケッチですこのルートをたどる場合のアイデアを説明します。主な利点 (他の人よりも魅力的な人もいると思います) は、JavaScript に間違いがないことです。
免責事項: Saxon-JS は私の会社の製品です。
