替代“async：false”用于连续的AJAX调用 [英] Alternative to "async: false" for successive AJAX calls
问题描述
我使用两个 AJAX GET 请求来从两个不同的来源获取数据。
在每个请求中，我解析响应数据，使用相关数据创建一个临时数组，这个临时数组放入主数组中。但是，这只适用于 AJAX 请求中包含async：false的情况，现在已被弃用。有没有另外一种方法可以编写这段代码？ （注意：虽然我在这个代码片段中使用了两个 AJAX 请求，但我可能需要在我正在处理的项目中使用总共四个请求。）
函数get_results（）{
$（document）.ready（function（）{
var master_array = [];
$ .ajax（{
类型：GET，
url：http //：www.source1.com，
dataType：xml，
async：false，
成功：函数（xml）{
$（xml）.find（'product'）。each（function（）{
var Average = $（this）.find（'Average' ）.text（）;
var Price = $（this）.find（'Price'）。text（）;
var name = $（this）.find（'Name'）。text ）;
var Url = $（this）.find（'Url'）。text（）;
var image = $（this）.find（'Image'）.text（）;
master_array.push（[Average，Price，Name，Url，Image]）;
}）;
}
}）;
$ .ajax（{
类型：GET，
url：http //：www。 source2.com，
dataType：xml，
async：false，
成功：函数（xml）{
$（xml）.find（'product'）。 each（function（）{
var Average = $（this）.find（'Average'）。text（）;
var Price = $（this）.find（'Price'）。text（）;
var Name = $（this）.find（'Name'）。text（）;
var Url = $（this）.find（'Url'）。text（）;
var Image = $（this）.find（'Image'）。text（）;
master_array.push（[Average，Price，Name，Url，Image]）;
}）;
}
}）;
}）;
}
一个JQuery $ .promise 对象。
当 return $ .ajax 它实际上有一些内置的方法，比如
$。done（）和 $ .when 。
在您的场景中，您希望在第一个Ajax请求完成之后执行Ajax函数。
$ b $因此，我们将创建两个变量，它们将代表您在代码中的两个Ajax请求。
就像我之前提到的，当您返回Ajax请求时，您实际上可以将它用作 $。promise 对象并享有它的优点，比如 $。done（）函数。
函数get_results（）{
$ （document）.ready（function（）{
var master_array = [];
var MyFirstFunction = function（）{
return $ .ajax（{
type：GET，
url：http //：www.source1。 （）
dataType：xml，
success：function（xml）{
$（xml）.find（'product'）。each（function（）{
var Average = $（this）.find（'Average'）。text（）;
var Price = $（this）.find（'Price'）。text（）;
var Name = $ （this）.find（'Name'）。text（）;
var Url = $（this）.find（'Url'）。text（）;
var Image = $（this）。 find（'Image'）。text（）;
master_array.push（[Average，Price，Name，Url，Image]）;
}）;
}
}） ;
};
MySecondFunction = function（）{
return $ .ajax（{
type：GET，
url：http //：www.source2。 （）
dataType：xml，
success：function（xml）{
$（xml）.find（'product'）。each（function（）{
var Average = $（this）.find（'Average'）。text（）;
var Price = $（this）.find（'Price'）。text（）;
var Name = $ （this）.find（'Name'）。text（）;
var Url = $（this）.find（'Url'）。text（）;
var Image = $（this）。 find（'Image'）。text（）;
master_array.push（[Average，Price，Name，Url，Image]）;
}）;
}
}） ;
};
//我们在分配变量之后使用它，因为如果将它放在它们之前，我们将会得到未定义，您可以在这里阅读更多关于它的信息：[吊装] [4]。
MyFirstFunction（）。done（MySecondFunction）;
}）;
}
I am using two AJAX GET requests to grab data from two different sources.
In each request I parse the response data, create a temporary array with the relevant data each item, and push this temporary array into a master array.
However, this only works if I include "async: false" in the AJAX request, which is now deprecated.
Is there an alternative way I could write this code? (NOTE: Although I am using two AJAX requests in this code snippet, I will probably need to use a total of four in the project I am working on).
function get_results() {
$(document).ready(function() {
var master_array = [];
$.ajax({
type: "GET",
url: "http//:www.source1.com",
dataType: "xml",
async: false,
success: function(xml) {
$(xml).find('product').each(function() {
var Average = $(this).find('Average').text();
var Price = $(this).find('Price').text();
var Name = $(this).find('Name').text();
var Url = $(this).find('Url').text();
var Image = $(this).find('Image').text();
master_array.push([Average, Price, Name, Url, Image]);
});
}
});
$.ajax({
type: "GET",
url: "http//:www.source2.com",
dataType: "xml",
async: false,
success: function(xml) {
$(xml).find('product').each(function() {
var Average = $(this).find('Average').text();
var Price = $(this).find('Price').text();
var Name = $(this).find('Name').text();
var Url = $(this).find('Url').text();
var Image = $(this).find('Image').text();
master_array.push([Average, Price, Name, Url, Image]);
});
}
});
});
}
You can achieve this by using a JQuery $.promise object.
When you return $.ajax it's actually has some built-in methods, such as
$.done() and $.when.
In your scenario you want to execute an Ajax function after the first Ajax request is done.
So we will create two variables that will represent the two Ajax requests you have in your code.
Like I mentioned earlier when you return Ajax request you actually can use it as a $.promise object and enjoy the advantages it has, such as the $.done() function.
function get_results() {
$(document).ready(function() {
var master_array = [];
var MyFirstFunction = function() {
return $.ajax({
type: "GET",
url: "http//:www.source1.com",
dataType: "xml",
success: function(xml) {
$(xml).find('product').each(function() {
var Average = $(this).find('Average').text();
var Price = $(this).find('Price').text();
var Name = $(this).find('Name').text();
var Url = $(this).find('Url').text();
var Image = $(this).find('Image').text();
master_array.push([Average, Price, Name, Url, Image]);
});
}
});
};
var MySecondFunction = function(){
return $.ajax({
type: "GET",
url: "http//:www.source2.com",
dataType: "xml",
success: function(xml) {
$(xml).find('product').each(function() {
var Average = $(this).find('Average').text();
var Price = $(this).find('Price').text();
var Name = $(this).find('Name').text();
var Url = $(this).find('Url').text();
var Image = $(this).find('Image').text();
master_array.push([Average, Price, Name, Url, Image]);
});
}
});
};
//We use it after the assignment of the variables because if would have put it before them we would got undefined, you can read more about it here:[Hoisting][4].
MyFirstFunction().done(MySecondFunction);
});
}
这篇关于替代“async：false”用于连续的AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
