Главная » Про локальные сервера, JSON и AJAX

Про локальные сервера, JSON и AJAX


28.06.2021, 21:40
Локальные сервера

Простые (поддерживают только GET-запросы): LiveServer, HttpServer, JSONServer
Комплексные: OpenServer, MAMP

OpenServer MAMP

Для работы с MAMP проекты закидываем в папку htdocs

Для работы с OpenServer проекты закидываем в папку domains

GET-запрос это запрос серверу для получения информации

POST-запрос постит данные на сервер (например, данные какой-то формы)

JSON (JavaScript Object Notation)

Является текстовым форматом для представления структурированных данных на основе синтаксиса объекта JavaScript, используется для передачи и хранения данных.

JSON - набор пар "ключ - значение", где все строки обязательно заключаются в двойные кавычки.

В качестве значений могут быть объекты, массивы, числа, строки, логические значения и null.

Изначально появился в JavaScript, но потом стал использоваться и в других языках.

К примеру, есть объект:

Код

const user = {
  name: "Alex",
  phone: "+74951111111"
};

Нам нужно отправить его на сервер (что напрямую сделать не получится), для этого следует его вначале изменить до транспортабельного вида и потом уже передавать на сервер.

Браузеры имеют встроенные объекты JSON для работы с этими данными. В этом встроенном объекте есть как свойства, так и методы.

Метод stringify() превращает объекты JavaScript в нужный нам формат

Код

console.log(JSON.stringify(user));

{"name":"Alex","phone":"+74951111111"}

В таком виде мы уже можем отправлять данные на сервер.

Если же наоборот, с сервера пришли данные в формате JSON, а нам нужно перевести их в формат обычного объекта, то используется метод parse():

Код

console.log(JSON.parse(JSON.stringify(user)));

{ name: 'Alex', phone: '+74951111111' }

Глубокая копия объекта с помощью JSON

Наш объект:

Код

const user = {
  name: 'Alex',
  phone: '+74951111111',
  parents: {
  mom: 'Olga',
  dad: 'Max'
  }
};

А вот так получаем его глубокую копию:

Код

const clone = JSON.parse(JSON.stringify(user));

Минусом данного способа будет то, что при таком глубоком копировании не будут скопированы методы объекта, написанные пользователем вручную.

Клонирование объектов

AJAX и общение с сервером

AJAX - от англ. Asynchronous Javascript and XML — «​асинхронный JavaScript и XML»

Создание калькулятора валют, используя объект XMLHttpRequest

XMLHttpRequest - это встроенный в браузер объект, позволяющий делать HTTP-запросы к серверу без перезагрузки страницы.

На сегодняшний день признан устаревшим, но еще используется.

Калькулятор представляет собой форму с двумя инпутами:

Код

  <label for="rub">RUB</label>
  <input id="rub" type="text">
  <label for="usd">USD</label>
  <input id="usd" type="text">

Логика работы должна быть такая: при вводе в верхнее поле суммы в рублях, в нижнем поле отображается эта же сумма, но в долларах.

Также понадобится файлик current.json, в котором будет указан фиксированный курс доллара. Вот его содержимое:

Код

{
  "current": {
  "usd": 74
  }
}

Чтобы иметь возможность взаимодействия с полями, для начала получаем их со страницы:

Код

const inputRub = document.querySelector('#rub'),
  inputUsd = document.querySelector('#usd');

Назначаем обработчик события для первого поля:

Код

inputRub.addEventListener('input', () => {
  const request = new XMLHttpRequest();
});

Теперь вызываем метод open() для объекта request:

Код

inputRub.addEventListener('input', () => {
   const request = new XMLHttpRequest();
  request.open();
});

Данный метод собирает настройки, которые помогут в будущем сделать запрос. Рассмотрим аргументы метода:

Код

open(метод, путь к серверу, асинхронность, логин, пароль);

Конкретно для нашего случая:

Код

inputRub.addEventListener('input', () => {
   const request = new XMLHttpRequest();
  request.open('GET', 'js/current.json');
});

Далее используем метод setRequestHeader()

Код

inputRub.addEventListener('input', () => {
   const request = new XMLHttpRequest();
  request.open('GET', 'js/current.json');
  request.setRequestHeader('Content-type','application/json; charset = utf-8');
});

Теперь с помощью метода send() мы можем отправить запрос:

Код

inputRub.addEventListener('input', () => {
    const request = new XMLHttpRequest();
   request.open('GET', 'js/current.json');
   request.setRequestHeader('Content-type','application/json; charset = utf-8');
  request.send();
});

У объекта request помимо методов, рассмотренных выше, есть также свойства.

Свойство status - показывает статус нашего запроса (например, 404, 0, 200 и так далее, посмотреть можно здесь)

Свойство statusText - текстовое описание ответа от сервера (ОК, Not Found и прочее, посмотреть также здесь)

Свойство response - содержит ответ от сервера

Свойство readyState - содержит текущее состояние нашего запроса (см. здесь)

Возвращаемся к нашему коду и добавляем обработчик события readystatechange, которое отслеживает статус готовности нашего запроса в текущий момент (следит за свойством readyState)

Код

const inputRub = document.querySelector('#rub'),
  inputUsd = document.querySelector('#usd');

inputRub.addEventListener('input', () => {
  const request = new XMLHttpRequest();

  request.open('GET','js/current.json');
  request.setRequestHeader('Content-type','application/json');
  request.send();

  request.addEventListener('readystatechange', () => {

  });
});

Событие readystatechange срабатывает каждый раз, когда меняется текущее состояние объекта XMLHttpRequest: сменилось с 0 на 1 - событие сработало и так далее.

Событие load срабатывает когда запрос полностью загрузился и мы получили какой-то результат.

Ну и, собственно, рабочий скрипт конвертера из рублей в доллары:

Код

const inputRub = document.querySelector('#rub'),
  inputUsd = document.querySelector('#usd');

inputRub.addEventListener('input', () => {
  const request = new XMLHttpRequest();

  request.open('GET','js/current.json');
  request.setRequestHeader('Content-type','application/json');
  request.send();

  request.addEventListener('readystatechange', () => {
  if (request.readyState === 4 && request.status === 200) {
  const data = JSON.parse(request.response);
  inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
  } else {
  inputUsd.value = 'Что-то пошло не так...';
  }
  });
});

Вариант, но уже с использованием события load

Код

  request.addEventListener('load', () => {
  if (request.status === 200) {
  const data = JSON.parse(request.response);
  inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
  } else {
  inputUsd.value = 'Что-то пошло не так...';
  }
  });

Посмотреть скрипт в работе

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
JSON, Ajax
РЕЙТИНГ МАТЕРИАЛА (4.0 / 1)