STM Урок 128. LAN8742A. LWIP. NETCONN. HTTP. AJAX. Часть 1

 

 

 

Продолжим работу с LWIP NETCONN, а также с протоколом HTTP.

И сегодня мы попытаемся не просто отправить страничку браузеру с нашего контроллера, но отправить данные в определённое место страницы, причём без перезагрузки всей страницы.

Раньше нам этого делать не удавалось, так как мы применяли технологии CGI и SSI, которые такого себе позволить не могли.

И поэтому нам на помощь пришла технология AJAX, которая делать это позволяет.

AJAX означает Asynchronous Javascript and XML. Из данной расшифровки следует, что AJAX использует именно язык JavaScript. Надеюсь, все мы знаем, что данный язык поддерживается всеми браузерами. Это язык не для сервера, тем более уж не для нашего контроллера. Поэтому писать мы код для AJAX будем именно в странице либо в отдельном файле со скриптом, а не в коде для контроллера. Но тем не менее у нас будет задача и для контроллера — предоставить данные, которые у нас запросит браузер, воспользовавшись технологией AJAX, а также принять данные, которые нам передаст браузер, что также возможно. Также из расшифровки аббревиатуры мы видим, что AJAX — это возможность обмена информацией между браузером и сервером именно в асинхронном режиме, то есть, мы запросили из браузера данные у сервера, а сервер нам пока их не передал, он их ещё готовит, но браузер их не ждёт, а продолжает выполнять дальнейший код, а когда данные придут, то браузер уже это обработает. Тем самым обеспечивается то, что вывод страницы не будет тормозить вследствие ожидания данных от сервера. Поэтому технология AJAX нам позволяет не просто осуществить обмен данными браузера с сервером без перезагрузки всей страницы, а также, если этих данных будет очень много, то также не вызвать замедление загрузки содержимого страницы.

Я, конечно же, не буду здесь выкладывать все тонкости языка JavaScript и стилизации CSS. Мы просто ими воспользуемся для преследования наших целей. Кому интересно научиться полноценно оперировать данными языками, то на этот счёт есть масса уроков и информации, правда не у меня. Я мог бы конечно дать неплохие уроки по данным языкам и не только, но, увы, всё невозможно успеть.

Поэтому давайте пока перейдём к проекту.

Проект был сделан из проекта прошлого занятия LAN8742_HTTP_SERVER_NETCONN и получил имя LAN8742_HTTP_SERVER_AJAX_NETCONN за счёт использования технологии AJAX.

Откроем наш проект в Cube MX и включим генератор случайных величин RNG

Затем идём в Clock Configuration и немного изменим регуляторы

 

 

Сгенерируем проект для System Workbench и откроем его там. Установим уровень оптимизации в 1, уберём при наличии отладочные настройки и закомментируем неизвестные компилятору строки в файле main.c.

Пока проект мы собирать не будем, так как мы знаем. что он все равно не соберётся.

А начнём пока готовить файл страницы.

Создадим нашу страницу с именем index.html, сохраним её в папке fs каталога, в котором мы собираем файл fsdata.c, и откроем её в любом редакторе. Удобнее, конечно это делать, например в SublimeText, но если его нет под рукой то подойдёт и блокнот Notepad++.

Первоначальный текст нашей страницы будет следующий:

 

Это обычный WEB-документ с заголовком и разбивкой на блоки. У нас будет блок с заголовком, блок с контентом и блок с подвалом. Блок с контентом будет разбит на 2 части — основной контент с идентификатором «article», а также сайдбар (правая боковая панель) с идентификатором «sidebar». Если мы попытаемся открыть такую страницу в браузере, то мы ничего не увидим. Наши блоки будут следовать друг за другом, будут они шириной во всю страницу и с высотой 0, так как в них нет никакого контента (содержимого). Но это мы исправим за счёт стилизации, недаром же мы каждому блоку присвоили идентификаторы. Для этого нам нужно создать скрипт со стилями наших блоков, можно это сделать и в тексте самой страницы, но чтобы не нагружать её в целях лучшей читабельности лишней информацией, то мы поместим наши стили блоков и затем не только блоков в отдельный файл, назовём его style.css и поместим в папку с самой страницей.

Первоначальное содержание данного файла будет следующее

Мы задали определённый тип расположения наших блоков, также применили к ним фон, в некоторых местах даже в виде картинок, придали им определённую прозрачность. Кто знает css, тот поймёт.

Также не забываем в папку со страницами положить наш файл с прошлого урока 404.html для выдачи его пользователю при запросе несуществующего документа.

Также поместим папку IMG с файлами картинок для фонов в папку с нашей страницей.

Помимо данных картинок мы туда положим ещё четыре картинки с прошлого урока img01.jpg — img04.jpg.

Также не забываем подключить файл со скриптами в нашей странице index.html в тегах head

 

 

И, даже если мы сейчас откроем нашу страницу в браузере, то мы также ничего там не увидим, так как блоки у нас пустые.

 

 

Поэтому начнём их потихоньку набивать содержимым. Содержимое мы будем брать из страницы прошлого урока.

Блок header:

 

Блок article:

 

Весь блок я сюда постить не стал, так как очень много текста. Я скорее всего прикреплю потом всю заархивованную папку со всеми файлами вместе с проектом внизу страницы. Да и вообще вы можете в данный блок размещать любую информацию, как говорится, на ваш вкус и цвет.

Блок sidebar:

 

 

Здесь просто список.

Ну и блок footer:

 

Сохраним изменения в странице и откроем её в браузере

 

 

Наша страница приобрела нормальный вид.

Осталось только придать функционал.

Давайте пока проверим работу нашего сервера.

Сгенерируем файл fsdata.c, обновим дерево проекта, отключим компиляцию данного файла и попробуем собрать проект.

Проект теперь должен будет собраться.

В функции задачи обработки запросов добавим запрос файла css-скриптов

 

Также добавим запросы картинок фоновых изображений

 

 

Соберём ещё раз код, прошьём контроллер и попробуем нашу страницу увидеть в браузере, набрав в адресной строке IP-адрес нашего сервера.

Мы должны получить ту же картину, как и при локальном открытии нашей страницы.

Это всё были только подготовительные мероприятия.

А функционал для отправки и приёма данных между клиентом и сервером мы продолжим писать в следующей части нашего занятия.

 

Предыдущий урок Программирование МК STM32 Следующая часть

 

 

Отладочную плату можно приобрести здесь 32F746G-DISCOVERY

 

 

Смотреть ВИДЕОУРОК (нажмите на картинку)

 

STM LAN8742A. LWIP. NETCONN. HTTP. AJAX

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*