Fatal编程技术网
  • javascript/
  • Javascript 修复JS XML加载以不使用async=false-如何？

Javascript 修复JS XML加载以不使用async=false-如何？

javascript jquery xml

Javascript 修复JS XML加载以不使用async=false-如何？,javascript,jquery,xml,Javascript,Jquery,Xml,我最初打算使用jQuery进行XML解析（单节点），但运气不好，所以最终使用了纯Javascript。该代码位于该线程中： 现在我可以看到，我使用XMLhttpRequest函数的方式已被弃用，将来可能会被删除，这将破坏我主页上的很多内容 Google inspector也有报道 workers外部的同步XMLHttpRequest正在从web平台中删除，因为它对最终用户的体验有不利影响 我想重新打开原来的问题，并获得帮助，重写下面的内容以加载我的XML，而无需在代码中使用async=false

我最初打算使用jQuery进行XML解析（单节点），但运气不好，所以最终使用了纯Javascript。该代码位于该线程中：

现在我可以看到，我使用XMLhttpRequest函数的方式已被弃用，将来可能会被删除，这将破坏我主页上的很多内容 Google inspector也有报道

workers外部的同步XMLHttpRequest正在从web平台中删除，因为它对最终用户的体验有不利影响

我想重新打开原来的问题，并获得帮助，重写下面的内容以加载我的XML，而无需在代码中使用async=false

xhttp.open("GET",filename,false);
在我的HMTL代码中，代码大约在9/10以下被调用，但是简单地将“false”更改为“true”是不好的，因为根本没有加载任何内容（我猜代码在有机会插入XML数据之前会继续运行？）。由于我在JS方面的能力较弱，我不得不在谷歌上找到一些指向以下方面的答案：

如何更改代码以避免使用“false”语句

XML看起来像：

<scoreresults>
<topscorePicture>100</topscorePicture>
<topscoreFeature>100</topscoreFeature>
<topscoreUI>100</topscoreUI>
<item>
<title>
<![CDATA[ Test sample 1 ]]>
</title>
<link>    Somelink    </link>
<guid isPermaLink="true">   Somelink      </guid>
<scorePicture>82</scorePicture>
<scoreFeature>90</scoreFeature>
<scoreUI>85</scoreUI>
<measurePowerOTB>180</measurePowerOTB>
<measurePowerCAL>160</measurePowerCAL>
<measurePowerSTANDBY>0.2</measurePowerSTANDBY>
<measureContrastOTB>2000</measureContrastOTB>
<measureContrastCAL>2200</measureContrastCAL>
<measureBrightnessOTB>210</measureBrightnessOTB>
<measureBrightnessCAL>130</measureBrightnessCAL>
</item>
</scoreresults>


100
100
100
Somelink
Somelink
82
90
85
180
160
0.2
2000
2200
210
130
脚本内容如下：

function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // code for IE5 and IE6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}



