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

его непрерывной работы <span data-replace= u ptim " > ? ? ?</span> секунд .
e
"
</div>
Т е перь, когда есть элемент для отображения данных, поступающих с сервера, мы
можем использовать объект XMLHttpRequest, чтобы выполнить Аjах-запрос. Внизу
вашего НТМL-файла (прямо перед закрывающим дескриптором </body> ), добавьте
следующий код.
p
< s cript type=" a pplication/j avascri t ; version=l . 8 " >
function refreshServerinfo ( ) {
t
const req = new XMLHttpReques ( ) ;
req . addEventListener ( ' loa ' , function ( )
d
/ / TODO: внести эти данные в НТМL-код
console . l og ( t his . responseText ) ;
} ) ;
req . open ( ' GET ' , ' h tt : //localhost : 7 070 ' , tru ) ;
p
e
req . sen ( ) ;
d
refreshServerinfo ( ) ;
< / script>
Этот сценарий осуществляет простой Ajax -запрос. Сначала мы создаем новый
объект XMLHttpReques t , а затем добавляем обработчик, который перехватыва­
ет событие load (он будет запущен, если Аjах-запрос успешно завершится). В нем
мы пока что только выводим ответ сервера (который находится в свойстве th s .
i
responseText) на консоль. Затем происходит вызов метода open, который факти­
чески устанавливает соединение с сервером. Мы определяем, что это НТТР-запрос
GET. Это такой же тип запроса, который используется в браузере при посещении веб­
страницы (есть и другие типы запросов: POST, DELETE и др.). Далее мы сообщаем
методу URL сервера. И наконец происходит вызов метода e nd, который фактически
s
выполняет запрос. В этом примере мы явно не посылаем данные на сервер, хотя мог­
ли бы это сделать.
Запустив этот пример, вы увидите данные, возвращаемые с сервера и отображае­
мые на консоли. Наш следующий шаг - поместить эти данные в наш НТМL-код. Мы
структурировали свой HTML так, чтобы проще было найти любой элемент, у кото­
рого есть атрибут данных replace, и заменить содержимое этого элемента данными
из возвращенного объекта. Для этого мы перебираем свойства, которые были воз­
вращены сервером (с использованием метода Obj e ct . keys), и если есть какие-ни­
будь элементы с соответствующими атрибутами данных replace, мы заменяем их
содержимое.
req . a ddEventListener ( ' loa ' , function ( ) {
d
1 1 thi s . responseText - это строка , содержащая JSON; мы используем
// JSON.parse, чтобы преобразовать ее в объект
N
const data = JSO . p arse (th s . responseText ) ;
i

310 Глава 1 8 . JavaScript в браузере