XML データを読み取る JS のサンプル コード共有

最近のプロジェクトでは、アクセスパフォーマンスの問題により、内部ページは 静的 で生成されていますが、一部のコンテンツは動的にする必要があります。前の方法に従って、JS を使用する必要があります。フロントエンドのときに Red Boy を調べてみましたが、その中のいくつかのコードはすべて JS によって呼び出されているようです。 XML データ形式は次のとおりです:

<?xml version="1.0" encoding="gb2312"?>
<root>
<item>
<name>刘亦菲</name>
<url>MingXing/LiuYiFei.htm</url>
<color>7A9D4B</color>
</item>
<item>
<name>蔡依林</name>
<url>MingXing/CaiYiLin.htm</url>
<color>FD0000</color>
</item>
<item>
<name>张娜拉</name>
<url>MingXing/ZhangNaLa.htm</url>
<color>7A9D4B</color>
</item>
<item>
<name>张韶涵</name>
<url>MingXiang/ZhangShaoHan.htm</url>
<color>0000FF</color>
</item>
<item>
<name>张靓颖</name>
<url>MingXing/ZhangLiangYin.htm</url>
<color>7A9D4B</color>
</item>
<item>
<name>李宇春</name>
<url>MingXing/LiYuChun.htm</url>
<color>7A9D4B</color>
</item>
<item>
<name>徐若瑄</name>
<url>MingXing/XuLuXuan.htm</url>
<color>FD0000</color>
</item>
</root>

フロントエンド JS スクリプト コードは次のとおりです:

//Web サイトでの人気クリックのランキングを取得します

var cdsales=new ActiveXObject("Microsoft.XMLDOM"); //创建XmlDom对象
cdsales.async=true; //使用异步加载
cdsales.onreadystatechange=LoadedSales;
function LoadedSales()
{
    var txt="";
    if(cdsales.readyState==4)
    {
        if(cdsales.parseError.errorCode != 0) 
        {
            txt="";
        }else{
            var bi=cdsales.documentElement.selectNodes("item");
            if(bi!=null&&bi.length>0)
            {
                for(var i=0;i<bi.length;i++)
                {    
                    txt+="<li>·<a href="+bi[i].childNodes[1].text+" style=color:"+bi[i].childNodes[2].text+">"+bi[i].childNodes[0].text+"</a></li>";
                }
            }else{
                txt="";
            }
        }
    }else{
        txt="";
    }    
    sales.innerHTML=txt;
}
function LoadSalesDoc()
{
    var Url="/XML/Hot.xml";
    cdsales.load(Url);
}

上記の Hot.Xml はプログラムを使用して自動生成できます。出力ページが XML 形式である限り。 アーキテクチャ

に p+JS+XML を使用する Web サイトが増えているようです。笑、最初にコードを学ぶのは非常に良いことです。少なくとも静的なページはデータベースを動的に読み取ることもできます。これが Ajax の概念である場合は、そう考えるべきです。

以上がXML データを読み取る JS のサンプル コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。