web-dev-qa-db-ja.com

JQuery-ajax応答をグローバル変数に保存する

まだjQueryとajaxシーンの初心者ですが、GETを実行していくつかのXMLファイル（〜6KB以下）を取得する$ .ajaxリクエストがありますが、ユーザーがそのページに費やすXMLコンテンツ変更されません/変更されません（この設計は変更できません。また、XMLファイルを他の場所から読んでいるので、XMLファイルを変更するアクセス権もありません）。したがって、応答データを格納するグローバル変数があり、その後のデータのルックアップはこの変数で実行されるため、複数の要求を行う必要はありません。

XMLファイルが増加する可能性があるという事実を考えると、これがベストプラクティスであるかどうかはわかりません。また、Javaのバックグラウンドから、グローバルパブリック変数に関する私の考えは一般的に否認です。

だから私が持っている質問は、これを行うためのより良い方法があるかもしれないかどうか、そしてファイルがばかげたファイルサイズに拡張した場合、これがメモリの問題を引き起こすかどうかに関する質問ですか？

Xmlオブジェクト内のいくつかのgetter/setter型関数にデータを渡すことができると考えています。これにより、グローバルなパブリック変数の問題が解決しますが、オブジェクト自体に応答を保存する必要があるかどうかという疑問が残ります。

たとえば、私が現在していることは：

// top of code
var xml;
// get the file
$.ajax({
  type: "GET",
  url: "test.xml",
  dataType: "xml",
  success : function(data) {
    xml = data;
  }
});
// at a later stage do something with the 'xml' object
var foo = $(xml).find('something').attr('somethingElse');
jqueryxmlajaxresponse
66
Dom

保存する以外に方法はありません。メモリページングは​​、潜在的な問題を減らす必要があります。

「xml」というグローバル変数を使用する代わりに、次のようなことを行うことをお勧めします。

var dataStore = (function(){
    var xml;

    $.ajax({
      type: "GET",
      url: "test.xml",
      dataType: "xml",
      success : function(data) {
                    xml = data;
                }
    });

    return {getXml : function()
    {
        if (xml) return xml;
        // else show some error that it isn't loaded yet;
    }};
})();

次にアクセスします：

$(dataStore.getXml()).find('something').attr('somethingElse');
34
Luke Schafer

これは非常にうまく機能する関数です。上記のベストアンサーを使用できませんでした。

jQuery.extend({
    getValues: function(url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'xml',
            async: false,
            success: function(data) {
                result = data;
            }
        });
       return result;
    }
});

次に、それにアクセスするには、次のように変数を作成します。

var results = $.getValues("url string");
68
Charles Guilbert

これは私のために働いた：

var jqxhr = $.ajax({
    type: 'POST',       
    url: "processMe.php",
    data: queryParams,
    dataType: 'html',
    context: document.body,
    global: false,
    async:false,
    success: function(data) {
        return data;
    }
}).responseText;

alert(jqxhr);
// or...
return jqxhr;

重要：global: false、async:false、最後にresponseTextが$.ajaxリクエストにチェーンされています。

35
Phil Lowe

これを行う必要はありません。プロジェクトで同じ問題に遭遇しました。あなたがすることは、成功時コールバック内で関数呼び出しを行い、グローバル変数をリセットすることです。非同期javascriptをfalseに設定している限り、正しく機能します。これが私のコードです。それが役に立てば幸い。

var exists;

//function to call inside ajax callback 
function set_exists(x){
    exists = x;
}

$.ajax({
    url: "check_entity_name.php",
    type: "POST",
    async: false, // set to false so order of operations is correct
    data: {entity_name : entity},
    success: function(data){
        if(data == true){
            set_exists(true);
        }
        else{
            set_exists(false);
        }
    }
});
if(exists == true){
    return true;
}
else{
    return false;
}

これがあなたの助けになることを願っています。

17
Dom

グローバルにアクセスできるため、応答値をDOM要素に保存する方が簡単な場合があります。

<input type="hidden" id="your-hidden-control" value="replace-me" />

<script>
    $.getJSON( '/uri/', function( data ) {
        $('#your-hidden-control').val( data );
    } );
</script>

これには、asyncをfalseに設定する必要がないという利点があります。明らかに、これが適切かどうかは、何を達成しようとしているかによって異なります。

9
Aidan Fitzpatrick

問題は、ローカルまたはグローバルスコープに関連していない可能性があります。「成功」関数の実行と変数からデータを取り出そうとしている時間との間のサーバー遅延だけです。

おそらく、ajaxの「成功」関数が起動する前に変数の内容を出力しようとしている可能性があります。

