web-dev-qa-db-fra.com

Erreur XMLHttpRequest (Ajax)

J'utilise XMLHttpRequest en JavaScript. Cependant, cela me donne une erreur et je ne sais pas quel est mon problème.
Je dois analyser un fichier XML et attribuer son contenu à la page Web - voici mon code:

<script = "text/javascript">

    window.onload = onPageLoad();
    var questionNum = 0;

    function onPageLoad(questionNum) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","quiz.xml");
        try {
            xmlhttp.send(null); // Here a xmlhttprequestexception number 101 is thrown 
        } catch(err) {
            document.getElementById("body").innerHTML += "\nXMLHttprequest error: " + err.description; // This prints "XMLHttprequest error: undefined" in the body.
        }
        xmlDoc = xmlhttp.responseXML;
        parser = new DOMParser(); // This code is untested as it does not run this far.
    }
</script>

Mon fichier XML est dans le même répertoire.

<question>
    <query>what is 2+2?</query>
    <option>4</option>
    <option>5</option>
    <option>3</option>
    <answer>4</answer>
</question>

À titre de référence, je programme généralement en C # ou en Java et j'utilise mon site Web sous Google Chrome.

javascriptajaxxmlxmlhttprequest
49
Muricula

Donc, il y a peut-être quelques choses qui ne vont pas ici.

Commencez tout d'abord par lire comment utiliser XMLHttpRequest.open() car il existe un troisième paramètre facultatif permettant de spécifier si une requête asynchrone doit être effectuée, , la valeur par défaut étant true . Cela signifie que vous effectuez une requête asynchrone et que vous devez spécifier une fonction de rappel avant de procéder à la fonction send(). Voici un exemple de MDN :

var oXHR = new XMLHttpRequest();

oXHR.open("GET", "http://www.mozilla.org/", true);

oXHR.onreadystatechange = function (oEvent) {  
    if (oXHR.readyState === 4) {  
        if (oXHR.status === 200) {  
          console.log(oXHR.responseText)  
        } else {  
           console.log("Error", oXHR.statusText);  
        }  
    }  
}; 

oXHR.send(null);

Deuxièmement, comme vous obtenez une erreur 101, vous pouvez utiliser une mauvaise URL. Assurez-vous donc que l'URL avec laquelle vous faites la demande est correcte. Assurez-vous également que votre serveur est capable de servir votre quiz.xml fichier.

Vous devrez probablement déboguer en simplifiant/réduisant le problème. Je commencerais donc par une requête synchrone simple afin que vous n'ayez pas à vous soucier de la fonction de rappel. Voici donc un autre exemple de MDN pour effectuer une requête synchrone:

var request = new XMLHttpRequest();  
request.open('GET', 'file:///home/user/file.json', false);   
request.send(null);  

if (request.status == 0)  
    console.log(request.responseText);

De plus, si vous débutez avec Javascript, vous pouvez vous référer à MDN pour la documentation/les exemples/les tutoriels de l'API Javascript.

80
Nadir Muzaffar

Je vois 2 problèmes possibles:

Problème 1

  • l'objet XMLHTTPRequest n'a pas fini de charger les données au moment où vous essayez de les utiliser

Solution: attribuer une fonction de rappel aux objets "onreadystatechange" -event et gérer les données de cette fonction

xmlhttp.onreadystatechange = callbackFunctionName;

Une fois que state a atteint DONE (4), le contenu de la réponse est prêt à être lu.

Problème 2

  • l'objet XMLHTTPRequest n'existe pas dans tous les navigateurs (sous ce nom)

Solution: utilisez un try-catch pour créer le bon objet pour le navigateur approprié (ActiveXObject dans IE) ou utilisez un cadre, par exemple méthode jQuery ajax

Remarque: si vous décidez d’utiliser jQuery méthode ajax, vous affectez la fonction de rappel à jqXHR.done ().

2
supertopi

Le problème est probablement lié à la ligne:

window.onload = onPageLoad();

En incluant les crochets, vous dites que onload devrait être égal à la valeur de retour de onPageLoad(). Par exemple:

/*Example function*/
function onPageLoad()
{
    return "science";
}
/*Set on load*/
window.onload = onPageLoad()

Si vous imprimez la valeur de window.onload Sur la console, ce sera:

science

La solution est de supprimer les crochets:

window.onload = onPageLoad;

Donc, vous utilisez onPageLoad comme référence à la fonction ainsi nommée.

Enfin, pour obtenir la valeur de réponse, vous aurez besoin d'un écouteur readystatechange pour votre objet XMLHttpRequest, car il est asynchrone:

xmlDoc = xmlhttp.responseXML;
parser = new DOMParser(); // This code is untested as it doesn't run this far.

Ici vous ajoutez l'auditeur:

xmlHttp.onreadystatechange = function() {
    if(this.readyState == 4) {
        // Do something
    }
}
2
CBusBus