Ajax — sendBeacon не всегда срабатывает при закрытии браузера


Содержание

JavaScript, браузеры, закрыть окно — отправить запрос AJAX или запустить script при закрытии окна

Я пытаюсь выяснить, когда пользователь покинул указанную страницу. Нет никаких проблем с поиском, когда он использовал ссылку внутри страницы, чтобы перейти от нее, но мне как-то нужно пометить что-то вроде, когда он закрыл окно или набрал другой URL-адрес и нажал кнопку ввода. Второй не так важен, но первый. Итак, вот вопрос:

Как я могу увидеть, когда пользователь закрыл мою страницу (событие capture window.close), а затем. на самом деле не имеет значения (мне нужно отправить запрос AJAX, но если я могу заставить его запустить предупреждение, Я могу сделать все остальное).

Есть события unload и beforeunload javascript, но они не являются надежными для запроса Ajax (не гарантируется, что запрос, инициированный в одном из этих событий, достигнет сервера).

Поэтому делать это настоятельно рекомендуется не, и вы должны искать альтернативу.

Если вам определенно нужно это, рассмотрите решение «ping». Отправляйте запрос каждую минуту, в основном говоря серверу «Я все еще здесь». Затем, если сервер не получает такой запрос более двух минут (вы должны учитывать задержки и т.д.), Вы считаете его неактивным.

Другим решением было бы использовать unload или beforeunload для выполнения запроса Sjax (синхронный JavaScript и XML), но это совершенно не рекомендуется. Выполнение этого в основном заморозит браузер пользователя до тех пор, пока запрос не будет завершен, что им не понравится (даже если запрос занимает мало времени).

1) Если вы ищете способ работы во всех браузерах, то самый безопасный способ — отправить синхронный AJAX на сервер. Это не очень хороший метод, но, по крайней мере, убедитесь, что вы не отправляете слишком много данных на сервер, и сервер работает быстро.

2) Вы также можете использовать асинхронный AJAX-запрос и использовать функцию ignore_user_abort на сервере (если вы используете PHP). Однако ignore_user_abort во многом зависит от конфигурации сервера. Убедитесь, что вы проверяете это хорошо.

3) Для современных браузеров не следует отправлять запрос AJAX. Вам следует использовать новый метод navigator.sendBeacon для асинхронной отправки данных на сервер без блокировки загрузки следующей страницы. Поскольку вы хотите отправить данные на сервер до того, как пользователь уйдет со страницы, вы можете использовать этот метод в обработчике события unload.

Там также, кажется, есть polyfill для sendBeacon. Он прибегает к отправке синхронного AJAX, если метод изначально не доступен.

ВАЖНО ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ: обратите внимание, что обработчик события unload не гарантированно будет запущен для мобильных телефонов. Но событие visibilitychange гарантированно будет запущено. Так что для мобильных устройств ваш код сбора данных может потребовать небольшой доработки.

Вы можете обратиться к моей статье в блоге для реализации кода всех трех способов.

Предотвращение зависания браузера при запросе AJAX

В настоящее время я пытаюсь отправить запрос, когда пользователь закрывает страницу. Я использую событие onbeforeunload .

Событие срабатывает, когда вкладка закрыта или страница обновлена. Мое событие выглядит следующим образом:

offline.php ( это не полный скрипт ):

Когда пользователь закрывает страницу, сценарий отменяет сеанс, установленный на странице чата. Через три секунды скрипт должен проверить, вернулся ли пользователь, но проверяет сеанс на onpage . Однако проблема возникает, когда я нажимаю кнопку обновления. При обновлении страница не загружается, поскольку три секунды прошли. Это приводит к разрушению всей моей системы.

Я попытался добавить ignore_user_abort(true); но это не решило мою проблему. Есть ли другой способ заставить это работать?

Примечание: это для чата. Когда пользователь закрывает страницу, он должен уведомить других пользователей в чате с сообщением «Пользователь ушел». Это не должно отображаться при обновлении. Когда пользователь возвращается на страницу, он должен уведомить других пользователей о том, что пользователь вернулся, с сообщением «Пользователь вошел».

4 ответа

Эта проблема

Боюсь, то, что вы пытаетесь сделать, на самом деле невозможно, так как во многих случаях onbeforeunload не onbeforeunload из-за реализации браузера, предпочтений пользователя, вашей любимой зебры, сбивающей ваш компьютер со стола и т. Д. ,

Из beforeunload документации Mozilla:

Также обратите внимание, что различные мобильные браузеры игнорируют результат события (то есть они не запрашивают у пользователя подтверждения). Firefox имеет скрытое предпочтение в about: config, чтобы сделать то же самое. По сути, это означает, что пользователь всегда подтверждает, что документ может быть выгружен.

Решение

Однако это не означает, что обработка пользователей, находящихся в автономном режиме, невозможна.


