XMLHttpRequest cannot load file

Pierre Ftn
Javascript

Salut à tous ,

je travaille sur des overlay de streaming et j'ai besoin de les controller à distance , pour cela j'ai un soft qui modifie un fichier xml et je peux insérer dans le logiciel de streaming un fichier html ,

je voulais donc récupérer les informations du xml en jquery pour les affichers dans mon html , mon code me parraît bon mais j'obtiens l'erreur suivante :
XMLHttpRequest cannot load file:///C:/Users/Pierre/Desktop/StreamControl/Stream/streamcontrol.xml. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

J'ai pensé qu'il fallait le lancer depuis wamp mais cela ne résoudrait pas mon problème puisque je dois pouvoir utiliser mon fichier html dans un logiciel .

Je vous montre mes fichiers html , js et xml :

$(document).ready(function(){
    $.ajax({
        type:"GET",
        url: "streamcontrol.xml",
        dataType: "xml",
        success: function(xml){
            var map = $(xml).find('mapname').text();
            var mod = $(xml).find('modname').text();
            $('#img_map').attr('src', 'img/' + map + '.png');
            $("#img_mod").attr('src', 'img/' + map + '.png');
        }
    });

    $('#title').velocity({
        translateX:[0,-400],
    },
    {
        duration:500,
        display:'block',
        delay:1000,
    }).velocity('reverse', { delay:8000});
    $('#map').velocity({
        translateX:[0,-400],
    },
    {
        duration:500,
        display:'block',
        delay:1400,
    }).velocity('reverse', { delay:8000});
    $('#mod').velocity({
        translateX:[0,-400],
    },
    {
        duration:500,
        display:'block',
        delay:1600,
    }).velocity('reverse', { delay:8000});
})(jQuery);

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Prochaines Map</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <div id="title">
        <img src="img/title.png" alt="">
    </div>
    <ul class="meta">
        <li id="map">
            <img id ="img_map" src="img/raid.png" alt="">
        </li>
        <li id="mod">
            <img id="img_mod" src="img/hp.png" alt="">
        </li>
    </ul>
</div>

 <script src="jquery.js"></script>
 <script src="velocity.js"></script>
 <script src="app.js"></script>
</body>
</html>

<!DOCTYPE StreamControl>
<items>
 <timestamp>1408380718</timestamp>
 <mapname>hijacked</mapname>
 <modname>flag</modname>

</items>

Merci D'avance

1 réponse

Pierre Ftn
Auteur

J'ai également essayer le code suivant mais la variable map contient :

[objectHTMLLIElement] à la place du contenu du html

var xmlDoc;
    var xhr = new XMLHttpRequest();
    xhr.open('GET' , 'streamcontrol.xml');
    xhr.onreadystatechange = function(){
        var XmlDoc = xhr.responseXML;
        var map = getValueFromTag(xmlDoc, 'mapname');
        var mod = getValueFromTag(xmlDoc, 'modname');
    }
    $('#map').html('<img src="img/' + map + ' .png">');