オブジェクトを使ってグローバル変数を正しく置き換えよう

Question

私は最初にhereについて学んだグローバル変数を使ってエスケープするために、プロトタイプを使ってオブジェクトを初期化する方法を見つけようとしています。私は受け入れられた答えにあるコードの自分のバージョンを実装し始めました。

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) 
} 
}; 

（スクリプトの私の実装）

---

しかし、私はこの問題に遭遇しました。このコードを使用してここに示す関数を実行すると、次のようなコードが表示されます。

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

「null」というアラートが表示されます。私は十数回についてコードを読んできましたが、これは初めてのJavascriptで作業しているので、私が見逃したことがあります。あなたはそれを指摘できますか？

ありがとう、Elliot Bonneville。ただ、ノートの

Answer 1

はjqueryの中

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. 

公開イベントproblably働くだろうが、私はこのコードをテストしたhaventは。

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

コードは、非ブロック非同期APIを使用して同期的に（順番に）実行しようとしています。 UseXMLコールは、GetXMLコールが実際にAJAXの処理を終了する前に発生します。非同期であるためです。

このパターンは、非同期パターン（this.UseXMLはAJAXリクエストの成功時に直接呼び出されます）または同期パターン（ "async：false"がAJAX呼び出しに渡される）で記述できます。非同期パターンはJavaScript開発でははるかに一般的です（より強力なので）。同期リクエストはスクリプトの実行を妨げることでブラウザのUIをブロックしますが、同期は非常に簡単です。

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