Как разместить json файл на сервере
JSON является частью стандарта ECMAScript начиная с 1999 года, когда ECMA определила функцию eval() воспринимающую формат. Он стал набирать популярность вместе с нарастающим успехом Ajax. Слово JSON часто появляется когда кто-нибудь заводит речь об Ajax. Известно, что JSON является другим форматом данных, что он замещает XML, и что многие программисты активно поддерживают его. Но что такое в действительности JSON и в чем его преимущества?
Почему JSON?
Преимущество JSON заключается в том, что он распознается в JavaScript. Нет необходимости разбирать документ, как это происходит с XML, для передачи данных через интернет.
JSON и XML
- Простой для чтения и понимания.
- Простой для использования.
И XML и JSON имеют возможность интегрировать большой объем данных в бинарной форме.
Синтаксис JSON
- Объекты: содержат объекты или атрибуты.
- Скалярные переменные: число, строка, логическая переменная.
- Массив.
- Литеральные значения: null, true, false, "строка символов", и числовые значения.
Объект
Содержит элемент или список элементов, где каждый элемент описывается следующим образом:
Массив
Набор значений, разделенных запятой.
Значение
Значение может быть: объектом, массивом, литеральным значением (строка, число, true, false, null).
Для создания JSON файла больше ничего не нужно!
Пример JSON файла
Простой пример структура меню. В данном объекте содержатся атрибуты и массив, который включает другие объекты строки меню.
Эквивалент на XML:
Как использовать формат
Файл JSON позволяет загружать данные с сервера или на сервер. Например, сохранение содержимого формы, которая была только что заполнена пользователем. Процесс включает три фазы: обработку браузером, обработку сервером, и обмен данными между ними.
Клиентская часть (браузер)
Данная часть выполняется достаточно просто, так как JSON является частью определения JavaScript. Содержимое файла или определяющих данных назначается переменным и они становятся объектами программы.
Серверная часть
Файл JSON используется различными программными языками, включая PHP и Java , благодаря наличию парсеров, которые позволяют получать содержимое и даже конвертировать его в классы и атрибуты языка. На сайте JSON можно найти парсеры для многих языков программирования.
Обмен данными
Загрузка файла может быть выполнена в JavaScript несколькими способами:
Пример
Использование данных: Как получать данные:
5 последних уроков рубрики "Разное"
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Огромный проект у нас впереди. Скоро мы будем делать менеджер шаблонов текста, который сможет хранить наши бесценные данные не локально на компьютере, а на сервере.
Как это устроено
Если мы хотим хранить данные на сервере и отправлять их туда в любой момент, нам нужно действовать так:
Первые три пункта сделаем на клиенте — нашей HTML-странице, а скрипт и настройки — на сервере. Скрипт будем писать на PHP, поэтому, если не знаете, что это и как с этим работать, — почитайте.
Чтобы было проще, мы отправим и обработаем на сервере совсем маленький JSON — в нём всего две пары «имя: значение», но даже со сложным запросом всё будет работать так же.
Готовим HTML-страницу
У нас будет очень простая страница, потому что самое важное сейчас — научиться работать с JSON-форматом, а красоту наведём позже.
На странице нам понадобятся:
- заголовок;
- два поля ввода, чтобы вы могли ввести туда любые данные и убедиться, что отправка работает;
- кнопка, которая отправляет JSON на сервер;
- место для вывода результата — там мы выведем то, что пришлёт нам сервер в ответ.
Мы сразу подключим jQuery, чтобы в скрипте напрямую обращаться к полям ввода и месту для вывода результата. А ещё заранее зададим синий цвет для вывода ответа от сервера — так мы сразу отличим данные на странице от того, что нам ответил сервер.
На языке HTML это будет так:
Внешний вид очень простой, чтобы проверить работоспособность всей системы
Отправляем данные на сервер
К счастью, инженеры давно придумали, как отправлять данные на сервер, не перезагружая страницу. Для этого используют JavaScript.
// создаём новый экземпляр запроса XHR
// адрес, куда мы отправим нашу JSON-строку
Когда мы знаем адрес, мы можем открыть соединение, чтобы сервер был готов принять наши данные. Это значит, что мы пока ничего ценного туда не посылаем, а просто предупреждаем сервер, что скоро что-то прилетит:
// открываем соединение. url — это переменная с нашим адресом
Теперь напишем заголовок запроса, чтобы сервер понимал, какие данные мы ему пришлём и как ему их обрабатывать. Так как у нас JSON, то это и пропишем в заголовке:
// устанавливаем заголовок —
выбираем тип контента, который отправится на сервер,
в нашем случае мы явно пишем, что это JSON
Чуть ниже сразу пропишем поведение скрипта на случай ответа сервера. Сервер должен обработать наши данные, вернуть ответ, а мы должны этот ответ поймать и вывести на страницу:
// преобразуем наши данные JSON в строку
var data = JSON.stringify( < "name":name.value, "lastname": lastname.value >);
Пишем PHP-скрипт для сервера
Задача скрипта пока будет очень простой — ему нужно будет получить наши данные и показать, что всё пришло как нужно. В PHP уже встроена команда, которая разбирает JSON-строку на составляющие, поэтому весь скрипт будет занимать три строчки:
Для получения данных наш PHP-скрипт использует стандартную команду file_get_contents("php://input") . Она просто ждёт, когда что-то прилетит, и отправляет результат в выбранную переменную. Дальше её можно разобрать как JSON-объект командой json_decode() и работать с данными напрямую.
Последняя команда echo отправляет в ответ то, что написано в двойных кавычках. Там мы обращаемся к переменной $data, где хранятся присланные данные. Именно этот ответ будет обрабатывать скрипт на JavaScript, в функции xhr.onreadystatechange, которую мы прописали раньше.
Сам код нам нужно сохранить как json.php и положить в папку /projects/json/ на нашем сайте — так мы прописали в скрипте на JavaScript.
Настраиваем сервер
Если мы сейчас попробуем нажать на кнопку, браузер нам выдаст ошибку:
Штука в том, что если сервер заранее всем не сообщит, что он готов работать с запросами, то браузер не даст нашей локальной странице на компьютере получить данные с другого сервера в интернете. Это сделано в целях безопасности, например, чтобы при оплате картой данные не ушли на другой сервер кроме нужного.
Чтобы браузер разрешил нам получать и отправлять данные с сервера, нам нужно настроить сервер. Настройка происходит в файле .htaccess: это такой системный файл, который лежит на вашем сервере и подсказывает серверу, как себя вести в разных ситуациях, что-то вроде инструкции. Название .htaccess неслучайно: у файла как бы нет имени, но есть расширение .htaccess, и в обычных папках этот файл не будет виден.
Создаём пустой файл, пишем в него вот такое колдовство и сохраняем как .htaccess
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" Header add Access-Control-Allow-Headers"origin, x-requested-with, content-type"
Первая строка разрешает серверу работать с запросами от любых страниц (хоть это и небезопасно, но пока мы учимся — так можно). Вторая строка содержит список разрешённых запросов. Третья разрешает нужные нам заголовки в запросе.
Фактически этот файл сейчас означает: «разрешаю тебе принимать запросы со всех сайтов, вот такого типа запросы можно принимать, вот такие у них могут быть заголовки». В буквальном смысле методичка.
Откуда вы знаете, что нужны именно эти команды?
Когда мы писали эту статью, нам потребовалось почитать справочники и форумы, протестировать несколько вариантов команд и в итоге найти именно эту — ту, что работает.
Вся информация по командам и настройке в интернете уже есть. Нужно просто ее искать, анализировать и тестировать.
Теперь в интернете есть ещё и эта статья, которая поможет вам меньше искать 🙂
Файл .htaccess нужно не потерять (на некоторых операционках он станет невидимым, как только вы его сохраните как .htaccess — придётся покопаться в настройках, чтобы его раскрыть). Загружаем его на сервер.
Перезапускаем нашу локальную страничку и пробуем её в действии.
Всё работает. Синий текст мы получили от PHP-скрипта на сервере. Связь налажена!
Что дальше
Мы научились отправлять данные на сервер и немного работать там с ними. Дальше попробуем заменить в наших проектах локальное хранение данных на хранение на сервере, чтобы проекты работали с любого браузера.
Огромный проект у нас впереди. Скоро мы будем делать менеджер шаблонов текста, который сможет хранить наши бесценные данные не локально на компьютере, а на сервере.
Как это устроено
Если мы хотим хранить данные на сервере и отправлять их туда в любой момент, нам нужно действовать так:
Первые три пункта сделаем на клиенте — нашей HTML-странице, а скрипт и настройки — на сервере. Скрипт будем писать на PHP, поэтому, если не знаете, что это и как с этим работать, — почитайте .
Чтобы было проще, мы отправим и обработаем на сервере совсем маленький JSON — в нём всего две пары «имя: значение», но даже со сложным запросом всё будет работать так же.
Готовим HTML-страницу
У нас будет очень простая страница, потому что самое важное сейчас — научиться работать с JSON-форматом, а красоту наведём позже.
На странице нам понадобятся:
- заголовок;
- два поля ввода, чтобы вы могли ввести туда любые данные и убедиться, что отправка работает;
- кнопка, которая отправляет JSON на сервер;
- место для вывода результата — там мы выведем то, что пришлёт нам сервер в ответ.
Мы сразу подключим jQuery, чтобы в скрипте напрямую обращаться к полям ввода и месту для вывода результата. А ещё заранее зададим синий цвет для вывода ответа от сервера — так мы сразу отличим данные на странице от того, что нам ответил сервер.
На языке HTML это будет так:
Внешний вид очень простой, чтобы проверить работоспособность всей системы Внешний вид очень простой, чтобы проверить работоспособность всей системыОтправляем данные на сервер
К счастью, инженеры давно придумали, как отправлять данные на сервер, не перезагружая страницу. Для этого используют JavaScript.
Когда мы знаем адрес, мы можем открыть соединение, чтобы сервер был готов принять наши данные. Это значит, что мы пока ничего ценного туда не посылаем, а просто предупреждаем сервер, что скоро что-то прилетит:
// открываем соединение. url — это переменная с нашим адресом
Теперь напишем заголовок запроса, чтобы сервер понимал, какие данные мы ему пришлём и как ему их обрабатывать. Так как у нас JSON, то это и пропишем в заголовке:
// устанавливаем заголовок — выбираем тип контента, который отправится на сервер, в нашем случае мы явно пишем, что это JSON
Чуть ниже сразу пропишем поведение скрипта на случай ответа сервера. Сервер должен обработать наши данные, вернуть ответ, а мы должны этот ответ поймать и вывести на страницу:
Готовый скрипт на странице
Пишем PHP-скрипт для сервера
Задача скрипта пока будет очень простой — ему нужно будет получить наши данные и показать, что всё пришло как нужно. В PHP уже встроена команда, которая разбирает JSON-строку на составляющие, поэтому весь скрипт будет занимать три строчки:
Для получения данных наш PHP-скрипт использует стандартную команду file_get_contents("php://input") . Она просто ждёт, когда что-то прилетит, и отправляет результат в выбранную переменную. Дальше её можно разобрать как JSON-объект командой json_decode() и работать с данными напрямую.
Последняя команда echo отправляет в ответ то, что написано в двойных кавычках. Там мы обращаемся к переменной $data, где хранятся присланные данные. Именно этот ответ будет обрабатывать скрипт на JavaScript, в функции xhr.onreadystatechange, которую мы прописали раньше.
Сам код нам нужно сохранить как json.php и положить в папку /projects/json/ на нашем сайте — так мы прописали в скрипте на JavaScript.
Настраиваем сервер
Если мы сейчас попробуем нажать на кнопку, браузер нам выдаст ошибку:
Штука в том, что если сервер заранее всем не сообщит, что он готов работать с запросами, то браузер не даст нашей локальной странице на компьютере получить данные с другого сервера в интернете. Это сделано в целях безопасности, например, чтобы при оплате картой данные не ушли на другой сервер кроме нужного.
Чтобы браузер разрешил нам получать и отправлять данные с сервера, нам нужно настроить сервер. Настройка происходит в файле .htaccess: это такой системный файл, который лежит на вашем сервере и подсказывает серверу, как себя вести в разных ситуациях, что-то вроде инструкции. Название .htaccess неслучайно: у файла как бы нет имени, но есть расширение .htaccess, и в обычных папках этот файл не будет виден.
Создаём пустой файл, пишем в него вот такое колдовство и сохраняем как .htaccess
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Первая строка разрешает серверу работать с запросами от любых страниц (хоть это и небезопасно, но пока мы учимся — так можно). Вторая строка содержит список разрешённых запросов. Третья разрешает нужные нам заголовки в запросе.
Фактически этот файл сейчас означает: «разрешаю тебе принимать запросы со всех сайтов, вот такого типа запросы можно принимать, вот такие у них могут быть заголовки». В буквальном смысле методичка.
Когда мы писали эту статью, нам потребовалось почитать справочники и форумы, протестировать несколько вариантов команд и в итоге найти именно эту — ту, что работает.
Вся информация по командам и настройке в интернете уже есть. Нужно просто ее искать, анализировать и тестировать.
Теперь в интернете есть ещё и эта статья, которая поможет вам меньше искать.
Файл .htaccess нужно не потерять (на некоторых операционках он станет невидимым, как только вы его сохраните как .htaccess — придётся покопаться в настройках, чтобы его раскрыть). Загружаем его на сервер.
Фронтенд-разработчики часто сталкиваются с необходимостью добавить на сайт какие-то данные: фрагменты текста, фотографии, списки или профили пользователей. Но возникает ситуация – надо продумать интерфейс, но пока нет навыков в создании баз данных и добавлении в них информации. Ведь БД сложные, даже бесплатную MongoDB или MySQL установить и заставить работать – нехилый квест. Но есть парочка удобных решений, позволяющих оперативно добыть базу с нужной информацией или даже создать свою.
JSON Placeholder
Существует веб-ресурс JSON Placeholder, имитирующий полноценную базу данных на базе JSON-файлов. К ней можно получить доступ простым запросом к БД через fetch. В JavaScript это делается следующим образом:
Вместо ссылки на конкретные данные можно выбрать любую из доступных на сайте. Например, ссылку на фотографии вместо постов (они найдутся, если пролистать страницу чуть ниже).
В нашем случае в переменной dataRes будет доступен массив из данных в формате JSON, а именно постов, которые можно обрабатывать стандартными JavaScript-скриптами. Можно будет обращаться к объекту, используя привычный синтаксис, и вставлять данные на свой сайт.
Например, если в запрошенном объекте есть ключ с названием name, то можно обратиться к нему в коде через команду в духе:
И эту переменную можно вставлять в любой участок кода. Он будет отображаться в структуре вашего сайта без необходимости использовать полноценную базу данных и делать дополнительный GET-запрос. Это очень удобно для проверки гипотез и создания MVP.
И что важно, JSON-сервер полностью поддерживает REST API, то есть можно взаимодействовать с ним, как с реальной БД, используя команды GET, SET и т.п.Локальный JSON-сервер для хранения БД
Ок, у нас есть куча разных массивов с рандомными данными, но все они – болванка, и не более того. Шаблоны с четко определенными свойствами и правилами. Мы ведь тестируем именно свой код, и зачастую нам нужен уникальный контент, особенно когда нужно протестировать поиск конкретной информации, которую нельзя найти в плейсхолдерах.
Благо, что JSON Placeholder построен на приложении json-server и базе данных lowDB. Обе технологии доступны бесплатно для некоммерческого использования, поэтому можно быстро собрать свой JSON-сервер. Это будет практически полноценная база данных. Не супербыстрая и суперэффективная, но для создания MVP и тестирования идей работает на ура. Чтобы начать использовать собственную БД на основе JSON-файлов надо:
Установить json-server через npm (менеджер пакетов для Node.js):
Потом создать свою базу данных в формате json (можно назвать файл как вздумается).
Внутри надо добавить глобальный объект, а внутрь ключи с массивами данных. Например:
А потом можно запустить собственный локальный сервер. Открываем директорию, где лежит JSON-файл, в командной строке, а потом вводим в нее:
Создаем JSON-сервер на бесплатном хостинге
Ок, у нас теперь есть своя база данных, но она находится в локальной среде. То есть опубликованный в сети сайт не сможет получить к ней доступ. Поэтому нам нужен какой-то хостинг, чтобы наш MVP можно было смело показать заказчику, а он не столкнулся с кучей undefined вместо реальных файлов и текстов на странице.
Нашелся добрый человек с ником jesperorb, который превратил JSON-server из локального хранилища данных в проект для публикации на Heroku – бесплатном хостинге для веб-приложений.
Если у вас уже есть база данных в json-файле, то для публикации ее в сети нужно проделать следующее:
Нажимаем на кнопку Code в правом верхнем углу.
Указываем имя для нового репозитория и нажимаем на Create Repository From Template.
После этого в вашем профиле на GitHub появится новый репозиторий с компонентами, необходимыми для запуска JSON-сервера на стороннем хосте.
Теперь надо экспортировать наш сервер в онлайн-пространство.
Будем экспортировать в Heroku, потому что это полностью бесплатный хостинг для приложений. Но у него есть один серьезный недостаток – приложение может быть активно не более 18 часов в сутки. Также оно будет отключаться спустя 30 минут неиспользования. Поэтому ваш сайт будет загружаться немного медленнее, чем мог бы, используя вы платный хост. В качестве недорогой и надежной альтернативы советую присмотреться к Hostman.Создаем аккаунт на сайте Heroku.
Устанавливаем на компьютер клиент для работы с сервисом через командную строку.
Открываем командную строку и вводим туда команду:
Утилита откроет браузер, чтобы вы могли войти в сервис под своим аккаунтом.
Создаем новый Heroku-проект при помощи команды:
По сути, это репозиторий в GitHub с вашей базой данных, который можно пушить в Heroku при появлении изменений в самой БД.
Вводим команду, находясь в директории с нашим JSON-сервером:
И в конце вводим следующую команду, чтобы открыть свое приложение и убедиться в его работоспособности:
Готово. Пользуйтесь новой бесплатной БД с полноформатной поддержкой REST API. А в следующий раз я расскажу, как бесплатно и за минуту разместить в сети собственное приложение или сайт.
Читайте также: