Utilisation d'objets pour remplacer correctement les variables globales

Question

J'ai essayé de comprendre comment initialiser un objet à l'aide d'un prototype afin d'échapper à l'utilisation de variables globales, ce que j'ai découvert pour la première fois à propos de here. J'ai commencé à implémenter ma propre version du code trouvé dans la réponse acceptée.

function XML_Data() { 
    this.data = null; 
} 

XML_Data.prototype = { 
GetXML: function() { 
    $.ajax({ 
    type: "GET", 
    url: "questions.xml", 
    dataType: "xml", 
    success: function(xml) { 
    this.data=xml; 
    } //close success 
    });//close AJAX 
}, 

UseXML: function() { 
    alert(this.data) 
} 
}; 

(Ma mise en œuvre du script)

---

Cependant, j'ai rencontré un problème. Quand j'exécute les fonctions montrées ici en utilisant ce peu de code:

var data = new XML_Data(); 
data.GetXML(); 
data.UseXML(); 

Je reçois une alerte qui indique "null". J'ai déjà lu le code une douzaine de fois, mais comme c'est la première fois que je travaille avec Javascript, il y a quelque chose que j'ai manqué. Pourriez-vous le signaler?

Merci, Elliot Bonneville.

Answer 1

Juste de la note

var data = new XML_Data(); 
data.GetXML(); //This will run the ajax request 
data.UseXML(); //This will most likely run before the ajax request is finished. 

événements introduis Jquery travaillerait problably, mais je havent testé ce code.

function XML_Data() { 
    this.data = null; 
} 

XML_Data.prototype = { 
GetXML: function() { 
    $.ajax({ 
    type: "GET", 
     url: "questions.xml", 
    dataType: "html", 
    success: function(xml) { 
    this.data=xml; 
    $(window).trigger("myAjaxEvent"); 
    } //close success 
    });//close AJAX 
}, 

UseXML: function() { 
    alert(this.data) 
} 
}; 


$(document).ready(function() { 
    var data = new XML_Data(); 
    $(window).bind("myAjaxEvent", function() { 
     data.UseXML(); 
    }); 

    data.GetXML(); 

}); 

Answer 2

Le code que vous avez maintenant tente d'exécuter de façon synchrone (dans l'ordre) en utilisant une API asynchrone non bloquante. L'appel UseXML se produit avant que l'appel GetXML ne finisse réellement sa tâche AJAX, car il est asynchrone.

Vous pouvez écrire ceci dans un modèle asynchrone (dans lequel this.UseXML est appelé directement en cas de succès de la requête AJAX), ou un modèle synchrone (dans lequel "async: false" est passé à l'appel AJAX). Le modèle asynchrone est beaucoup plus commun dans le développement JavaScript, car il est beaucoup plus puissant, et les requêtes synchrones bloquent l'interface utilisateur dans le navigateur en empêchant l'exécution du script, mais synchrone est beaucoup plus facile à faire pour les petites choses.

Voir http://api.jquery.com/jQuery.ajax/