Большинство веб-приложений чата вместо этого используют биение (обычный пинг-подобный запрос) и используют расстояние между последними пингами для определения отключений пользователя. В качестве дополнительного примечания я бы рекомендовал разрешить более широкое окно, чем три секунды, для определения отключений пользователей, поскольку существует множество причин, по которым эхо-запрос может не выполнить его в течение трехсекундного периода.

Стратегия реализации

У вас есть несколько вариантов реализации пинга. Чаще всего люди используют window.setTimeout для вызова эхо-запроса, который перезапускает window.setTimeout при завершении или сбое, обычно удваивая задержку при последующих сбоях, чтобы вы не блокировали потенциально перегруженную службу.

setTimeout для Ping:

А как насчет window.setInterval вместо этого? Не будет ли мой код короче?

Пожалуйста, не делай этого. Моя заметка о «перегрузке перегруженного сервиса»? Будет намного хуже, если ты сделаешь это.

Вы действительно не должны onbeforeunload на onbeforeunload или beforeunload так как браузер не должен требовать от себя что-либо делать от вашего имени прямо перед тем, как пользователь закроет вашу веб-страницу. Если это произойдет, это откроет целый путь для атаки вредоносного кода, где вы никогда не сможете закрыть страницу (подумайте, переходя на торрент-сайт и открывая две страницы каждый раз, когда вы нажимаете на любой элемент DOM, только теперь каждый раз, когда пользователь пытается закрыть вкладку, запускается рекурсивный цикл и предотвращает их выход, не убивая браузер через диспетчер задач).

Heartbeats

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

Веб-сокеты

Современный способ создания чего-то вроде системы чата — это использование веб-сокетов. Это постоянные соединения, устанавливаемые сервером между вашим веб-браузером и сервером. На традиционной веб-странице сервер всегда реагирует на действия клиента. Клиент делает запрос, сервер отвечает; этот процесс повторяется снова и снова. Сервер никогда не говорит клиенту, что делать, а затем ждет ответа клиента. Благодаря веб-сокетам вместо этого одностороннего канала связи у нас есть конвейер, который обеспечивает непрерывно открытое соединение с двунаправленной связью.

Создание веб-сокетов

Это не тривиальная задача. Из ворот есть много стандартного кода, который вам нужно было бы написать для работы некоторых базовых функций. Но хорошая новость в том, что вам не нужно этого делать. Существует несколько сторонних SDK / сервисов JavaScript, которые инкапсулируют всю логику реализации браузера на уровне земли и предоставляют вам простой и понятный интерфейс. Подумайте об их отношении к веб-сокетам как к тому, что jQuery представлял для простого JavaScript Они стандартизируют все для вас, поэтому вам не нужно беспокоиться о написании низкоуровневой реализации веб-сокетов и синхронизации кросс-браузерной совместимости.

Один из моих любимых сервисов веб-сокетов — Firebase . По совпадению, демонстрационный проект, который они демонстрируют на своем веб-сайте, представляет собой приложение для чата в реальном времени, созданное с использованием поддержки веб-сокетов, которую предоставляет их служба. Firebase может быть настроен как независимый источник базы данных, если вы хотите, чтобы это было так. Или его можно просто использовать в качестве средства связи между вашей традиционной базой данных SQL (которая связывается с ней через API RESTful) и клиентскими устройствами (браузерами, приложениями и т. Д.).

JavaScript, браузеры, закрыть окно — отправить запрос AJAX или запустить script при закрытии окна

13 zozo [2011-05-28 17:19:00]

Я пытаюсь выяснить, когда пользователь покинул указанную страницу. Нет никаких проблем с поиском, когда он использовал ссылку внутри страницы, чтобы перейти от нее, но мне как-то нужно пометить что-то вроде, когда он закрыл окно или набрал другой URL-адрес и нажал кнопку ввода. Второй не так важен, но первый. Итак, вот вопрос:

Как я могу увидеть, когда пользователь закрыл мою страницу (событие capture window.close), а затем. на самом деле не имеет значения (мне нужно отправить запрос AJAX, но если я могу заставить его запустить предупреждение, Я могу сделать все остальное).

javascript browser javascript-events window

6 ответов

23 Решение Felix [2011-05-28 17:31:00]

Есть события unload и beforeunload javascript, но они не являются надежными для запроса Ajax (не гарантируется, что запрос, инициированный в одном из этих событий, достигнет сервера).

Поэтому делать это настоятельно рекомендуется не, и вы должны искать альтернативу.

Если вам определенно нужно это, рассмотрите решение «ping». Отправляйте запрос каждую минуту, в основном говоря серверу «Я все еще здесь». Затем, если сервер не получает такой запрос более двух минут (вы должны учитывать задержки и т.д.), Вы считаете его неактивным.

