Я совершенно не знаком с 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, но в этом случае я не получу данные сразу, чтобы построить график, который побеждает мою цель.
Мой вопрос: Как я могу сделать эти вызовы параллельными, чтобы я начал получать все эти данные параллельно, и моя страница могла быть загружена за меньшее время?
Спасибо заранее.
Используя jQuery.when (отложенные):
$.when( $.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3") ).then(function(resp1, resp2, resp3){
// plot graph using data from resp1, resp2 & resp3
});
функция обратного вызова, вызываемая только после завершения всех 3 вызовов ajax.
Вы не можете сделать это с помощью async: false - код выполняется синхронно, как вы уже знаете (т.е. операция не будет запускаться до тех пор, пока предыдущий не завершится).
Вам нужно будет установить async: true (или просто опустить) - по умолчанию оно истинно). Затем определите функцию обратного вызова для каждого вызова AJAX. Внутри каждого обратного вызова добавьте полученные данные в массив. Затем проверьте, загружены ли все данные (arrayOfJsonObjects.length == 5). Если это так, вызовите функцию, чтобы делать все, что хотите, с данными.
Попробуйте сделать это следующим образом:
<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" не поддерживают синхронную работу. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, пока запрос активен...
В jQuery.ajax вы должны указать метод обратного вызова, как показано ниже:
j.ajax({
url : url0,
async : true,
dataType : 'json',
success:function(data){
console.log(data);
}
}
или вы можете напрямую использовать
jQuery.getJSON(url0, function(data){
console.log(data);
});
Вы не сможете справиться с этим, как ваш пример. Настройка 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
Похоже, вам нужно отправить запрос асинхронно и определить функцию обратного вызова, чтобы получить ответ.
То, как вы это сделали, будет ждать, пока переменная будет успешно назначена (что означает: ответ только что появился), пока не приступит к отправке следующего запроса. Просто используйте что-то вроде этого.
$.ajax({
url: url,
dataType: 'json',
data: data,
success: function(data) {
area0Obj = data;
}
});
Это должно сделать трюк.
вы можете объединить все функции различных функций ajax в 1 функцию ajax или из 1 функции ajax, вызвать другие функции (в этом случае они будут закрытыми/контроллерами), а затем вернет результат. Ajax-вызовы немного отстают, поэтому их минимизация - это путь.
вы также можете сделать аякс-функции асинхронными (которые тогда будут вести себя как обычные функции), тогда вы можете отобразить график в конце, после того как все функции вернут свои данные.
Вот решение вашей проблемы: http://jsfiddle.net/YZuD9/
У меня сработало следующее: у меня было несколько вызовов 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
}