Блог

При наведении курсора мыши на тег в Stackoverflow появляется всплывающая подсказка, как показано ниже. Вероятно, это реализовано с помощью jquery.append, поскольку он вставляет HTML-код в самый конец HTML-документа. После каждого события наведения после некоторой задержки времени выполняется запрос AJAX, возможно, через jquery.load(…)

Запрос URL, отправленный webapps.stackexchange.com это, например, _=1318962590136, который является динамическим идентификатором.

• 1) Как это работает на стороне клиента и сервера и каковы преимущества?

Полезная нагрузка для всплывающего окна — это HTML и выглядит следующим образом:

 <div><div class="tm-heading">...</div></div><span>.......</span>
  

При выходе из тега динамически загружаемый HTML удаляется.
Стили css уже присутствуют в загруженном css-листе сайта stackoverflow.

• 2) Кажется, что изначально объявленное событие не привязано к стилизованному <a> элементу ссылки, который составляет тег. Похоже, что объявлены только события наведения курсора мыши (проверяется через Chrome).

JavaScript-DeObfuscator дает некоторые подсказки: прослушиватели событий также динамически добавляются и удаляются…

 function (a, b, c) {
    a.removeEventListener amp;amp; a.removeEventListener(b, c, !1);
}
  

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

Но лучший способ сделать это (даже лучше, чем метод, о котором вы говорите в своем вопросе), — это метод, называемый Comet . Проще говоря, Comet означает, что клиент отправляет запрос на сервер, а затем ожидает ответа сервера (т. Е. Когда Данные на сервере обновляются). Это означает, что сервер вызывается только тогда, когда есть обновленные данные для отправки клиенту. Вот как (я считаю) Например, работает Facebook.