Легко забыть, что начальная "А" в "Аякс" означает "асинхронных", что означает, что, как только пользователь инициировал запрос Ajax, она может свободно заниматься другими делами в пользовательский интерфейс, в том числе решений других запросов Ajax . Как дизайнер веб-приложений вы должны принять во внимание, что ответы на эти запросы могут не поступать обратно в том же порядке они были сделаны. Если не взяться за это может иметь плачевные последствия для пользователей. Например, в типичной реализации Ajax, где пользователь выбирает страну из выпадающего списка стран, а затем представлен в раскрывающемся списке регионов в этой стране, вызов Ajax производится всякий раз, когда страна изменилась. Ответ на этот запрос будет список регионов в выбранной стране. Но предположим, что пользователь делает серию довольно быстрые изменения выбора, то, что проще сделать с помощью клавиатуры, что с помощью мыши. Скажите пользователь нажимает "U" ключ и первой страной, которая приходит это "Уганда". Это не то, что пользователь хочет, чтобы она попадает в "U" несколько раз, пока она не получает "Соединенное Королевство", а затем еще раз, чтобы получить один она действительно хотела: "Соединенные Штаты". Это вызывает целый ряд Ajax вызовов производится в последовательности, с последним из которых является призыв к "Соединенные Штаты". Но предположим, что ответ на ее "Соединенное Королевство" запрос задерживается по некоторым причинам. Это может быть связано с нагрузки на сервер, или он может быть недоступен для сетевой задержки. Но по какой причине, он прибыл после "Соединенные Штаты" ответ. Тогда пользователю будет предложен список "Соединенное Королевство" регионов, хотя ее выбор был "Соединенные Штаты".
Такое поведение явно нежелательно. Различные средства для этого были предложены, в том числе те, которые связаны с сервером выполнения просьб в строгом порядке (который игнорирует возможность того, что сетевой задержки на ответный матч может по-прежнему вызывают ответы приехать обратно на клиента из последовательности).
Однако, решение, предложенное ниже имеет силу того, что довольно просто, он не требует никакого специального кодирования на сервере, и он справляется со всеми классами задержки ответа, независимо от их причины. Идея заключается в поддержании простой очереди, содержащий все запросы, которые были сделаны и только на выходе результаты в правильной последовательности, независимо от порядка, в котором они прибывают.
Там должно быть какой-то способ определить, является ли конкретный запрос был завершен или нет. Для этого вы можете расширить класс MooTools Ajax так:
// Расширение класса Mootools Ajax.
Ajax = Ajax.extend({
initialize: function( url, options ) {
this.parent( url, options );
this.ready = false;
this.output = '';
},
onComplete: function() {
this.ready = true;
this.parent();
}
});
Это добавляет еще два свойства класса Ajax:
* ready это логическое значение, флаги ли ответ можно или нет, и
* output который используется для хранения ответ.
Имея расширенный класс Ajax, вам нужно создать простой механизм очереди провести запроса информации. Каждый новый запрос будет оттеснена на очереди и выполненных запросов будет извлекается из очереди. Весь фокус в том, чтобы убедиться, что если до завершения запроса старые запросы были завершены он остается в очереди и не удаляются из последовательности.
Очередь принимает форму простой массив, объявленный в глобальном масштабе:
var AJAX_QUEUE = [];
Window.addEvent код изменен так, чтобы объект Ajax помещается в очередь перед сделан запрос:
window.addEvent( 'domready', function() {
$('drop-down').addEvent( 'change', function() {
$( 'ajax-container' ).empty().addClass( 'ajax-loading' );
var url = 'index.php?option=com_component&args=whatever';
var a = new Ajax( url, {
method: 'get',
onComplete: function( response ){
// Ajax OnComplete код функции идет здесь.
}
});
AJAX_QUEUE.push( a );
a.request();
});
});
Затем вам нужно добавить дополнительный код для OnComplete функцию, которая будет завершена поп-запросов из очереди, но только в правильном порядке:
// Сохранить ответ в объекте Ajax.
this.output = response;
// Процесс очереди запросов.
while ( AJAX_QUEUE.length ) {
// Если старый запрос в очереди не готов, ничего не делать.
if ( !AJAX_QUEUE[0].ready ) break;
//Поп запрос из очереди.
r = AJAX_QUEUE.shift();
// Только выход к документу, когда очередь пуста.
if ( !AJAX_QUEUE.length ) {
$('ajax-container').removeClass('ajax-loading').setHTML(r.output);
}
}
Заметим, что выход только помещены в документ, когда очередь, наконец, пустой, так что пользователь никогда не видит результатов промежуточных запросов.
Если у вас есть несколько полей Ajax на одной странице, то вам нужно, чтобы дать каждому из своих собственных очереди, но кодирования остается практически то же самое.