function showTVscore(testNo) {

    //Load the XML
    xmlDoc = loadXMLDoc("/testscores.xml");

    //Extract the highest score for picture
    tsp = xmlDoc.getElementsByTagName("topscorePicture")[0];
    topspvalue = tsp.childNodes[0];

    //Extract highest score for features
    tsf = xmlDoc.getElementsByTagName("topscoreFeature")[0];
    topsfvalue = tsf.childNodes[0];

    //Extract highest score for UI
    tsui = xmlDoc.getElementsByTagName("topscoreUI")[0];
    topsuivalue = tsui.childNodes[0];

    //Extract  picture score for the specific test no.
    sp = xmlDoc.getElementsByTagName("scorePicture")[testNo];
    spvalue = sp.childNodes[0];

    //Extract Feature score for the specific test no.
    sf = xmlDoc.getElementsByTagName("scoreFeature")[testNo];
    sfvalue = sf.childNodes[0];

    //Extract UI score for the specific test no.
    sui = xmlDoc.getElementsByTagName("scoreUI")[testNo];
    suivalue = sui.childNodes[0];

    //Calculate current scores
    scorePicture = Math.round(Number(spvalue.nodeValue) / Number(topspvalue.nodeValue) * 100);
    scoreFeature = Math.round(Number(sfvalue.nodeValue) / Number(topsfvalue.nodeValue) * 100);
    scoreUI = Math.round(Number(suivalue.nodeValue) / Number(topsuivalue.nodeValue) * 100);
    scoreTotal = Math.round(0.5 * scorePicture + 0.25 * scoreFeature + 0.25 * scoreUI);

    //Set color of Picture scorebar
    switch (Math.round(scorePicture / 10)) {
        case 1:
            pictureColor = "#934F00";
            break;
        case 2:
            pictureColor = "#C36900";
            break;
        case 3:
            pictureColor = "#F28200";
            break;
        case 4:
            pictureColor = "C38D00";
            break;
        case 5:
            pictureColor = "#F2AF00";
            break;
        case 6:
            pictureColor = "#07ABFB";
            break;
        case 7:
            pictureColor = "#008ED3";
            break;
        case 8:
            pictureColor = "#006699";
            break;
        case 9:
            pictureColor = "#00537B";
            break;
        case 10:
            pictureColor = "#003F5D";
            break;
    };
    //Set color of Feature scorebar
    switch (Math.round(scoreFeature / 10)) {
        case 1:
            featureColor = "#934F00";
            break;
        case 2:
            featureColor = "#C36900";
            break;
        case 3:
            featureColor = "#F28200";
            break;
        case 4:
            featureColor = "C38D00";
            break;
        case 5:
            featureColor = "#F2AF00";
            break;
        case 6:
            featureColor = "#07ABFB";
            break;
        case 7:
            featureColor = "#008ED3";
            break;
        case 8:
            featureColor = "#006699";
            break;
        case 9:
            featureColor = "#00537B";
            break;
        case 10:
            featureColor = "#003F5D";
            break;
    };
    //Set color of UI scorebar
    switch (Math.round(scoreUI / 10)) {
        case 1:
            uiColor = "#934F00";
            break;
        case 2:
            uiColor = "#C36900";
            break;
        case 3:
            uiColor = "#F28200";
            break;
        case 4:
            uiColor = "C38D00";
            break;
        case 5:
            uiColor = "#F2AF00";
            break;
        case 6:
            uiColor = "#07ABFB";
            break;
        case 7:
            uiColor = "#008ED3";
            break;
        case 8:
            uiColor = "#006699";
            break;
        case 9:
            uiColor = "#00537B";
            break;
        case 10:
            uiColor = "#003F5D";
            break;
    };
    //Set color of total scorebar
    switch (Math.round(scoreTotal / 10)) {
        case 1:
            totalColor = "#934F00";
            break;
        case 2:
            totalColor = "#C36900";
            break;
        case 3:
            totalColor = "#F28200";
            break;
        case 4:
            totalColor = "C38D00";
            break;
        case 5:
            totalColor = "#F2AF00";
            break;
        case 6:
            totalColor = "#07ABFB";
            break;
        case 7:
            totalColor = "#008ED3";
            break;
        case 8:
            totalColor = "#006699";
            break;
        case 9:
            totalColor = "#00537B";
            break;
        case 10:
            totalColor = "#003F5D";
            break;
    };

    //Construct HTML
    HTMLchunkStart = "<div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-picture-o\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    pictureBar = "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"" + Number(spvalue.nodeValue) + "\" aria-valuemin=\"0\" aria-valuemax=\"" + Number(topspvalue.nodeValue) + "\" style=\"width:" + scorePicture + "%; background-color:" + pictureColor + ";\">" + scorePicture + "%</div>";
    HTMLchunk1 = "</div> <div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-cogs\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    featureBar = "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"" + Number(sfvalue.nodeValue) + "\" aria-valuemin=\"0\" aria-valuemax=\"" + Number(topsfvalue.nodeValue) + "\" style=\"width:" + scoreFeature + "%; background-color:" + featureColor + "\">" + scoreFeature + "%</div>";
    HTMLchunk2 = " </div><div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-user\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    UIbar = "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"" + Number(suivalue.nodeValue) + "\" aria-valuemin=\"0\" aria-valuemax=\"" + Number(topsuivalue.nodeValue) + "\" style=\"width:" + scoreUI + "%; background-color:" + uiColor + ";\">" + scoreUI + "%</div>";
    HTMLchunk3 = "</div> <div style=\"padding-top: 3px;float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-star\"></i></div><div class=\"progress progress-lg\" style=\"background-color:#E2E2E2;height: 30px;\">";
    totalBar = "<div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\"" + scoreTotal + "\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:" + scoreTotal + "%; background-color:" + totalColor + ";font-size:1.1em;font-weight:600;\">Total: " + scoreTotal + "%</div></div>";

    //Write the HTML
    document.write(HTMLchunkStart + pictureBar + HTMLchunk1 + featureBar + HTMLchunk2 + UIbar + HTMLchunk3 + totalBar);
}

