JQueryを使用してXMLファイルを解析してHTMLテーブルを更新する方法

Question

特定のフォーマットになるXMLファイルを解析し、自宅チームまたは離れたチームが勝ち、3または1ポイントをHTMLテーブルに割り当てるかどうかを調べる必要があります（Overall Points Column）を使用している場合、JQueryを使用してこれを行うことをお勧めします。

results.xmlコード：

<?xml version="1.0"?> 
<title>Results</title> 
    <results> 
    <result id="1234"> 
     <hometeam> 
     <name>Roma</name> 
     <score>2</score> 
     </hometeam> 
     <awayteam> 
     <name>Lazio</name> 
     <score>0</score> 
     </awayteam> 
    </result> 
</results> 

HTMLコード：

<table id="table"> 
<th>Team</th> 
<th>Played</th> 
<th>Won</th> 
<th>Drawn</th> 
<th>Lost</th> 
<th>Total Goals</th> 
<th>Overall Points</th> 

<tr> 
<td>Roma</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
<tr> 
<td>Lazio</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
<tr> 
<td>Inter</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
<tr> 
<td>Milan</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
</table> 

のjQueryコード：

function showData() { 
$.ajax({ 
type: "GET", 
url: "results.xml", 
dataType: "xml", 

これは私がjQueryのコードのために、これまで持っているすべてです。

結果はどのように計算されますか？

if (hometeam score > awayteam score) 
{ add 3 to hometeams Overall Points} 
else if (hometeam score = awayteam score) 
{ add 1 to hometeams Overall Points and add 1 to awayteams Overall Points} 
else 
{ add 3 to awayteams Overall Points} 

hometeamとawayteamのスコアを評価し、HTMLテーブルの正しいチームを更新するにはどうすればよいですか？

ありがとうございました。

Answer 1

確かに、jQueryのparseXML関数などで、javascriptを使用してxmlを解析できます。 http://api.jquery.com/jQuery.parseXML/

ただし、エンドユーザーがあなたのページに行くたびに大きなファイルを解析する必要があるため、これは遅くなる可能性があります。 XMLファイルは大量になる傾向があります。

代わりに、XMLをまずJSONまたはデータベースのいずれかの行に変換します。

PHPには、ほとんどのディストリビューションに付属のSimple XML Parserというライブラリがあります。インターフェイスは本当に簡単です。 PythonにはXMLを解析するための豊富なライブラリlxmlもあります。

もちろん、javascriptを使用してXMLを解析する場合は、この質問が役に立ちます。 Paging Through XML Data Using jQuery and HTML

Answer 2

あなたが欠けているものを見るjquery documentation例に、あなたのAJAX呼び出し

$.ajax({ 
type: "GET", 
url: "results.xml", 
dataType: "xml", 

を比較します。

$.ajax({ 
    url: "results.xml", 
    dataType: "xml", 
    type: "GET", 
    success: function(data){ 
    // do something with data 
    } 
}); 

あなたは、データが正常に返された場合に呼び出される関数を指定する必要があります。ここに は、お電話でのように見えることができるものです。 上記の例では、関数は無名関数です。

function handle_success(data){ 
    // do something with data 
} 

$.ajax({ 
    url: "results.xml", 
    dataType: "xml", 
    type: "GET", 
    success: handle_success 
}); 

しかしAJAXでAを注意してください：あなたはまた、名前の正常な機能 を使用することができ、それは、非同期の略です。つまり、 あなたの成功関数は、後で多く呼び出されるか、まったく呼び出されません。 残りのプログラムは、ajaxコールの後で通常どおり実行されます。