0

我正在尝试在 jquery 中进行并发 ajax 调用，但我没有找到任何关于它的具体内容。当我进行 2 个 ajax 调用时，只有在第一个调用完成后才会启动另一个调用。我试过$.ajaxSetUp{(async: true)}了，但它没有按我想要的方式工作。谁能帮我这个？

[已编辑] 我有一个表单，在表单提交时我使用 form.js 的ajaxSubtmit，因为我的表单也有file input。

$("form").submit(function() {
  $(this).ajaxSubmit();
  $.getScript("url");
  return false; // to stop the normal working of form submit and submit form by ajax
})

这里只有在第一个完成后才调用第二个 ajax。

4

2 回答 2

1

所以这就是你所说的所谓竞争条件。为避免这种情况，您有两个选择，要么创建一个数组来存储每个请求，要么创建一个局部变量来存储每个请求。这是一个避免竞争条件的简单示例：

function customCallBack()
  {//    Ajax Status finished       http status OK
    if( (this.readyState == 4) && (this.status == 200) )
     {
       alert(this.responseText);
     }
  }

function anotherCallBack()
  {//    Ajax Status finished       http status OK
    if( (this.readyState == 4) && (this.status == 200) )
      {
        console.log(this.responseText);
      }
  }


function asyncPost(url, postArray, functionCallBack)
  {
    var request, query; //request must be a local var to avoid race condition
    query = '';
    for (i in postArray)//format post params
      {
        query += i + '=' + postArray[i] + '&';
      }
    try
      {//for modern browsers
        request = new XMLHttpRequest;
      }
    catch (err)
      {// legacy IE
        request = new ActiveXObject("Microsoft.XMLHTTP");
      }
       // your custom call back function
    request.onreadystatechange = functionCallBack;
    //            type   url  true for async call, false for sync call
    request.open("POST", url, true);

    //Header sent to indicate a post form
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    //making a post call
    request.send(query);
  };

//calling

asyncPost('yourUrl', {'field1' : 'value1', 'field2': 10}, customCallBack);

var post = new Array();
post['field1'] = 'value1';
post['field2'] = 10
//calling againg
asyncPost('anotherUrl', post, anotherCallBack);


// In jquery is like above, because you need the ajax call in a custom function
// and create a local var to hold your call:
function jqAjax(url)
  {
    var mycall  = $.get(url);
  }
于 2012-10-19T04:17:30.263 回答
0

两个 Ajax 调用都是独立的，如果第一个调用延迟完成，那么第二个调用独立继续，您可以进行任意数量的 ajax 调用：10、20、30 ...

要更改方法，请使用以下功能

function asyncCall(url, method, varArray, functionCallBack)
  {
    var request, query;
    query = '';
    for (i in postArray)//format params
      {
        query += i + '=' + postArray[i] + '&';
      }
    try
      {//for modern browsers
        request = new XMLHttpRequest;
      }
    catch (err)
      {// legacy IE
        request = new ActiveXObject("Microsoft.XMLHTTP");
      }
    request.onreadystatechange = functionCallBack;
    if(method == 'GET')
      {
        request.open("GET", url + '?' + query, true);
        request.send();
      }
    else
      {
        request.open("POST", url, true);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(query);
      }
  };
console.log('start 1');
asyncCall('url1', 'GET', {foo : 'bar'}, function(){console.log('Call 1');});
console.log('start 2');
asyncCall('url2', 'POST', {foo : 'bar'}, function(){console.log('Call 2');});
console.log('start 3');
asyncCall('url3', 'POST', {foo : 'bar'}, function(){console.log('Call 3');});
于 2012-10-19T11:41:45.443 回答