БлогNot. Используем Javascript и XMLHttpResult для получения данных из файла на сервере

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Используем Javascript и XMLHttpResult для получения данных из файла на сервере

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

Напишем небольшой пример, получающий средствами современного Javascript данные из расположенного на сервере файла в формате JSON, выполняющий разбор этих данных и выводящий их в текстовом виде в элемент <textarea> страницы. Можно выводить и в виде HTML, Тогда просто используйте вместо текстовой области <div> с id="XMLHttpResult" и пишите туда текст с тегами так же, как в прилагаемом коде.

Почему данные рекомендуется хранить в JSON?

Это простой, удобный и читабельный формат, достаточно выполнить JSON.stringify() и яваскрипт-объект становится "джейсоном", и наоборот, JSON.parse() превращает строку обратно в объект. "Чистый" XML таких преимуществ не имеет.

Вот полный код файла index.html:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>XMLHttpRequest</title>
 </head>
<body>
<div align="center">

<textarea id="XMLHttpResult" rows="4" cols="20"></textarea>
<script type="text/javascript">
 var url = 'http://localhost/XMLHttpRequest/data.json'; 
   //URL файла с данными JSON, может быть и относительным
 var request = new XMLHttpRequest();
 request.open('get', url, true);
 request.send();

 request.onreadystatechange = function() {
  if (this.readyState != 4) return; //ещё не готово
  // по окончании запроса доступны:
  // status, statusText
  // responseText, responseXML (при content-type: text/xml)
  if (this.status != 200) { // обработать ошибку
   document.getElementById('XMLHttpResult').innerHTML = "Ошибка:\n" + 
      (this.status ? this.statusText : "неизвестная ошибка");
   return;
  }
  // попытаться получить результат из this.responseText или this.responseXML
  var elementsList;
  try {
   elementsList = JSON.parse (this.responseText);
  }
  catch (e) {
   document.getElementById('XMLHttpResult').innerHTML = "Ошибка разбора данных JSON:\n" + 
      e.message;
   return;
  }
  // разобрать данные и вывести нужные в документ
  var docElement = document.getElementById('XMLHttpResult');
  for (var i=0; i < elementsList.length; i++ ) {
   var element = elementsList[i];
   docElement.insertAdjacentHTML('afterBegin', element.name + ', ' + element.age + "\n");
  }
 }
</script>
<noscript>Извините, требуется включённый Javascript для работы приложения!</noscript>

</div></body></html>

Перебор элементов в elementsList сделан "по старинке" не зря. Например, в ИЕ11 человеческое

for (var element of elementsList) {
 //...
}

работать не будет.

Текстовый (и тестовый) файл data.json находится в той же папки и имеет следующий вид:

[
 {
  "name": "Петя",
  "age": 14
 },
 {
  "name": "Маша",
  "age": 16
 }
]

Как видно, в нём есть поля name и age, которые мы потом выводим на страницу.

Имейте в виду следующие важные моменты:

А вот устанавливать Node.js или даже просто использовать JQuery для стандартных типовых задач по извлечению данных, пожалуй, излишество.

 Скачать архив .zip с папкой этого примера внутри (2 Кб)


теги: javascript сервер html безопасность

комментарии (0)

12.10.2017, 11:50; рейтинг: 149

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

Наверх Яндекс.Метрика
© PerS
вход