Подтвердить что ты не робот

Параллельные вызовы Ajax в Javascript/jQuery

Я совершенно не знаком с Javascript/jquery world и нуждаюсь в некоторой помощи. Прямо сейчас, я пишу одну html-страницу, где мне нужно сделать 5 различных вызовов Ajax, чтобы получить данные для построения графиков. Прямо сейчас, я вызываю эти 5 вызовов ajax следующим образом:

$(document).ready(function() {
    area0Obj = $.parseJSON($.ajax({
        url : url0,
        async : false,
        dataType : 'json'
    }).responseText);

    area1Obj = $.parseJSON($.ajax({
        url : url1,
        async : false,
        dataType : 'json'
    }).responseText);
.
.
.
    area4Obj = $.parseJSON($.ajax({
        url : url4,
        async : false,
        dataType : 'json'
    }).responseText);

    // some code for generating graphs

)} // closing the document ready function

Моя проблема в том, что в вышеупомянутом сценарии все вызовы ajax идут последовательно. То есть после завершения 1 вызова 2 запуска, когда 2 завершает 3 запуска и т.д. Каждый вызов Ajax занимает примерно 5-6 секунд, чтобы получить данные, что заставляет загружать всю страницу за 30 секунд,

Я попытался сделать тип асинхронным как true, но в этом случае я не получу данные сразу, чтобы построить график, который побеждает мою цель.

Мой вопрос: Как я могу сделать эти вызовы параллельными, чтобы я начал получать все эти данные параллельно, и моя страница могла быть загружена за меньшее время?

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Используя jQuery.when (отложенные):

$.when( $.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3") ).then(function(resp1, resp2, resp3){ 
    // plot graph using data from resp1, resp2 & resp3 
});

функция обратного вызова, вызываемая только после завершения всех 3 вызовов ajax.

Ответ 2

Вы не можете сделать это с помощью async: false - код выполняется синхронно, как вы уже знаете (т.е. операция не будет запускаться до тех пор, пока предыдущий не завершится).
Вам нужно будет установить async: true (или просто опустить) - по умолчанию оно истинно). Затем определите функцию обратного вызова для каждого вызова AJAX. Внутри каждого обратного вызова добавьте полученные данные в массив. Затем проверьте, загружены ли все данные (arrayOfJsonObjects.length == 5). Если это так, вызовите функцию, чтобы делать все, что хотите, с данными.

Ответ 3

Попробуйте сделать это следующим образом:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var area0Obj = {responseText:''};
        var area1Obj = {responseText:''};
        var area2Obj = {responseText:''};

        var url0 = 'http://someurl/url0/';
        var url1 = 'http://someurl/url1/';
        var url2 = 'http://someurl/url2/';

        var getData = function(someURL, place) {
            $.ajax({
                type     : 'POST',
                dataType : 'json',
                url      : someURL,
                success  : function(data) {
                    place.responseText = data;
                    console.log(place);
                }
            });
        }

        getData(url0, area0Obj);
        getData(url1, area1Obj);
        getData(url2, area2Obj);

    }); 
</script>

если сторона сервера будет немного. например:

public function url0() {
    $answer = array(
        array('smth' => 1, 'ope' => 'one'),
        array('smth' => 8, 'ope' => 'two'),
        array('smth' => 5, 'ope' => 'three')
    );
    die(json_encode($answer));
}

public function url1() {
    $answer = array('one','two','three');
    die(json_encode($answer));
}

public function url2() {
    $answer = 'one ,two, three';
    die(json_encode($answer));
}

Итак, как вы можете видеть, была создана одна функция getData() для получения данных с сервера и 3 раза. Результаты будут получены асинхронным способом, чтобы, например, сначала получить ответ для третьего вызова и последний для первого вызова.

Ответ консоли:

[{"smth":1,"ope":"one"},{"smth":8,"ope":"two"},{"smth":5,"ope":"three"}]

["one","two","three"]

"one ,two, three"