Другим решением было бы использовать unload или beforeunload для выполнения запроса Sjax (синхронный JavaScript и XML), но это совершенно не рекомендуется. Выполнение этого в основном заморозит браузер пользователя до тех пор, пока запрос не будет завершен, что им не понравится (даже если запрос занимает мало времени).

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

Чтобы сделать запрос доступным для сервера, мы попытались сделать код ниже: —

Цукерберг рекомендует:  Javascript - Помогите с программированием на JS


Мы используем браузер IE, а теперь, когда пользователь закрывает браузер, он получает диалог подтверждения из-за return «»; и ждет подтверждения пользователя, и это время ожидания заставляет запрос добраться до сервера.

Я согласен с идеей Феликса, и я решил проблему с этим решением, и теперь я хочу очистить решение Server Side:

1. передать запрос с клиентской стороны серверу

2.save время последнего запроса, полученного в переменной

3. Проверьте время сервера и сравните его с переменной последней полученной Запрос

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

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

Обычно браузер закрывается до выполнения xhr.send(). Chrome и edge выглядят так, что они ждут, когда цикл событий javascript будет опущен до закрытия окна. Они также запускают запрос xhr в другом потоке, чем цикл событий javascript. Это означает, что если вы можете держать цикл событий достаточно длинным, xhr успешно сработает. Например, я протестировал отправку запроса xhr, а затем счет до 100 000 000. Это работало очень последовательно как для хрома, так и для меня. Если вы используете angularjs, перенос вашего вызова на $http in $apply завершает то же самое.

IE, похоже, немного отличается. Я не думаю, что IE ждет, пока цикл цикла не будет опущен, или даже для текущего стека стека. Хотя иногда он будет правильно отправлять запрос, то, что кажется гораздо чаще (80% -90% времени), заключается в том, что IE закроет окно или вкладку до того, как запрос xhr будет полностью выполнен, что приведет лишь к частичному сообщению послан. В основном сервер получает почтовый запрос, но нет тела.

Для потомков здесь код, который я использовал, был прикреплен как функция window.onbeforeunload для прослушивания:

1) Если вы ищете способ работы во всех браузерах, самым безопасным способом является отправка синхронного AJAX на сервер. Это не хороший метод, но, по крайней мере, убедитесь, что вы не отправляете слишком много данных на сервер, а сервер работает быстро.

2) Вы также можете использовать асинхронный запрос AJAX и использовать функцию ignore_user_abort на сервере (если вы используете PHP). Однако ignore_user_abort сильно зависит от конфигурации сервера. Убедитесь, что вы хорошо его протестировали.

3) Для современных браузеров вы не должны отправлять запрос AJAX. Вы должны использовать новый метод navigator.sendBeacon для асинхронной отправки данных на сервер и без блокировки загрузки следующей страницы. Поскольку вы хотите отправить данные на сервер до того, как пользователь переместится со страницы, вы можете использовать этот метод в обработчике события разгрузки.

Кажется, что polyfill для sendBeacon. Он прибегает к отправке синхронного AJAX, если метод не доступен изначально.

ВАЖНО ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ: Обратите внимание, что обработчик событий выгрузки не может быть запущен для мобильных телефонов. Но ожидается, что событие visibilitychange будет запущено. Поэтому для мобильных устройств ваш код сбора данных может потребоваться немного подстраивать.

Вы можете ссылаться на мою статью статью в блоге для реализации кода всеми тремя способами.

Ajax — sendBeacon не всегда срабатывает при закрытии браузера

27162 просмотра

9 ответа

4112 Репутация автора

Я пытаюсь выяснить, когда пользователь покинул указанную страницу. Нет проблем с поиском, когда он использовал ссылку внутри страницы для навигации, но мне нужно что-то отметить, например, когда он закрыл окно или набрал другой URL и нажал клавишу ввода. Второй не так важен, но первый. Итак, вот вопрос:

Как я могу увидеть, когда пользователь закрыл мою страницу (захват события window.close), а затем . на самом деле не имеет значения (мне нужно отправить запрос AJAX, но если я могу заставить его запустить оповещение, я могу сделай все остальное).

Ответы (9)

-4 плюса

1487 Репутация автора

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

31 плюса


65558 Репутация автора

Существуют unload и beforeunload события javascript, но они не являются надежными для запроса Ajax (не гарантируется, что запрос, инициированный в одном из этих событий, достигнет сервера).

Поэтому делать это крайне не рекомендуется, и вы должны искать альтернативу.

Если вам это определенно необходимо, рассмотрите решение в стиле «ping». Отправляйте запрос каждую минуту, в основном говоря серверу «Я все еще здесь». Затем, если сервер не получает такой запрос более двух минут (необходимо учитывать задержки и т. Д.), Клиент считается отключенным.

