Автоматическое обновление страницы браузера на HTML (bloggood.ru)

Html body обновление страницы

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

AJAX — инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы.

Важно! Для того, чтобы пример работал корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Простой пример программного кода на AJAX и JavaScript

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

Содержимое файла index.html.

       
Какую страницу желаете открыть?
   
Идет загрузка.
    

Рассмотрим принцип работы примера.

1. Функция createRequestObject() создает объект XMLHttpRequest() для браузеров Firefox, Opera и т.п. и его аналог для различных версий браузеров Internet Explorer. Этот объект нужен для передачи данных на сервер и получения от него ответа в фоновом режиме, без перезагрузки страницы.

2. Как видно в теле документа имеются два контейнера — contentBody и loading. В контейнер contentBody загружается непосредственно контент, а контейнер loading содержит контент, который служет заставкой и появляется на время загрузки основного требуемого контента.

3. Функция showContent() выводит контент в основной контейнер contentBody. Делает она это с использованием объекта XMLHttpRequest(). Методом open() осуществляется описание передачи данных на сервер. В качестве параметров указавается тип запроса (у нас — GET) и строка, передаваемая серверу (у нас — URL загружаемой страницы).

4. В силу особенностей объекта XMLHttpRequest(), для получения всего контента требуется дождаться, пока свойство readyState примет значение 4. Как только мы дожидаемся этого — сразу изменяем тело контейнера. Это и указано в функции-обработчике события onreadystatechenge().

5. После открытия запроса его надо отправить на сервер, это делается методом send().

6. Если создать объект XMLHttpRequest() по каким-либо причинам не вышло, то выполняется простая переадресация на указанную страницу, тем самым функция showContent() сохраняет свою работоспособность.

В тексте примере упоминаются ссылки на файлы page1.html и page2.html, которые загружаются в область контента. Они представляют собой простые HTML-страницы или текстовые файлы с контентом.

Источник

Обновить страницу с помощью JS / HTML / PHP

JS -метод location.reload() перезагружает текущую вкладку браузера и действует также как кнопка «Обновить страницу».

Пример перезагрузки страницы кликом на ссылку или кнопку:

Цикличное обновление страницы с задержкой

В коде используется тот же location.reload() выполняемый с задержкой setTimeout() в тридцать секунд.

Перезагрузка страницы с задержкой

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

 Обновить страницу через 2 секунды  

Пример:

Перезагрузка страницы с подтверждением

Чтобы пользователь мог подтвердить действие, можно применить метод вызова диалогового сообщения confirm.

if (confirm('Вы действительно хотите обновить страницу?'))

Пример:

Обновление родительской страницы из IFrame

Для обращения к ресурсам родительской страницы из IFrame используется объект parent , подробнее в статье «Как обновить iframe».

Перезагрузка страницы с помощью HTML

Добавление мета-тега в страницы заставит её перезагрузится. Значение атрибута content больше нуля задает задержку в секундах.

Перезагрузка страницы из PHP

Обновить страницу прямо с сервера можно c помощью функции header() , отправив заголовок « Refresh: 5 », где значение «5» указывает интервал в пять секунд.

Важно, чтобы перед вызовом функции не было отправки контента в браузер, например echo .

Источник

Автоматическое обновление страницы браузера на HTML, PHP и JavaScript

В сегодняшней статье я расскажу, как сделать автоматическое обновление страницы браузера на HTML, PHP и JavaScript.
Посчитал, что эта статья будет для вас полезной, так как недавно я разрабатывал один скрипт на php, где автоматическое обновление страницы браузера было просто необходимо. Я думаю, вы разберетесь, для чего вам нужна эта фишка с автоматическим обновлением браузера.

Теперь переходим к самому коду.

○ Автоматическое обновление страницы браузера на HTML

Чтобы автоматически обновлялась страница в браузере, на HTML страницах используют специальный мета-тег:

15 – это число, обозначающее время, через которое должна автоматически обновиться веб-страница (в секундах). Можете попробовать задать свое время, только в секундах.

      Текст страницы, таблицы, картинки, музыка и видео.  

В результате, веб-страничка автоматически обновится через 15 секунд.

○ Автоматическое обновление страницы браузера на PHP

Чтобы автоматически обновлялась страница в браузере, на PHP страницах используют вот такой код:

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

      Текст страницы, таблицы, картинки, музыка и видео.  

В результате, веб-страничка автоматически обновится через 15 секунд.

○ Автоматическое обновление страницы браузера на JavaScript

Чтобы автоматически обновлялась страница в браузере, на JavaScript есть вот такой скрипт:

15000 – это миллисекунды, через которые должна обновиться веб-страница. Еще раз обращаю ваше внимание на время в миллисекундах, а не в секундах.

К сведенью: 1 секунда = 1000 миллисекунд.
Значит, 15 000 миллисекунд = 15 секунд.

Этот скрипт вставляют в html документ перед закрывающим тегом

      Текст страницы, таблицы, картинки, музыка и видео.  

В результате, веб-страничка автоматически обновится через 15 секунд.

Источник

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

Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.

Button 1
Button 2
Button 3
Clear block

return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте. Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.

      
 
Button 1 
Button 2 
Button 3 
Clear block 
   

Пример передачи функции в метод .html()

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

 function setNewEntry(entry) < $('#block').html(getNewEntry($('#block').html(), entry)); >function getNewEntry(oldHTML, newHTML)

Источник

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

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

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

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

Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.

Hello World
 
 
 
Hello World
 
 
 
 Hello World
  

Button 1
Button 2
Button 3
Clear block

return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте.

Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.

Вот как будет выглядеть код веб-странички.

      
 
Button 1 
Button 2 
Button 3 
Clear block 
    

Пример передачи функции в метод .html()

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

 function setNewEntry(entry) < $('#block').html(getNewEntry($('#block').html(), entry)); >function getNewEntry(oldHTML, newHTML)

Заключение

Ну вот и все, если разобраться, то ничего сложного, но с помощью этого метода можно вершить «великие дела» и создавать динамические веб-страницы на любой вкус. Спасибо за внимание!

Источник