函数加载xmldoc（文件名）
{
if（window.XMLHttpRequest）
{
xhttp=newXMLHttpRequest（）；
}
else//IE5和IE6的代码
{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.open（“GET”，filename，false）；
xhttp.send（）；
返回xhttp.responseXML；
}
函数showTVscore（testNo）{
//加载XML
xmlDoc=loadXMLDoc（“/testscores.xml”）；
//提取图片的最高分数
tsp=xmlDoc.getElementsByTagName（“topscorePicture”）[0]；
topspvalue=tsp.childNodes[0]；
//提取特征的最高分数
tsf=xmlDoc.getElementsByTagName（“TopCoreFeature”）[0]；
topsfvalue=tsf.childNodes[0]；
//提取用户界面的最高分数
tsui=xmlDoc.getElementsByTagName（“topscoreUI”）[0]；
topsuivalue=tsui.childNodes[0]；
//提取特定测试编号的图片分数。
sp=xmlDoc.getElementsByTagName（“scorePicture”）[testNo]；
spvalue=sp.childNodes[0]；
//提取特定测试编号的特征分数。
sf=xmlDoc.getElementsByTagName（“scoreFeature”）[testNo]；
sfvalue=sf.childNodes[0]；
//提取特定测试编号的UI分数。
sui=xmlDoc.getElementsByTagName（“scoreUI”）[testNo]；
suivalue=sui.childNodes[0]；
//计算当前分数
scorePicture=Math.round（数字（spvalue.nodeValue）/数字（topspvalue.nodeValue）*100）；
scoreFeature=Math.round（数字（sfvalue.nodeValue）/数字（topsfvalue.nodeValue）*100）；
scoreUI=数学圆（数字（suivalue.nodeValue）/数字（topsiValue.nodeValue）*100）；
scoreTotal=Math.round（0.5*scorePicture+0.25*scoreFeature+0.25*scoreUI）；
//设置图片记分栏的颜色
开关（数学循环（scorePicture/10））{
案例1：
pictureColor=“#934F00”；
打破
案例2：
pictureColor=“#C36900”；
打破
案例3：
pictureColor=“#F28200”；
打破
案例4：
pictureColor=“C38D00”；
打破
案例5：
pictureColor=“#F2AF00”；
打破
案例6：
pictureColor=“#07ABFB”；
打破
案例7：
pictureColor=“#008ED3”；
打破
案例8：
pictureColor=“#006699”；
打破
案例9：
pictureColor=“#00537B”；
打破
案例10：
pictureColor=“#003F5D”；
打破
};
//设置特征记分栏的颜色
开关（数学轮（scoreFeature/10））{
案例1：
featureColor=“#934F00”；
打破
案例2：
featureColor=“#C36900”；
打破
案例3：
featureColor=“#F28200”；
打破
案例4：
featureColor=“C38D00”；
打破
案例5：
featureColor=“#F2AF00”；
打破
案例6：
featureColor=“#07ABFB”；
打破
案例7：
featureColor=“#008ED3”；
打破
案例8：
featureColor=“#006699”；
打破
案例9：
featureColor=“#00537B”；
打破
案例10：
featureColor=“#003F5D”；
打破
};
//设置UI记分栏的颜色
开关（数学轮（scoreUI/10））{
案例1：
uiColor=“#934F00”；
打破
案例2：
uiColor=“#C36900”；
打破
案例3：
uiColor=“#F28200”；
打破
案例4：
uiColor=“C38D00”；
打破
案例5：
uiColor=“#F2AF00”；
打破
案例6：
uiColor=“#07ABFB”；
打破
案例7：
uiColor=“#008ED3”；
打破
案例8：
uiColor=“#006699”；
打破
案例9：
uiColor=“#00537B”；
打破
案例10：
uiColor=“#003F5D”；
打破
};
//设置总记分栏的颜色
开关（数学轮（总分/10））{
案例1：
totalColor=“#934F00”；
打破
案例2：
totalColor=“#C36900”；
打破
案例3：
totalColor=“#F28200”；
打破
案例4：
totalColor=“C38D00”；
打破
案例5：
totalColor=“#F2AF00”；
打破
案例6：
totalColor=“#07ABFB”；
打破
案例7：
totalColor=“#008ED3”；
打破
案例8：
totalColor=“#006699”；
打破
案例9：
totalColor=“#00537B”；
打破
案例10：
到

function loadXMLDoc(filename, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", filename);
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
       callback(this.responseXML);  
    }
  };
  xhr.send();
}



<script>
function showTVscore(x){
    // load the xml data. it is parsed by jquery
    $.get("testscores.xml", function(data) {
        var $xml = $(data);
        var y = $xml.find("item").length;
        topScorePic = parseInt($xml.find("topscorePicture").text());
        topScoreFeature = parseInt($xml.find("topscoreFeature").text());
        topScoreUI = parseInt($xml.find("topscoreUI").text());

        $xml.find("item").each(function(i, val) { // find the items in the xml and loop     
            // create an item object with all the necessary information out of the xml
            var $this = $(this),
                item = {
                    title: $this.find("title").text(),
                    link: $this.find("link").text(),
                    TopAward: $this.find("TopAward").text(),
                    RefAward: $this.find("RefAward").text(),
                    scorePic: parseInt($this.find("scorePicture").text(),10),
                    scoreFeature: parseInt($this.find("scoreFeature").text(),10),
                    scoreUI: parseInt($this.find("scoreUI").text(),10),
                    pricerunner: $this.find("pricerunnerLINK").text(),
                    year: $this.find("year").text(),
                };
            //Calculate scores relative to max values   
            scorePic = Math.round(item.scorePic / topScorePic*100);
            scoreFeature = Math.round(item.scoreFeature / topScoreFeature *100);
            scoreUI = Math.round(item.scoreUI / topScoreUI *100);           

            //Calculate total score
            totalScore = Math.round(0.5*item.scorePic + 0.25*(item.scoreFeature + item.scoreUI));

            // div with id "score" has the appropriate XML node added
            if(item.title == x){    
                $('#score').append($(
                    //HTML code that loads everything goes here...
                 ));
            }
            return i<(y-1); // (stop after y iterations)
        });
    });
};
</script>



<div class="col-xs-12 col-sm-6">
    <div id="score">
    </div>
</div>
<script>showTVscore('title of node I want to load)');</script>