Другим решением может быть использование unload или beforeunload выполнение запроса Sjax (синхронный JavaScript и XML), но это совершенно не рекомендуется. В результате этого браузер пользователя будет зависать до тех пор, пока запрос не будет завершен, что им не понравится (даже если запрос занимает мало времени).

Автор: Felix Размещён: 28.05.2011 02:31

-1 плюса

217 Репутация автора

Я согласен с идеей Феликса, и я решил свою проблему с этим решением, и теперь я хочу очистить решение на стороне сервера:

1. отправить запрос со стороны клиента на сервер

2. время последнего запроса, полученного в переменной

3. Проверьте время сервера и сравните его с переменной последнего полученного запроса.

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

3 плюса

49 Репутация автора

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

Чтобы запрос дошел до сервера, мы попробовали следующий код: —

Мы используем браузер IE, и теперь, когда пользователь закрывает браузер, он получает диалоговое окно подтверждения, поскольку return «»; & ожидает подтверждения пользователя, и это время ожидания делает запрос на доступ к серверу.

плюса

104 Репутация автора

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

Обычно браузер закрывается до фактического выполнения xhr.send (). Chrome и ребро выглядят так, как будто они ждут, пока цикл событий javascript опустеет, прежде чем закрывать окно. Они также запускают запрос xhr в другом потоке, нежели цикл событий javascript. Это означает, что если вы сможете поддерживать цикл событий достаточно долго, xhr будет успешно запущен. Например, я протестировал отправку запроса xhr, а затем подсчитал до 100 000 000. Это работало очень последовательно и в хроме и в крае для меня. Если вы используете angularjs, завершение вызова в $ http в $ apply делает то же самое.

IE кажется немного другим. Я не думаю, что IE ждет, пока цикл событий опустеет, или даже текущий кадр стека опустеет. Хотя иногда он правильно отправляет запрос, кажется, что гораздо чаще (80% -90% времени) происходит то, что IE закрывает окно или вкладку до полного выполнения запроса xhr, что приводит только к частичному сообщению послан. В основном сервер получает почтовый запрос, но тела нет.

Для потомков вот код, который я использовал в качестве функции прослушивателя window.onbeforeunload:

18 плюса

428 Репутация автора

1) Если вы ищете способ работы во всех браузерах, то самый безопасный способ — отправить синхронный AJAX на сервер. Это не очень хороший метод, но, по крайней мере, убедитесь, что вы не отправляете слишком много данных на сервер, и сервер работает быстро.


2) Вы также можете использовать асинхронный AJAX-запрос и использовать функцию ignore_user_abort на сервере (если вы используете PHP). Однако ignore_user_abort во многом зависит от конфигурации сервера. Убедитесь, что вы проверяете это хорошо.

3) Для современных браузеров не следует отправлять запрос AJAX. Вам следует использовать новый метод navigator.sendBeacon для асинхронной отправки данных на сервер без блокировки загрузки следующей страницы. Поскольку вы хотите отправить данные на сервер до того, как пользователь уйдет со страницы, вы можете использовать этот метод в обработчике события unload .

Там также, кажется, есть polyfill для sendBeacon . Он прибегает к отправке синхронного AJAX, если метод изначально не доступен.

ВАЖНО ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ: обратите внимание, что обработчик события unload не гарантированно будет запущен для мобильных телефонов . Но событие visibilitychange гарантированно будет запущено. Так что для мобильных устройств ваш код сбора данных может потребовать небольшой доработки.

Вы можете обратиться к моей статье в блоге для реализации кода всех трех способов.

16 плюса

463 Репутация автора

Чтобы прояснить ситуацию, в 2020 году API-интерфейс Beacon является решением этой проблемы ( практически в каждом браузере )

Запросы маяка гарантированно инициируются до того, как страница выгружена, и они выполняются до конца, не требуя запроса на блокировку.

Вы можете использовать его внутри onunload события и быть уверенным, что оно будет отправлено.

Автор: Baishu Размещён: 24.02.2020 08:47

плюса

1 Репутация автора

Попробуй это. Я решил эту проблему в javascript, отправив ajax-вызов на сервер при просмотре или закрытии вкладки. У меня была проблема с обновлением страницы, потому что на функции onbeforeunload, включая обновление страницы. performance.navigation.type == 1 должен изолировать обновление от закрытия (в браузере mozzila).

плюса

4112 Репутация автора

