効率的なajaxベースのjavascriptスクリプトの作成方法

Question

私は通常、スクリプトがいくつかのajaxや一般的なサーバーレスポンスに依存しているときに、このようなjavascriptでスクリプトを構築します。私は本当にそれが最も効率的なやり方だとは思わないので、これらの種類のスクリプトを実行するより良い方法は何でしょうか？

function someclass() { 

    //some internal variables here 
    this.var1 = null; 
    this.var2 = null; 
    ... 

    //some ajax function which gets some critical information for the other functions 
    this.getAJAX = function() { 
     self = this; 
     urls = "someurlhere"; 
     //jquery ajax function 
     $.ajax({ 
      type: "GET", 
      url: url, 
      dataType: 'json', 
      complete: function (xhr, textStatus) { 
       //get the response from the server 
       data = JSON.parse(xhr.responseText); 
       //call the function which will process the information 
       self.processAJAX(data); 
      } 
     }) 

    this.processAJAX = function(data) { 
     //set some of the internal variables here 
     //according to the response from the server 

     //now that the internal variables are set, 
     //I can call some other functions which will 
     //use the data somehow 
     this.doSomething(); 
    } 

    this.doSomething = function() { 
     //do something here 
    } 

} 

だから私は、このようなスクリプト何か使用します。

//instantiate the class 
foo = new someClass(); 

//get the information from the server 
//and the processAjax function will eventually 
//call the doSomething function 
foo.getAjax(); 

それは何が起こっているか、スクリプトを使用するには明確ではありませんので、だから私は本当にこれを好きではないが。そのため、doSomethingのが呼ばれたとき、通常はサーバーからの応答が非常にいくつかの時間がかかるため、必要な情報はまだありません

//instantiate the class 
foo = new someClass(); 

//get info from the server 
//in this example, the processAJAX function will not call the doSomething 
foo.getAjax(); 

//do something 
foo.doSomething(); 

しかしこれは動作しません：私はこのような何かをできるようにしたいと思います、関数はそれがすると思われることをしません。

この作品を作成するには？

答えは既にStackOverflowのどこかにあるとは思いますが、何も見つかりませんでしたので、回答またはStackOverflowでこれを説明できるリソースへのリンクのどちらにも感謝します。どんな助けもありがとうございます。ありがとうございました。

Answer 1

この標準パターンは、操作が完了したときにコールする責任を負う、非同期メソッドに対するコールバック関数を受け入れることです。

function someclass() { 
    this.getAJAX = function(callback) { 
     this.afterAJAXCallback = callback; 
     ... 
    }); 

    this.processAJAX = function(data) { 
     ... 
     if (this.afterAJAXCallback) this.afterAJAXCallback(); 
    } 
} 

次に、あなたがずっとあなたが使用してしまう方法で、あなたのコードを構造化する場所にクロージャーコールバックを使用することができますjQueryの$アヤックス：

foo = new someClass(); 
foo.getAjax(function() { 
    foo.doSomething(); 
}); 

Answer 2

あなたはajaxイベントリスナーやコールバックが好きですね。いくつかの検索を行い、いくつかの解決策を見つけるでしょう。それらの多くはjQueryに基づいていますが、それがアプリケーションに悪い場合はjQueryを使用せずに実行することは可能です。

jQueryの場合、関連ドキュメントはhttp://api.jquery.com/jQuery.ajax/です。イベントリスナーとは呼ばず、contextの部分とsuccesのコールバックを参照してください。

もう1つの可能性は、非同期ではなく同期的にajax呼び出しを行うことです。 （また、いくつかの検索を行い、多くのものを見つけるでしょう）。もしあなたがそのルートに行くなら、同期呼び出しが基本的にあなたのアプリを待って応答を待たないように注意する必要があります。

Answer 3

XMLHttpRequest() synchronousを使用する場合は、好きなようにすることができます。