Прощай, XMLHttpRequest, hello fetch, asynch и await
AJAX - это набор методов для обновления данных на веб-странице без обновления всей страницы путем запроса данных с сервера в фоновом режиме.
Мы собираемся взглянуть на fetch, asynch и await Javascript, чтобы увидеть, как это реализовать, создав веб-страницу с прогнозом погоды, где мы можем изменять данные с помощью раскрывающегося меню, но не обновляя страницу. Мы воспользуемся приложением Python Flask для фактической загрузки данных.
Некоторое время AJAX использовался неправильно - это означает асинхронный Javascript и XML, что означает, что асинхронная функция Javascript выполняет вызов сервера, который возвращает данные XML, но большинство приложений AJAX используют JSON в качестве формата данных, а не XML. И вместо использования fetch использовалась функция XMLHttpRequest - довольно неудобное название и к тому же довольно неудобное в использовании.
Библиотеки Javascript, такие как JQuery, значительно упростили жизнь, но относительно новые дополнения к Javascript, которые мы будем использовать, делают ее еще проще.
Асинхронный вызов с использованием fetch выглядит примерно так:
async function foo(){
let response = await fetch("someurl");
if (response.ok) {
let result = await response.json();
// now do something with the result
} else {
alert(response.status);
}
}
У нас есть функция foo, обозначенная как asynch. Это означает, что когда функция вызывается, поток программы продолжается после вызова функции, в то время как функция делает свои собственные вещи в свое время. (Это асинхронное поведение известно как обещание в Javascript, в основном это функция, которая не разрешается немедленно. У обещаний есть свой собственный синтаксис, но я предпочитаю более очевидный - во всяком случае для меня - синтаксис с использованием asynch и await.)
Внутри функции мы видим, что мы используем fetch, чтобы получить ответ от someurl и присвоить его локальной переменной response (это простейшее использование fetch для выполнения запроса GET). await означает, что это делается не сразу, а только после завершения функции (или выполнения обещания).
Затем ответ проверяется, чтобы убедиться, что он в порядке, и затем мы можем что-то сделать с данными в ответе.
Получите погоду
Мы собираемся получить информацию о погоде из RSS-канала BBC и отобразить ее на веб-странице, подобной той, которую вы видите выше. У нас есть выбор из нескольких городов, и когда мы выберем один, данные на странице обновятся.
Ниже вы можете увидеть суть полной веб-страницы, но сначала давайте сосредоточимся на функции, которая будет получать данные.
Он следует тому же шаблону, что и выше, за исключением того, что в функцию передается параметр - город, для которого нам нужны данные. Этот параметр передается по URL-адресу. Если ответ в порядке, данные (в формате JSON) назначаются переменной weatherJson, и различные поля данных записываются в элементы внутри html, например, источник значка обновляется в теге <img> с идентификатором «FeedImage» от weatherJson.feed.image.
Ниже представлена полная веб-страница, которая включает указанную выше функцию и HTML-код, содержащий данные и раскрывающееся меню, которое можно использовать для выбора нового прогноза погоды в городе. Когда выбор из раскрывающегося списка изменяется, он вызывает функцию fetchweather со значением города, который был выбран.
Также стоит отметить, что значения по умолчанию для полей устанавливаются непосредственно из приложения Flask на стороне сервера с помощью его функции шаблонов, например
<img id="feedImage" src="{{weatherData.feed.image.href}}" />
Здесь weatherData.feed.image.href относится к переменной Python - мы скоро увидим это.
Это упрощенная страница, которая будет выглядеть так:
В конце статьи я включу суть полной страницы и ссылку на действующую версию приложения.
Теперь нам нужно вкратце взглянуть на приложение Python Flask, которое предоставляет данные на веб-страницу. Если вы не знакомы с Flask, я написал здесь очень краткое введение:
В приложении есть два маршрута: индексная страница, которая загружается при запуске, и другая, называемая fetchweather, которая является функцией, которая вызывается из Javascript на веб-странице. Оба они используют функцию getweather, которая загружает RSS-канал BBC Weather для требуемого города и создает данные для веб-страницы.
Страница индекса передает эти данные в качестве параметра в render_template, и он берет файл simpleindex.html и вставляет в него данные.
Функция fetchweather делает то же самое, но возвращает данные в виде JSON для использования функцией fetch на веб-странице.
Вы можете увидеть живую версию веб-страницы:
И суть кода для всей веб-страницы и приложения Flask находится в самом конце этой статьи.
Спасибо, что прочитали, и я надеюсь, что это было полезно. Если вы хотите знать, когда я публикую другие статьи, рассмотрите возможность подписки на мою бесплатную и периодическую информационную рассылку здесь.
Вот полный код.
Суть веб-страницы:
Суть приложения Flask:
