Ajax лучшая практика

Question

допустим, у меня есть следующая HTML-страница.

<A panel to display list of items>
  Item A
  Item B
  Item C
  ...

<A panel to display details about item>
  Details on item X:

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

Однако я хочу решить несколько проблем:

• Как мне предотвратить дублирование запросов. (например, пользователь нажимает ссылки на элементы A и B, прежде чем подробности элемента A возвращаются с сервера).
• Если я хочу отобразить «детали загружаются ...», где я должен поместить код?

Answer 1

вы можете зарегистрировать обработчики кликов, которые запускают ajax-запросы для загрузки данных.

Существует несколько способов справиться с вашей озабоченностью по поводу того, что вы не запускаете несколько запросов:

1. Просто отмените регистрациюобработчики других элементов, когда вы щелкаете по одному из них, и возвращаете их при возврате запроса.
2. В области действия обработчиков запросов, для которых вы устанавливаете свойство, может быть объект, например 'requestInProgress', что вы установили в true и false соответственно.Другими словами, используйте замыкания.

Отображение «детали загружается» очень просто - вы можете просто установить значение dom Panel или innerhtml, если хотите, для этого сообщения перед вами.запустите запрос и установите фактическое возвращаемое значение, когда запрос возвращается.

Обратите внимание, что многие библиотеки js, такие как jQuery, предоставляют API для выполнения запросов ajax, которые могут упростить вещи.Например, метод jQuery.ajax принимает объектный литерал, который может содержать функции beforeSend, complete, success, поэтому вы делаете вещи до, после и в случае успеха (среди других функций проверьте http://api.jquery.com/jQuery.ajax/)

Вы можете делать то, что хотите, с голым металлом js, но библиотеки могут облегчить вашу жизнь.

Answer 2

Что касается дублирующих запросов, я бы оставил последний объект XMLHttpRequest внутри переменной lastRequest. Всякий раз, когда я отправляю новый запрос, я проверяю эту переменную. Если он существует, позвоните lastRequest.abort(). Я также проверил бы в вашем успешном обратном вызове, что объект запроса совпадает с вашим lastRequest, в противном случае игнорируйте его. В jQuery это будет выглядеть так:

var lastRequest;

// Your click handler
$(".items").click(function () {
   if (lastRequest) lastRequest.abort();
   lastRequest = $.ajax({..., success: function (data, status, request) {
      if (request != lastRequest) return; // Ignore, it was aborted

      // Code to show the detail about the selected item
   }});

   // Code to show the in-progress message
});