Спустя годы после публикации вопроса я улучшил реализацию, включая nodejs и socket.io ( https://socket.io ) (в этом случае вы можете использовать любой вид сокетов, но это был мой личный выбор).

По сути, я открываю соединение с клиентом, а когда он зависает, я просто сохраняю данные / делаю все, что мне нужно. Очевидно, что это нельзя использовать для показа чего-либо / перенаправления клиента (поскольку вы делаете это на стороне сервера), но это то, что мне действительно было нужно тогда.

Итак . в настоящее время я думаю, что это будет лучше (хотя и сложнее реализовать, потому что вам нужен узел, сокет и т. Д., Но это не так сложно; должно занять около 30 минут или около того, если вы делаете это впервые) подход, чем выгрузить версию.

Скрипт всплывающего окна при закрытии страницы

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

Сегодня и поговорим на эту тему, и я покажу простую реализацию.

Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его — уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают. Я думаю, попробовать стоит, а там, на основе статистики, АА и АБ тестов делать уже конкретные выводы относительной вашей ниши и продукта.

Цукерберг рекомендует:  Слайдшоу на jmpress.js

Как сделать всплывающее окно при закрытии страницы

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек javascript кода. Раньше, модальное окно появлялось при первом посещении сайта. Сейчас оно будет показываться только при первом посещении сайта (когда курсор покидает основную область сайта и переходит в район вкладок). Если пользователь еще раз зайдет на сайт, то у него не будет показываться это окно. Реализовано это точно так же, как и в прошлой статье, при помощи cookie. Кука хранится 7 дней, можете указать любое количество на свое усмотрение.

И еще, мы не вешаем событие на клик по крестику во вкладке, а просто проверяем положение курсора. Мы не блокируем окно, кнопки и прочее, ничего не требуем, а просто показываем окошко.

Как и в прошлый раз, будем использовать jQuery плагин arcticModal, а значит подключаем сам jQuery:


Далее подключаем сам плагин, у меня он так и лежит в папке libs, поэтому такой путь:

И подключаем тему плагина, я пользуюсь стандартной, но вы можете написать и свою:

Теперь, чтобы работали наши cookie — добавим плагин cookies от Яндекса:

И подключаем скрипт config.js со следующим содержимым:

Если читали прошлую статью, то заметили, что ничего не поменялось, кроме того, что немного видоизменился скрипт в файле config.js. То есть просто появилось еще одно условие, которое срабатывает, когда курсор покидает область сайта, то есть находиться в районе вкладок.

Кстати, в прошлый раз забыл объяснить, что означают эти параметры:

  • closeOnOverlayClick — позволяет закрыть окно при клике на любую область в не окна.
  • closeOnEsc — закрывает окно при нажатии на Escape

Теперь о самой разметке страницы. Не изменилось ровным счетом — ничего.

Немного объясню. modalInner — обертка модального окна, с display:none в стилях. offer — класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.

Вот такая простая реализация всплывающего окна при закрытии страницы. А как вы считаете, стоит ли использовать подобный эффект на сайте?

Уроки JavaScript – не работают события jQuery после AJAX загрузки

Если вы используете AJAX на своем сайте, имейте в виду, что такие события, как клик (click), отправка (submit), наведение (hover), могут не работать, если вы не прикрепите их правильно. В сегодняшней статье мы рассмотрим практическое решение проблемы, когда не срабатывают события в jQuery после динамического изменения страницы (или AJAX).

Описание задачи

Допустим, у нас есть блоки с заголовком и скрытым контентом в теге

. По клику на заголовке, скрытый контент показывается/прячется с помощью функции toggle() :

Потом мы загружаем новые элементы (блоки) без перезагрузки страницы с помощью AJAX. Когда мы перезагружаем страницу – все работает нормально, но если новые элементы подгружаются AJAX’ом, — не работает функция toggle() .

Вариант решения №1

Событие click прикрепляется к существующим элементам после полной загрузки страницы. Ключевое слово здесь – существующим. Когда мы загружаем что-то с помощью AJAX, мы манипулируем DOM. Мы размещаем абсолютно новый элемент, который не существовал при загрузке страницы. Поэтому нам нужно прикрепить это событие после подгрузки нового контента. Если вы используете функцию .load() (которая загружает данные с сервера и помещает возвращенный HTML в соответствующие элементы), вам просто нужно поместить функцию click() в функцию обратного вызова:

Так мы прикрепляем событие click и к новым добавленным элементам.

Если вы используете функцию .ajax() вместо .load() , просто присоедините событие к функции .done() (которая добавляет обработчик, что будет вызываться при обработке отложенного объекта) AJAX вызова.

Вариант решения №2

Что делать, если мы не хотим прикреплять событие каждый раз, когда вызывается AJAX? Для этого есть другое, более «глобальное» решение. Мы можем использовать функцию .on() .

Функция .click() похожа с .on(‘click’) , но здесь есть одна важная часть – при второй функции мы можем делегировать событие. Преимущество делегированных событий заключается в том, что они могут обрабатывать события для элементов-потомков, которые добавляются в документ позднее (например, при AJAX).

Поэтому вместо того, чтобы прикреплять событие click к завершенному AJAX, мы просто добавляем его более «глобально»:

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


Делегированное событие должно быть присоединено к элементу, который существует на странице в то время, когда ваш код выполняет вызов, и не изменяется во время AJAX вызовов.

В более ранних версиях jQuery вместо .on() использовались функции .live() (устарела с версии jQuery 1.9) или .delegate() (устарела с версии jQuery 3.0).

Ajax — sendBeacon не всегда срабатывает при закрытии браузера

Что такое — Mozilla Firefox

Mozilla Firefox — это свободно распространяемый веб-браузер. Он основан на исходном коде Mozilla Application Suite, созданном почти с нуля вместо кода Netscape. Так-же он использует открытый портируемый движок Gecko, разработанный с учётом поддержки открытых стандартов.
Авторами проекта Firefox являются Блейк Росом и Дейв Ха́йет, в то время они работали в Netscape Communications, бывшей в составе AOL Time Warner.
Первыя выпуск вышел в свет 23 сентября 2002года, под названием «Phoenix» («Феникс»), потом, из‑за конфликтов торговых знаков, был переименован в «Firebird» («Жар-птица»), но по схожей причине пришлось вновь переименовать, уже на «Firefox». Однако и «Firefox» оказался торговым знаком компании The Charlton Company. Но разногласия были решены.
Firefox переводят как «огненная лиса», но это неправильно. Дословный перевод кит. 火狐 (пиньинь: hǔo hъ), которым китайцы иногда называют малую панду, в честь которой, по словам разработчиков, и назван браузер.
На обычную панду она мало похожа и выглядит как крупная рыжая кошка. Именно red panda (она же малая панда) изображена на логотипе Firefox.

Сообщение отредактировал Мрачный — 06.09.13, 17:11

Сообщение отредактировал KOT-BE3DEXOD — 12.09.16, 21:41

Справка по Firefox

Можно сделать экспресс-панель, как в Opera?

Да, можно. Для этого надо установить расширение Speed Dial. Я советую FVD Speed Dial. Да, и кроме того, с помощью этого дополнения ваша экспресс-панель станет намного функциональнее, чем в Opera.

Сообщение отредактировал Мрачный — 06.09.13, 12:20

Расширенный редактор настроек Firefox.

Configuration Mania
Данным дополнением пользуйтесь очень осторожно и только в случае крайней необходимости. Вся ответственность за последствия ложится исключительно на вас. )