8
vortex
        function getJson(url) {
            return JSON.parse($.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                global: false,
                async: false,
                success: function (data) {
                    return data;
                }
            }).responseText);
        }

        var myJsonObj = getJson('/api/current');

これは動作します!!!

6
DarthVader
     function get(a){
            bodyContent = $.ajax({
                  url: "/rpc.php",
                  global: false,
                  type: "POST",
                  data: a,
                  dataType: "html",
                  async:false
               } 
            ).responseText;
            return bodyContent;

  }
3
Edmhs

イベントの「document.ready」段階で、jQuery ajaxの結果を変数に取り込むことに本当に苦労しました。

jQueryのajaxは、ページが既に読み込まれた後にユーザーが選択ボックスの「変更」イベントをトリガーしたときに変数に読み込まれますが、ページが最初に読み込まれたときにデータが変数をフィードしません。

いろいろな方法を試しましたが、結局、Charles Guilbertの方法が最も効果的でした。

チャールズギルバートに脱帽！彼の答えを使用すると、ページが最初にロードされたときでも、データを変数に取り込むことができます。

作業スクリプトの例を次に示します。

    jQuery.extend
    (
        {
            getValues: function(url) 
            {
                var result = null;
                $.ajax(
                    {
                        url: url,
                        type: 'get',
                        dataType: 'html',
                        async: false,
                        cache: false,
                        success: function(data) 
                        {
                            result = data;
                        }
                    }
                );
               return result;
            }
        }
    );

    // Option List 1, when "Cats" is selected elsewhere
    optList1_Cats += $.getValues("/MyData.aspx?iListNum=1&sVal=cats");

    // Option List 1, when "Dogs" is selected elsewhere
    optList1_Dogs += $.getValues("/MyData.aspx?iListNum=1&sVal=dogs");

    // Option List 2, when "Cats" is selected elsewhere
    optList2_Cats += $.getValues("/MyData.aspx?iListNum=2&sVal=cats");

    // Option List 2, when "Dogs" is selected elsewhere
    optList2_Dogs += $.getValues("/MyData.aspx?iListNum=2&sVal=dogs");
2
CityPickle

これにも走りました。まだたくさんの答えがありますが、私が提供しようとしているのは簡単な正しいものです。重要なのは、$。ajaxの呼び出しを行うことです。

$.ajax({  
    async: false, ...
2
stvn

前の回答と同様：

<script type="text/javascript">

    var wait = false;

    $(function(){
        console.log('Loaded...');
        loadPost(5);
    });

    $(window).scroll(function(){
      if($(window).scrollTop() >= $(document).height() - $(window).height()-100){
        // Get last item
        var last = $('.post_id:last-of-type').val();
        loadPost(1,last);
      }
    });

    function loadPost(qty,offset){
      if(wait !== true){

        wait = true;

        var data = {
          items:qty,
          oset:offset
        }

        $.ajax({
            url:"api.php",
            type:"POST",
            dataType:"json",
            data:data,
            success:function(data){
              //var d = JSON.parse(data);
              console.log(data);
              $.each(data.content, function(index, value){
                $('#content').append('<input class="post_id" type="hidden" value="'+value.id+'">')
                $('#content').append('<h2>'+value.id+'</h2>');
                $('#content').append(value.content+'<hr>');
                $('#content').append('<h3>'+value.date+'</h3>');
              });
              wait = false;
            }
        });
      }
    }
</script>
0
Kyle Coots

私はスレッドが古いことを知っていますが、他の誰かがこれが役に立つと思うかもしれません。 jquey.comによると

var bodyContent = $.ajax({
  url: "script.php",
  global: false,
  type: "POST",
  data: "name=value",
  dataType: "html",
  async:false,
  success: function(msg){
     alert(msg);
  }
}).responseText;

結果を文字列に直接取得するのに役立ちます。 。responseText;部分に注意してください。

0
user759740

IMOでは、このデータをグローバル変数に保存できます。ただし、より一意の名前を使用するか、名前空間を使用する方が適切です。

MyCompany = {};

...
MyCompany.cachedData = data;

また、これらの目的にはjsonを使用することをお勧めします。json形式のデータは通常、xml形式の同じデータよりもはるかに小さくなります。

0
zihotki

サーバーから大きなXMLファイルを取得することは避けることをお勧めします。変数 "xml"は、データストア自体ではなくcacheのように使用する必要があります。

ほとんどのシナリオでは、キャッシュを調べて、必要なデータを取得するためにサーバーに要求を行う必要があるかどうかを確認できます。これにより、アプリの軽量化と高速化が実現します。

乾杯、jrh。

0
jrharshath

.get応答はデフォルトでキャッシュされます。したがって、目的の結果を得るために何もする必要はありません。

0
redsquare