Используем 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, которые мы потом выводим на страницу.

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

Запускать пример нужно не "двойным щелчком мышки", а в Denwer или на другом локальном хосте, скажем, XAMPP. По "двойному клику" документ index.html откроется как file://, а не http:// и вы получите просто сообщение "неизвестная ошибка", так как серверный запрос не сможет быть выполнен.
Папку XMLHttpRequest нужно "положить" в корневую папку сервера, тогда путь к файлу данных менять не придётся, а скрипт (при запущенном на компьютере сервере) будет выполняться из браузера ссылкой http://localhost/XMLHttpRequest/ Проверьте, что развернули архив правильно (по принципу "извлечь здесь") и внутри XMLHttpRequest нет ещё одной папки с тем же именем.
Предполагается, что кодировка всех документов - Юникод (UTF-8) и в папку со скриптом добавлен файл .htaccess с обычным указанием
```
AddDefaultCharset utf-8
```
(есть в архиве)
Просто так "получить содержимое внешней страницы и записать его в переменную" из стороннего домена нельзя. Если сторонний сервер отвечает с заголовком Access-Control-Allow-Origin: *, то кросс-доменный запрос вполне себе работает. Если же нет, то включаются политики безопасности и содержимого не получить никак. Это "зашитое" в стандарты ограничение безопасности, иначе все бы тянули данные откуда угодно :)

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

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

12.10.2017, 11:50 [4047 просмотров]

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

Для добавления комментариев нужен включённый в Вашем браузере Javascript. Как включить? Вернуться к статье