HTML / CSSJavaScriptNode jsПаттерны проектированияПрактические

Ajax

Лекция здесь

Пример отправки ajax запроса с помощью XMLHttpRequest и Fetch

Original source

Задание

Задание создать виджет погоды с использованием технологи ajax

Пример запроса:

Параметры:

  • key: dfa5fa07cd93458daf3122400211101 обязательный параметр без него запрос не будет работать
  • q: Параметр запроса, на основе которого отправляются данные. может быть следующее:
    • Широта и долгота (десятичные градусы), например: q = 48,8567,2,3508
    • название города, например: q = Kharkiv
    • auto: ip поиск IP например: q = auto: ip
    • IP-адрес (поддерживаются IPv4 и IPv6), например: q = 100.0.0.1

Подробнее можно почитать здесь

1const URL =
2    "https://api.weatherapi.com/v1/current.json?key=dfa5fa07cd93458daf3122400211101&q=kharkiv";
3  fetch(URL)
4    .then(function (response) {
5      return response.json();
6    })
7    .then(function (result) {
8      console.log("result", result);
9    });

Описание полей возвращаемых сервером можно проверить здесь

Часть рабочего кода

Original source

Самый простой результат может выглядеть так: result

Необходимо вывести следующие поля

  • feelslike_c - По ощущениям температура в градусах Цельсия
  • condition:text - Текст погодных условий
  • condition:icon
  • condition:code
  • wind_kph - Скорость ветра в километрах в час
  • wind_degree - Направление ветра в градусах
  • cloud - Влажность в процентах
  • humidity -Облачность в процентах
  • gust_kph Порыв ветра в километрах в час
Hello