PS. пожалуйста, прочтите следующее: http://api.jquery.com/jQuery.ajax/ там вы можете четко видеть информацию об async. Там по умолчанию значение async param = true.

По умолчанию все запросы отправляются асинхронно (т.е. по умолчанию это значение равно true). Если вам нужны синхронные запросы, установите для этого параметра значение false. Междоменные запросы и dataType: запросы "jsonp" не поддерживают синхронную работу. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, пока запрос активен...

Ответ 4

В jQuery.ajax вы должны указать метод обратного вызова, как показано ниже:

j.ajax({
        url : url0,
        async : true,
        dataType : 'json',
        success:function(data){
             console.log(data);
        }
    }

или вы можете напрямую использовать

jQuery.getJSON(url0, function(data){
  console.log(data);
});

ссылка

Ответ 5

Вы не сможете справиться с этим, как ваш пример. Настройка async использует другой поток, чтобы включить запрос и продолжить ваше приложение.

В этом случае вы должны использовать новую функцию, которая будет отображать область, а затем использовать функции обратного вызова запроса ajax для передачи данных этой функции.

Например:

$(document).ready(function() {
    function plotArea(data, status, jqXHR) {
      // access the graph object and apply the data.
      var area_data = $.parseJSON(data);
    }

    $.ajax({
        url : url0,
        async : false,
        dataType : 'json',
        success: poltArea
    });

    $.ajax({
        url : url1,
        async : false,
        dataType : 'json',
        success: poltArea
    });

    $.ajax({
        url : url4,
        async : false,
        dataType : 'json',
        success: poltArea
    });

    // some code for generating graphs

}); // closing the document ready function

Ответ 6

Похоже, вам нужно отправить запрос асинхронно и определить функцию обратного вызова, чтобы получить ответ.

То, как вы это сделали, будет ждать, пока переменная будет успешно назначена (что означает: ответ только что появился), пока не приступит к отправке следующего запроса. Просто используйте что-то вроде этого.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: function(data) {
     area0Obj = data;
  }
});

Это должно сделать трюк.

Ответ 7

вы можете объединить все функции различных функций ajax в 1 функцию ajax или из 1 функции ajax, вызвать другие функции (в этом случае они будут закрытыми/контроллерами), а затем вернет результат. Ajax-вызовы немного отстают, поэтому их минимизация - это путь.

вы также можете сделать аякс-функции асинхронными (которые тогда будут вести себя как обычные функции), тогда вы можете отобразить график в конце, после того как все функции вернут свои данные.

Ответ 9

У меня сработало следующее: у меня было несколько вызовов ajax с необходимостью передать сериализованный объект:

    var args1 = {
        "table": "users",
        "order": " ORDER BY id DESC ",
        "local_domain":""
    }
    var args2 = {
        "table": "parts",
        "order": " ORDER BY date DESC ",
        "local_domain":""
    }

    $.when(
        $.ajax({
                url: args1.local_domain + '/my/restful',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                type: "POST",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify(args1),
                error: function(err1) {
                    alert('(Call 1)An error just happened...' + JSON.stringify(err1));
                }
            }),
        $.ajax({
            url: args2.local_domain + '/my/restful',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            type: "POST",
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(args2),
            error: function(err2) {
                calert('(Call 2)An error just happened...' + JSON.stringify(err2));
            }
        })                     

    ).then(function( data1, data2 ) {
        data1 = cleanDataString(data1);
        data2 = cleanDataString(data2);

        data1.forEach(function(e){
            console.log("ids" + e.id)
        });
        data2.forEach(function(e){
            console.log("dates" + e.date)
        });

    })

    function cleanDataString(data){
            data = decodeURIComponent(data);
            // next if statement was only used because I got additional object on the back of my JSON object
            // parsed it out while serialised and then added back closing 2 brackets
            if(data !== undefined && data.toString().includes('}],success,')){ 
                temp = data.toString().split('}],success,');
                data = temp[0] + '}]';
            }
            data = JSON.parse(data);
            return data;                    // return parsed object
      }