AJAX – технология обращения к серверу без перезагрузки страницы.

Поддержать сайт

До этого момента web страницы обменивались с контролерам данными только по средствам запросов GET и POST. Каждый раз когда web страница получала запрос она должна была быть перерисована. Более интересным решением является использование AJAX.
AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.
Фактически при помощи AJAX страница отправляет запросы к серверу и получает ответы без перезагрузки. Ответы могут изменять содержимое страницы и ее внешний вид.
По использованию AJAX и arduino на русском языке мне не удалось найти качественной информации, так мне пришлось повозится и потратить кучу времени. Надеюсь этот видео ролик сэкономит кучу вашего времени.

Скетч:  SMART_ROOM_AJAX

Видео

Поддержать сайт

45 мыслей о “AJAX – технология обращения к серверу без перезагрузки страницы.”

  1. Спасибо за ролик. А таким способом можно общаться с несколькими контроллерами? скажем 1-й – это сервер и обработчик данных, а остальные n-количество будут клиентами с датчиками, сенсорами и т.д, которые отправляют данные серверу..

    1. Так тоже можно сделать. Мне думается, что когда все устройства подключаются к роутеру, решение получается более гибким. Однородная среда. А вот например создать web страницы для управления любым из устройств причем в сети будет более интересно.

      1. Я это и имел ввиду, роутер, к нему подключаются все устрайства, 1 сервер с вебмордой и несколько других esp, можно даже самых упрощенных(esp-01). К серверу подключить 16х2 дисплей для вывода важной информации. Можно сделать крутой умный двор в частном секторе с минимумом проводов. Много идей, найти б еще время))

  2. Спасибо за ваш труд – все работает.
    У меня только по будильнику отсылаются команды IR на светодиодную ленту. При сработке зеленый свет, через 10 минут синий ну а если опаздываю красный через 15.

  3. не заводится этот пример никак=( в браузере пишет FileNotFound…при этом пример SDWEBSERVER работает без проблем..

  4. все заработало,спасибо=)сейчас следующая проблема,в меню “установки” не сохраняются имя сети и пароль,ну и SSDP Name тоже,вобщем ничего…ну да ладно,буду разбираться..

    1. В меню установки эти поля еще не задействованы. Хотя я вроде менял веб страницы проекта, чтоб не было путаницы, но видимо эта страница закралась в архив. 🙂

  5. вылезла проблема посерьезней..esp перезагружается каждые то ли 28 то ли 30 сек,невозможно пользоваться…у меня у одного такое?

    1. У меня на плате работает неделями без единой ошибки. Это может быть грязное питание или слабый ток источника или завышенные частоты для Flash и процессора при компиляции скетча. У вас какая ESP плата?

      1. печаль =(до этого пытался все это запустить на esp8266 07,как и писал выше каждые около 30 сек модуль перегружался…почитал на форумах,вроде как это проделки watchdog и бывают 07 как раз с такой проблемой…фиг с ним,сегодня купил новый модуль модели 12е,но не тут то было,все тоже самое…уточню,что другие скетчи,даже ваши,не имеют такой проблемы на обоих модулях!проблема именно с этим примером с AJAX…

      2. хотя нет,извиняюсь,остальные примеры тоже ребутятся…спутал,нормально работает на прошивке nodemcu….то есть выходит,что проблема не аппаратная,а софта,библиотек или чего еще там…очень жаль,будет время буду дальше разбираться…

    2. Такая-же ерунда. Вылетает ровно каждую минуту.
      Терминал выдает :

      Exception (0):
      epc1=0x40106fde epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000

      ctx: sys
      sp: 3ffffd80 end: 3fffffb0 offset: 01a0

      >>>stack>>>
      3fffff20: 40226af7 a134fe18 4021c61c 3ffede38
      3fffff30: 3fff4754 00000001 40226b36 4021c635
      3fffff40: 40226945 3fff47ac 3fffff80 3fff33ec
      3fffff50: 40220000 3fff4754 3ffef960 402272f8
      3fffff60: 3fff47ac 3fff33ec 3ffeb9ae 40226097
      3fffff70: 3fff33ec 00000014 40226642 3fff47ac
      3fffff80: 3fff33ec 3fffdc80 3fff344c 3fff1c90
      3fffff90: 40231ff7 3fff47ac 00000000 40210093
      3fffffa0: 40000f49 3fffdab0 3fffdab0 40000f49
      <<<stack<<<

      ets Jan 8 2013,rst cause:2, boot mode:(3,7)

      load 0x4010f000, len 1264, room 16
      tail 0
      chksum 0x42
      csum 0x42
      ~ld
      *WM:
      *WM: AutoConnect
      *WM: Connecting as wifi client…
      *WM: Using last saved values, should be faster
      и т.д…
      Каждую минуту четко. Так что это в коде проблемма, я думаю.

  6. в общем отключил SSDP и все заработало…а зачем оно вообще нужно,чтобы не вводить адрес в браузере вручную,а по ярлычку в сетевом окружении вызывать и все??

    1. Скорее всего это что-то с IDE. Работа SSDP не зависит от платы, а нужно оно за тем чтоб программное обеспечение могло находить устройства по имени. Например две платы ESP могут находить друг друга в сети.

  7. Сергей подскажите – как должен выглядеть запрос в браузере для включения определённого реле без захода на страницу?
    ип адрес:8080/lam? а дальше

  8. Приветствую! Спасибо за примеры, всё просто и доступно!
    Я у себя немного упростил обработку XML. Если соблюдать два условия (что мне кажется разумным в этом проекте)
    1) XML без вложенных элементов;
    2) Наименование атрибута XML = id элемента HTML;
    Тогда функцию обработки можно переписать следующим образом:

    function handleServerResponse(){
    if(xmlHttp.readyState==4 && xmlHttp.status==200){
    xmlResponse=xmlHttp.responseXML;

    x = xmlHttp.responseXML.documentElement.childNodes;
    for (i = 0; i < x.length ;i++) {
    var el = document.getElementById(x[i].nodeName);
    if (el != null){
    if (el.hasAttribute("value"))
    document.getElementById(x[i].nodeName).value = x[i].childNodes[0].nodeValue;
    else
    document.getElementById(x[i].nodeName).innerHTML = x[i].childNodes[0].nodeValue;
    }
    }
    }
    }
    т.е. пробегаем по всем элементам (1-го уровня) XML, ищем в HTML элементы с совпадающим id, и присваиваем им значения.
    Плюсом данной обработки что её не надо изменять при добавлении или удалении элементов.

  9. Спасибо Сергей. Просто надо было срочно и поэтому пошел по пути прямого Ареста. Написал приложение для андройда теперь счастлив как никогда. Система заработала без рук.
    Окей гугл открыть люстра и так далее.

  10. Спасибо за проделанную работу, все работает! Не много поправил под свои нужды и столкнулся с проблемкой… При срабатывании будильника у меня светодиоды гаснут а не загораются. В какой части кода можно это изменить?

    1. У меня используется режим 0 на пине реле включено. Это можно задать в функции Reley();.
      Будильник передает данные на включение в функции DisplayTime();
      Можно исправить логику в функции Reley(); там LOW нужно поменять на HIGH, а HIGH на LOW.

  11. Привет.
    Большое СПАСИБО за примеры!
    Вот с данным примером я чуть помучился, сразу после конфигурации через WIFIManager у веб сервера на 80 порту было connection refused. Помог пример от автора WiFiManager https://gist.github.com/tzapu/ecc0759829d30d5a6152 , кстати там я подсмотрел и новый синтаксис, который позволяет компелить ваши скетчи в новых версиях Arduino IDE.
    Например:
    у вас – HTTP.send(200,”text/xml”,XML);
    по новому – HTTP->send(200,”text/xml”,XML);

    Всем удачи и интересных проектов.

  12. Добрый день. Подскажите пожалуйста, как правильно принять на сервер данные h1, m1 из отправленного запроса?
    var request = new XMLHttpRequest();
    request.open(“GET”, “/Time?h1=”+h1+”&m1=”+m1, true);
    request.send();

    Хочу просто получить значения из h1 и m1 и дальше выполнять с ними действия в скетке.

    1. На esp
      HTTP.on(“/Time”, handle_Time);

      void handle_Time() {
      int h = HTTP.arg(“h1”).toInt(); // получаем параметр h1 и переводим в формат целого числа
      int m = HTTP.arg(“m1”).toInt();
      //Делай что нужно
      HTTP.send(200, “text/plain”, “OK”); // ответ на запрос
      }

  13. На arduino nano как это сделать? Я так понимаю, что HTTP.on() и HTTP.arg() это функции из какой то библиотеки, которой у меня нет. У меня они не определяются.

  14. Здравствуйте, спасибо за ваш проект. Скажите как сделать запрос не из проги а с web на отправку кода ИК передатчика.. то есть . написать на странице HTML запрос (например на включение TV)

  15. Здравствуйте. Спасибо за ваш труд. Пытаюсь переделать код под свои нужды. Но есть проблема с отправкой XML запроса со страницы. 8266 XML страницу формирует. Данные в ней обновляет, но из формы не получается отправить запрос. Подскажите где может быть проблема.

    Часть скрипта

    function handleServerResponse(){
    if(xmlHttp.readyState==4 && xmlHttp.status==200){
    xmlResponse=xmlHttp.responseXML;

    xmldoc = xmlResponse.getElementsByTagName(‘response’);
    message = xmldoc[0].firstChild.nodeValue;
    document.getElementById(‘temp’).value=message;
    }

    сам запрос

    спасибо

    1. не понимаю почему не вставляется. наверное воспринимает как HTML код

      input type=”text” value=”00″ name=”temp” id=”temp” size=”9″ (убрал скобки)

  16. Вот как бы так сделать, чтобы цвет кнопочек менялся(например красный-зеленый), используя AJAX, в зависимости от состояния реле на ESP?. Пока не получается разобраться к примеру :
    ………
    document.getElementById(‘collorButton’).innerHTML=message;
    …….

    не работает. В message к примеру “red”.

  17. Вот как бы так сделать, чтобы цвет кнопочек менялся(например красный-зеленый), используя AJAX, в зависимости от состояния реле на ESP?. Пока не получается разобраться к примеру :
    ………
    document.getElementById(‘collorButton’).innerHTML=message;
    …….
    input type=”submit” style=”background-color: collorButton” name=”state” value=”6″ onclick=”sendbutton(6);”
    не работает. В message к примеру “red”.

  18. Разобрался, теперь кнопочки меняют цвет, использовал такой функционал:
    message=xmlResponse.getElementsByTagName(‘statusButton’)[0].firstChild.nodeValue;
    if(message==”ON”)document.getElementById(‘butLight’).classList.add(‘btn-danger’) ;
    else document.getElementById(‘butLight’).classList.remove(‘btn-danger’) ;

    1. Сергей, разжуйте подробнее про xml и что куда добавить. Тоже хочу, чтоб кнопка показывала цветом состояние реле.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.