Page 308 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

1 1 В этом примере мы только хотим заменить текст в пределах <div>,
1 1 имеющего класс "serverinfo "
const serverinfo = document . querySelector ( ' . serverinfo ' ) ;

1 1 Перебор по ключам в объекте, возвращенном с сервера
1 1 ( " pla tfor " , "nodeVersio " и "uptime ") :
m
n
Obj e c t . keys (data) f orEach ( p => {
.
1 1 Найти элементы для замены для этого свойства (если есть)
const replacements =
=
(
serverinfo . querySelectorAll ' [ d ata-replace " $ { р } " ] ' ) ;
1 1 заменить все элементы значением, возвращенным с сервера
s
for ( let r o f replacement ) {
r . textContent = data [p] ;
} ) ;
} ) ;
Поскольку refreshServerinfo - это функция, мы можем вызвать ее в любое
время. В частности мы можем обновлять информацию, полученную с сервера пери­
одически (вот почему мы добавили поле uptime). Например, если мы хотим обнов­
лять информацию с сервера пять раз в секунду (каждые 200 мс), то можем добавить
следующий код.

setinterval ( refreshServerinfo, 2 0 0 ) ;
Сделав это, мы будем наблюдать в браузере последовательное увеличение време­
ни непрерывной работы сервера!

В этом примере, когда страница загружается впервые, в элементе <di v
=
class " . serverinfo" > находится текстовый заполнитель в виде во­
просительных знаков. При медленном соединении с Интернетом
пользователь может увидеть эти вопросительные знаки на мгновение,
прежде чем они будут заменены информацией, полученной от серве-
ра. Это известная проблема появления нестилизованного содержимо­
го (Flash Of Unstyled Content - FOUC). Одно из ее решений подра­
зумевает получение от сервера начальной страницы с правильными
значениями. Другое решение - полностью скрыть элемент, пока его
содержимое не будет изменено. Это может вызывать раздражение
у пользователей, но зачастую это куда лучше, чем созерцание бес­
смысленных вопросительных знаков.

В этом разделе были рассмотрены только основные концепции, используемые
при создании Аjах-запросов. Более подробная информация по этой теме приведена
в статье U sing XMLHttpReqиest" библиотеки MDN.
"

Ajax 3 1 1