Последовательные вызовы Ajax

Мне нужна небольшая помощь в разработке моего приложения. Используя 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
              }
           });
        }
     }
  });

Может ли кто-нибудь дать мне предложение получить лучший дизайн? Как я могу сделать то же самое лучше?

Спасибо!

EDIT: как @arnorhs говорят нам, использование параметра async может быть решением. Но я все еще думаю, что есть другие решения вместо использования последовательных вызовов ajax.

EDIT2: checkAvailability и getWebTree - это PHP-функции с использованием CodeIgniter, которые я разработал для получения ресурсов с внешнего сервера с помощью объекта 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;
   }

ОТВЕТЫ

Ответ 1

Выполнение вызовов все время

Если вы хотите одновременно выполнять все вызовы 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
    });
}

.

Сделайте один запрос

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

Я попытался бы объединить checkAvailability и getWebTree в один запрос. Вместо того, чтобы получать данные в 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
    }
});

.

Выполнять запросы синхронно

Если вы установите параметр async в параметрах $.ajax на false, функции будут выполняться синхронно, поэтому ваш код останавливается, пока выполнение не будет завершено. или в документации говорится:

asyncBoolean

По умолчанию: true

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

См. http://api.jquery.com/jQuery.ajax/

Ответ 2

Если вам действительно нужно сделать два вызова, вы можете быть более выразительными с Deffered, который был введен в jQuery 1.5.

$.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/

Ответ 4

Программирование с командами, которые должны обрабатываться в очереди в реальном времени от обратных вызовов, и это именно то, что вы делаете.

Вы определяете обратный вызов успеха вашего запроса и отправляете другой запрос после его запуска и проверки.

Ничего плохого в этом.

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

function myFunc() {
    //Do stuff
}

$.ajax{ {
    success: myFunc
} );