Как перенести все настройки, темы и дополнения на другой компьютер?

Для восстановления точной копии вашей экспресс-панели на другом компьютере понадобится EverSync, входящий в состав FVD Speed Dial, но который надо будет устанавливать дополнительно.
Для восстановления всех ваших дополнений, тем, закладок, настроек, паролей, куки, истории и т. п. можно воспользоваться FEBE

Страницы в браузере прокручиваются рывками и без плавности.

Установите Yet Another Smooth Scrolling, настройте как вам удобно и радуйтесь.

Медленный запуск Firefox

Скорость запуска зависит от установленных дополнений, а также числа закладок и объёма журнала.
Отключите или удалите все те расширения, в нужности которых Вы сомневаетесь, и те, которые слишком сложны, так как они дают бо́льшую нагрузку на браузер. Отключите и по возможности удалите плагины, кроме нужных вам. Обычно нужен только Shockwave Flash. Если у Вас установлено несколько версий одного плагина — оставьте только последнюю.
Закладки влияют, если их сотни или тысячи. Сделайте резервную копию всех закладок в формате HTML (Ctrl+Shift+H — импорт и резервирование), затем удалите всё лишнее. Часто легче найти информацию через Яндекс или Google, чем искать одну из ста закладок.
Очистите журнал и установите ограничение максимального времени хранения истории: откройте страницу about:config и установите значение browser.history_expire_days в днях. Оно не должно быть меньше значения параметра browser.history_expire_days_min (это значение устанавливается через настройки Firefox).

Если перечисленные выше меры не помогли, установите программу Firefox Preloader. Она обеспечивает частичную загрузку программы Mozilla Firefox в оперативную память при включении компьютера. Это несколько сказывается на быстродействии компьютера в целом, но надёжно решает проблему медленного запуска.

Какие файлы нужно переносить для сохранения всех своих настроек?

signons.sqlite + key3.db — все сохранённые пароли. Эти файлы нужно переносить обязательно вместе.
places.sqlite — вся ваша история посещённых страниц и закладки.
formhistory.sqlite — история всех введённых запросов в разные формы.
cookies.sqlite — все ваши куки.
sessionstore.js — вся ваша текущая «сессия», т.е. последние открытые и закрытые вкладки.
permissions.sqlite — все настройки «разрешений» для сайтов, которые вы можете посмотреть открыв about:permissions страницу.
папка searchplugins + файл search.sqlite — все установленные вами поисковые машины.
prefs.js — все настройки из about:config, часто является причиной различных глюков, так что целиком его переносить не рекомендуется (если только проблема не в нём). Часто, проблема заключается в каких-то определённых записях из этого файла и вы можете методом пополовинного удаления за 10-11 перезапусков браузера определить какая запись вызывает глюк.
user.js — здесь хранятся такие же настройки как и в предыдущем файле, только при каждом запуске браузера все настройки из этого файла — переписываются в предыдущий (даже если они там были с другими значениями или отсутствовали вообще). Удобен для хранения всех важных настроек браузера, чтобы не настраивать его заново каждый раз при обновлении вашего профиля. Если вы вписываете в него только «безопасные» настройки, то можете его смело переносить в новый профиль.

