js .html demo

$('#thisdiv').load(document.URL + ' #thisdiv'); 

$(‘#thisdiv’).load(document.URL + ‘ #thisdiv>*’) позволяет использовать еще один #thisdiv внутри исходного #thisdiv

Предположим, что у вас есть 2 div внутри вашего html файла.

some text
 
some other text
 

Сама программа java не может обновлять содержимое html файла, так как html связан с клиентом, между тем java связан с контентом.

Вы можете, однако, обмениваться информацией между сервером (back-end) и клиентом.

То, о чем мы говорим, это AJAX, который вы используете с помощью JavaScript, я рекомендую использовать jQuery, который является общей библиотекой JavaScript.

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

setInterval(function() < alert("hi"); >, 30000); 

Вы также можете сделать это следующим образом:

Функция Whereea foo — это функция.

Вместо предупреждения ( «привет» ) вы можете выполнить запрос AJAX, который отправляет запрос на сервер и получает некоторую информацию (например, новый текст), которую вы можете использовать для загрузки в div.

Классический AJAX выглядит следующим образом:

var fetch = true; var url = 'someurl.java'; $.ajax( < // Post the variable fetch to url. type : 'post', url : url, dataType : 'json', // expected returned data format. data : < 'fetch' : fetch // You might want to indicate what you're requesting. >, success : function(data) < // This happens AFTER the backend has returned an JSON array (or other object type) var res1, res2; for(var i = 0; i < data.length; i++) < // Parse through the JSON array which was returned. // A proper error handling should be added here (check if // everything went successful or not) res1 = data[i].res1; res2 = data[i].res2; // Do something with the returned data $('#div1').html(res1); >>, complete : function(data) < // do something, not critical. >>); 

В то время как бэкэнд может получать POST-данные и может возвращать объект данных информации, например (и очень предпочтительный) JSON, есть много учебников, где это делается, GSON от Google — это то, что я использовал некоторое время назад, вы можете взглянуть на него.

Я не профессионал в получении Java POST и возвращении JSON такого типа, поэтому я не собираюсь приводить вам пример с этим, но я надеюсь, что это достойный старт.

Источник

Динамическое обновление веб-страницы

Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?

Посмотрим, как можно ответить на эти вопросы.

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

Любое веб-приложение можно логически поделить на две составляющие — на клиентскую часть и серверную часть. К клиентской части относятся сам браузер и скрипты, которые он выполняет, к серверной — набор скриптов, которые генерируют ответ на любой запрос пользователя.

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

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

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

Ближе к сути

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

Тело нашей страницы может выглядеть, например, так:

Вариант 1 — дублирование

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

При получении такого ответа клиентская часть «оборачивает» данные в html-теги, добавляет необходимые тексты и обновляет структуру страницы.

Серверу же знания об отображении нужны только для того, чтобы сгенерировать изначальную версию страницы.

• Требуется продублировать код — он будет и в клиентской части, и в серверной;
• Клиентская часть должна знать, как именно поступать с каждой порцией данных от сервера — иногда нужно заменить html элемента, иногда добавить новые данные к уже существующему коду;

Вариант 2 — всемогущий сервер и «толстые» ответы

Основная идея — логику отображения знает только сервер, клиентская часть получает уже готовый html-код элементов. Здесь ответ сервера выглядит так:

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

• Многократная генерация одного и того же кода, особенно неэффективно при небольших изменениях;
• Огромный объем трафика, особенно на больших страницах;

Вариант 2а — всемогущий сервер и «тонкие» ответы

Можно попытаться исправить главный недостаток предыдущего варианта. Сервер может не отправлять весь html компонента, а присылать только «дельту» — изменения, которые необходимо внести. Наш ответ тогда может стать таким:

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

• Все еще достаточно большой объем сетевого трафика;
• Клиент должен отправить серверу текущее состояние каждой компоненты, закодированное некоторым образом, чтобы сервер понял, относительно чего считать дельту;
• Сложность вычисления и записи дельты в случае нетривиальных изменений;
• Общее усложнение и клиентской, и серверной части;

Вариант 3 — всемогущий javascript

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

Так в чем же существенное отличие от первого варианта? А заключается оно в том, что сервер не выполняет первоначальную генерацию страницы, её сборка осуществляется уже браузером клиента. Вариант этот только выглядит странным, он может пригодиться, если необходимо уменьшить нагрузку на сервер.

• Малый объем трафика — передаются только необходимые данные;
• Уменьшение нагрузки на сервер;

• Высокая нагрузка на компьютер пользователя;
• Возможна избыточность — часть знаний клиентской части об отображении может так и остаться невостребованной, если какие-то события не наступят;

Заключение

Каждый из рассмотренных методов имеет право на жизнь, и может быть использован в проектах разной сложности. Лично я во встреченных мною проектах чаще всего видел первый вариант, несмотря на нарушение им моего любимого принципа DRY — Don`t repeat yourself.

А какие принципы вы используете при разработке динамических страниц?

Источник

Обновление содержимого веб-страницы без перезагрузки с помощью 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)

Заключение

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

Источник

Как обновить div без перезагрузки страницы?

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

Не совсем это имел введу, нужно чтобы исполнялся код в div, а так вы просто присваивайте новый код только в виде js я так привёл пример, мне нужно будет обновлять таблицу.
Нужно с помощью js как то обновить этот div, чтобы в нём исполнился уже существующий код.

Чего? Кого? Что загружать? Где исполнять? JS? PHP? Ничего не понятно.
Если про PHP речь, то можно запросить с бэка скрипт фетчем, получить результат и подставить в контейнер.
И так бесконечное количество раз.

Самое простое — сделать рядом скрытый