连续的Ajax调用

时间:2011-02-22 19:28:14

标签: jquery ajax url asynchronous

我的应用程序设计需要一些帮助。使用Ajax我希望连续获得一些PHP资源,但我不认为使用JQuery $.ajax方法检索它们是否合适。

我认为这样的事情意味着错误的设计:

$.ajax({
     url: SERVERURL+'index.php/home/checkAvailability',
     datatype: 'text',
     success: function(data){
        if(data == 'unavailable'){
           // do stuff
        }
        else{
           $.ajax({
              url: SERVERURL+'index.php/home/getWebTree/',
              dataType: 'json',
              success: function(data){
                 // do stuff
              }
           });
        }
     }
  });

有人可以给我一个建议,以获得更好的设计吗?我怎样才能以更好的方式做到这一点?

谢谢!

编辑:像@arnorhs告诉我们的那样,使用async参数可能是一个解决方案。但我仍然认为还有其他解决方案,而不是使用连续的ajax调用。

EDIT2:checkAvailabilitygetWebTree是使用CodeIgniter的PHP函数,我使用它来使用Http_Request对象从外部服务器获取资源。

function checkAvailability() {
      $this->load->library('pearloader');
      $http_request = $this->pearloader->load('HTTP', 'Request');
      $http_request->setURL('http://myurl');
      $http_request->_timeout = 5;
      $http_request->sendRequest();
      $res = 'available';
      if (!$http_request->getResponseCode())
         $res = 'unavailable';
      return $res;
   }

4 个答案:

答案 0 :(得分:12)

同时进行呼叫

如果你想同时进行所有ajax调用,你可以直接在其他调用之后调用ajax请求。您甚至可以为它们分配相同的成功处理程序。如果你想要一个更“优雅”的方法,我会做这样的事情:

// define a set of requests to perform - you could also provide each one
// with their own event handlers..
var requests = [
    { url: 'http://someurl', data: yourParams   },
    { url: 'http://someurl', data: yourParams   },
    { url: 'http://someurl', data: yourParams   },
    { url: 'http://someurl', data: yourParams   }
];

var successHandler = function (data) {
    // do something
}

// these will basically all execute at the same time:
for (var i = 0, l = requests.length; i < l; i++) {
    $.ajax({
        url: requests[i].url,
        data: requests[i].data,
        dataType: 'text',
        success: successHandler
    });
}

执行单个请求

我不知道您的用例,但当然您应该尝试做的是检索您在单个请求中检索的所有数据。这不会给您的服务器带来压力,网站/应用程序对用户来说似乎更快,并且是一种更好的长期方法。

我会尝试将checkAvailabilitygetWebTree合并为一个请求。不是将Javascript中的数据作为文本对象接收,更好的方法是将它们作为json数据接收。幸运的是,PHP提供了非常简单的函数来将对象和数组转换为json,因此您可以非常轻松地使用这些对象。

编辑:PHP代码中的小修改,现在我更了解您的用例。

在PHP / CI代码中是这样的:

function getRequestData () {
    if (checkAvailability() == 'available') {
        $retval = array (
            'available' => '1',
            'getWebTree' => getWebTree()
        );
    } else {
        $retval = array (
            'available' => '0'
        );
    }   
    header('Content-type: text/javascript; charset=UTF-8');     
    echo json_encode($retval););
}

然后,Javascript代码可以通过单个ajax请求访问它们:

$.ajax({
    url: 'http://yoururl/getRequestData',
    dataType: 'json',
    success: function (jsonData) {
        // we can now access the parameters like this:
        if (jsonData.checkAvailability) {
            // etc
        }
        //and of course do something with the web tree:
        json.getWebTree
    }
});

同步执行请求

如果将$ .ajax选项中的async参数设置为false,则将以同步方式创建函数,以便代码暂停,直到执行完成为止。或者如文档所述:

  

<强> asyncBoolean

     

默认值:true

     

默认情况下,所有请求都是异步发送的(默认情况下设置为true)。如果需要同步请求,请将此选项设置为false。跨域请求和dataType:“jsonp”请求不支持同步操作。请注意,同步请求可能会暂时锁定浏览器,并在请求处于活动状态时禁用任何操作。

请参阅http://api.jquery.com/jQuery.ajax/

答案 1 :(得分:10)

如果你真的需要进行两次调用,你可以使用jQuery 1.5中引入的Deffered更具表现力。

$.when(checkAvailability())
   .then(getWebTree())
   .fail(function(message){
       if(message === 'Not available!')
       {
           // do stuff
       }
   });

function checkAvailability(){
    var dfd = $.Deferred();

    $.ajax({
    url: SERVERURL+'index.php/home/checkAvailability',
    datatype: 'text',
    success: function(data){              
        if(data == 'unavailable'){
            dfd.reject("Not available!");
        }
        else{
           dfd.resolve();
        }
    }
    });

    return dfd.promise();
};

function getWebTree(){
    $.ajax({
        url: SERVERURL+'index.php/home/getWebTree/',
        dataType: 'json',
        success: function(data){
            // Do stuff
        }
    });
};

http://jsfiddle.net/jimmysv/VDVfJ/

现场查看

答案 2 :(得分:3)

听起来你可以使用jquery 1.5

新增的延迟对象

http://api.jquery.com/category/deferred-object/

答案 3 :(得分:0)

使用应该在回调中实时处理的命令进行编程,这就是你正在做的事情。

您正在定义一个关于请求成功的回调,并在触发和验证后发送另一个请求。

没错。

为了保持更好的可维护性,唯一的事情就是在调用之前将回调定义为函数,并给$ .ajax函数名称

function myFunc() {
    //Do stuff
}

$.ajax{ {
    success: myFunc
} );