Отключение устаревших плагинов.

В последних версиях Firefox в целях повышения безопасности устаревшие, а следовательно потенциальноуязвимые плагины принудительно отключаются, и при попытке их использования появляется уведомление


Удалите в каталоге профиля файлы extensions.ini, extensions.cache, extensions.rdf, extensions.sqlite.
Ещё одной причиной такого поведения может быть атрибут «Только для чтения» выставленный на отдельные (или на все) файлы внутри вашего профиля.
Для того, чтобы его снять — кликните правой кнопкой мыши по папке профиля и выберите пункт «Свойства».
В открывшемся окне на вкладке «Общие» снимите галку напротив пункта «Только для чтения», затем нажмите кнопку «Применить» и можете закрыть это окно.

Где находится профиль Mozilla Firefox.

Путь к профилю:
Windows XP — C:\Documents and Settings\имя пользователя\Application Data\Mozilla\Firefox\Profiles\
Windows Vista и Windows 7 — C:\Users\имя пользователя\AppData\Roaming\Mozilla\Firefox\Profiles\
На Windows XP, Windows Vista и Windows 7 вы также можете ипользовать следующий путь для поиска папки профиля, даже если он является скрытым: %APPDATA%\Mozilla\Firefox\Profiles\

Как запустить Firefox в безопасном режиме.

В безопасном режиме все настройки Firefox временно сбрасываются на стандартные, а все расширения и темы временно отключаются.

  • В главном меню Firefox выберите Справка — Перезапустить с отключёнными дополнениями и щёлкните «OK» для перезапуска браузера.
  • В открывшемся окне щёлкните по кнопке «Продолжить в безопасном режиме».
  • Для выхода из безопасного режима просто закройте все окна Firefox.
  • Убедитесь, что все окна и процессы Firefox закрыты.
  • Запустите Firefox любым способом с зажатой клавишей Shift.
  • В открывшемся окне щёлкните по кнопке «Продолжить в безопасном режиме».
  • Для выхода из безопасного режима просто закройте все окна Firefox.
  • Убедитесь, что все окна и процессы Firefox закрыты.
  • В Win7 откройте меню «Пуск» (в WinXP нажмите Win+R), наберите firefox -safe-mode и нажмите Enter.
  • В открывшемся окне щёлкните по кнопке «Продолжить в безопасном режиме».
  • Для выхода из безопасного режима просто закройте все окна Firefox.

Сообщение отредактировал Мрачный — 06.09.13, 14:08

Расплываются буквы на сайтах (цветные артефакты)

Проблема возникает после установки обновления KB2670838 от Microsoft (идёт вместе с Internet Explorer 10) на системах с относительно старыми видеокартами AMD, реже Intel. В некоторых случаях обновление также вызывает синий экран смерти.
Варианты решения проблемы:
1. Отключить аппаратное ускорение в Firefox (Настройки → Дополнительные → Общие → По возможности использовать аппаратное ускорение).
2. Удалить обновление KB2670838

Как полностью удалить Firefox.

Сделайте экспорт закладок (Управление закладками — Экспорт в HTML) и паролей (с помощью расширений Password Exporter или LastPass Password Manager или с помощью «Синхронизации» Firefox) и удалите Firefox с помощью программы Revo Uninstaller Free в расширенном режиме с удалением профилей пользователей.
Затем установите Firefox.
Не делайте экспорт-импорт дополнений (так как при этом сохраняются многие проблемы) — лучше установите их заново.


Как узнать информацию о кэше и его содержимом?

Как исправить AJAX всегда срабатывает при проверке окна?

Иногда это AJAX пожары и иногда это не так, позвольте мне объяснить.

habit.js

Она срабатывает только после того, как я загружаю показать страницу и обновить его, так что терминал выглядит следующим образом:

Просто загрузки страницы шоу один раз не будет делать эту работу, потому что галочка не сгореть AJAX (Обратите внимание, все GET выше и отсутствие GET ниже, я думаю, что это что-то делать с turbolinks).

Это шоу страница вызывает AJAX

Это то , что AJAX пожары, days_missed_controller.rb .

Вот суть этого. Извините , я новичок в AJAX и получил помощь с этим так моим уровнем описания может быть элементарным. Пожалуйста , не стесняйтесь обращаться к нам для дальнейшего уточнения или кода: -]

ОБНОВИТЬ

Итак, другими словами, если пользователь загружает шоу страницу, а затем проверяет флажки ничего не посылается на сервер; Если пользователь загружает шоу страницы, а затем обновляет его проверяет флажки этого POST сделан на сервере:

jQuery для начинающих. Часть 3. AJAX

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов.

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы.

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

// по окончанию загрузки страницы
$ ( document ) . ready ( function ( ) <
// вешаем на клик по элементу с >
$ ( ‘#example-1’ ) . click ( function ( ) <
// загрузку HTML кода из файла example.html
$ ( this ) . load ( ‘ajax/example.html’ ) ;
> )
> ) ;

jQuery.ajax

$. ajax ( <
url : ‘/ajax/example.html’ , // указываем URL и
dataType : «json» , // тип загружаемых данных
success : function ( data , textStatus ) < // вешаем свой обработчик на функцию success
$. each ( data , function ( i , val ) < // обрабатываем полученные данные
/* . */
> ) ;
>
> ) ;

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-3’ ) . click ( function ( ) < // вешаем на клик по элементу с >
$. post ( ‘ajax/example.xml’ , < >, function ( xml ) < // загрузку XML из файла example.xml
$ ( ‘#example-3’ ) . html ( » ) ;
$ ( xml ) . find ( ‘note’ ) . each ( function ( ) < // заполняем DOM элемент данными из XML
$ ( ‘#example-3’ ) . append ( ‘To: ‘ + $ ( this ) . find ( ‘to’ ) . text ( ) + ‘
‘ )
. append ( ‘From: ‘ + $ ( this ) . find ( ‘from’ ) . text ( ) + ‘
‘ )
. append ( ‘‘ + $ ( this ) . find ( ‘heading’ ) . text ( ) + ‘
‘ )
. append ( $ ( this ) . find ( ‘body’ ) . text ( ) + ‘
‘ ) ;
> ) ;
> , ‘xml’ ) ; // указываем явно тип данных
> )
> ) ;


version = «1.0» encoding = «UTF-8» ?>
>
> Tove >
> Jani >
> Reminder >
> Don’t forget me this weekend! >
>

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-4’ ) . click ( function ( ) < // вешаем на клик по элементу с >
$. getJSON ( ‘ajax/example.json’ , < >, function ( json ) < // загрузку JSON данных из файла example.json
$ ( ‘#example-4’ ) . html ( » ) ;
// заполняем DOM элемент данными из JSON объекта
$ ( ‘#example-4’ ) . append ( ‘To: ‘ + json. note . to + ‘
‘ )
. append ( ‘From: ‘ + json. note . from + ‘
‘ )
. append ( ‘‘ + json. note . heading + ‘
‘ )
. append ( json. note . body + ‘
‘ ) ;
> ) ;
> )
> ) ;

<
note : <
to : ‘Tove’ ,
from : ‘Jani’ ,
heading : ‘Reminder’ ,
body : ‘Don \’ t forget me this weekend!’
>
>

jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

  1. url запрашиваемого скрипта
  2. callback функция, которой будет скормлен результат (необязательный параметр)

function testAjax ( ) <
$ ( ‘#example-5’ ) . html ( ‘Test completed’ ) ; // изменяем элемент с >
>

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

  • Google — поиск и большинство сервисов
  • Yahoo — поиск и большинство сервисов
  • Flickr
  • MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
  • Digg
  • CNET
  • aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с >

$ ( «#loading» ) . bind ( «ajaxSend» , function ( ) <
$ ( this ) . show ( ) ; // показываем элемент
> ) . bind ( «ajaxComplete» , function ( ) <
$ ( this ) . hide ( ) ; // скрываем элемент
> ) ;

$. ajax ( <
beforeSend : function ( ) <
// Handle the beforeSend event
> ,
complete : function ( ) <
// Handle the complete event
>
// .
> ) ;

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

  • ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
  • beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
  • ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
  • success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
  • ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
  • error — Срабатывает в случае ошибки. Локальное событие
  • ajaxError — Срабатывает в случае ошибки
  • complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
  • ajaxComplete — Глобальное событие, аналогичное complete
  • ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Jquery.Ajax или BX.Ajax

Попович Алексей

Дата последнего входа: вчера в 19:04
Город: Харьков
Наименование компании: ИП Попович Алексей
Цукерберг рекомендует:  Лучшие статьи 2020 года. Дайджест блога

Доброго времени суток! На форуме поднимался как-то уже вопрос о том, как, подтягивая компоненты битрикса по аяксу вытягивать также и скритп, который подключается к компоненту и файл стилей компонента. Тогда решения данного вопроса нормально не было найдено.

И вот теперь есть решение:
Более подробно изучил работу с BX.ajax

Сильно расписывать нет времени, посему, сразу готовые наработки.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих