Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Очень нубовский вопрос, как послать данные на сервер и получить от него ответ? (https://javascript.ru/forum/library-toolkit-framework/81051-ochen-nubovskijj-vopros-kak-poslat-dannye-na-server-i-poluchit-ot-nego-otvet.html)

Was-Ja 21.09.2020 11:14

Очень нубовский вопрос, как послать данные на сервер и получить от него ответ?
 
Добрый день,

сильно не пинайте, пожалуйста. Последний раз, когда мне такое надо было, это было в 1999 и я это делал через cgi-bin и тогда данных было очень мало.

Сейчас имею html-css-js морду, и сервер на убунте. Хочу из морды послать команды (сотни байт) и получить в ответ сгенерированный html со встроенными небольшими картинками. Кроме самих картинок html может весить много, ибо содержит кучу данных для отрисовки 2Д графики. Пожать бы его на лету тоже бы не мешало.

Понятно несколько юзеров может на сервер послать одновременно разные запросы и каждый получаемый ответ будет содержать свой уникальный html и уникальные картинки. Предполагаем, что пока сервер справится с этими запросами :)

На будущее я хочу, чтобы то, что у меня сейчас на сервере имеется, потом плавно мигрировало к юзеру на его комп хотя бы потому, что мой сервер не будет справляться с юзер запросами (но не сейчас).

Написать программу на С, которая обрабатывала бы команды (из stdin например) и выплевывала бы html могу, но не понимаю, как мне к нему подцепить картинки. Их может быть около сотни, каждая примерно по 1-100кб, желательно их как-то объединить-запаковать, чтобы трафик не поднимать.

Скажите, пожалуйста, на какие правильные ключевые слова мне гуглить, чтобы понять как такое сейчас делается, вроде cgi-bin совсем не безопасно, или?

Спасибо!

Vlasenko Fedor 21.09.2020 11:53

Цитата:

Сообщение от Was-Ja
как мне к нему подцепить картинки. Их может быть около сотни, каждая примерно по 1-100кб, желательно их как-то объединить-запаковать, чтобы трафик не поднимать

вы передаете только ссылки на картинки
броузер клиента их сам скачивает
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="альтернативный текст">

используйте http2 протоокол для получения профита от асинхронной загрузки ресурсов
в спрайты упаковывают обычно неюодьште изображения до 5 кб

Was-Ja 21.09.2020 13:35

Спасибо большое, за совет!

С картинками понял, похоже большие проще положить в специальную директорию, они для всех юзеров одинаковые, а маленькие буду в спрайты упаковывать (понял где гуглить, надеюсь, осилю).

Сейчас пробовал сделать запрос на json, но упорно мой сервер не хочет видеть запрос.

От себя я пробую стартовать что-то вроде (нашел пример в интернете):
<!DOCTYPE html>
<html>
<head>
  <title>
    Отправляем JSON-данные на сервер
  </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body style="text-align:center;" id="body">
  <!-- заголовок -->
  <h1> Простая форма для проверки работы JSON </h1>
  <!-- делаем форму с полями ввода -->
  <p>
    <input type="text" id="name" placeholder="Ваше имя">
    <input type="text" id="lastname" placeholder="и фамилия">
    <!-- по нажатию на эту кнопку данные уйдут на сервер -->
    <button onclick="sendJSON()">Проверить JSON</button>
    <!-- а вот тут они появятся снова, но уже после обработки сервером -->
  <p class="result" style="color:blue"></p>
  </p>
<script>
  // эта функция сработает при нажатии на кнопку
  function sendJSON() {
    // с помощью jQuery обращаемся к элементам на странице по их именам
    let name = document.querySelector('#name');
    let lastname = document.querySelector('#lastname');
    // а вот сюда мы поместим ответ от сервера
    let result = document.querySelector('.result');
    // создаём новый экземпляр запроса XHR
    let xhr = new XMLHttpRequest();
    // адрес, куда мы отправим нашу JSON-строку
    let url = "https://www.elegant-nmr.com/json/json.out";
    // открываем соединение
    xhr.open("POST", url, true);
    // устанавливаем заголовок — выбираем тип контента, который отправится на сервер, в нашем случае мы явно пишем, что это JSON
    xhr.setRequestHeader("Content-Type", "application/json");
    // когда придёт ответ на наше обращение к серверу, мы его обработаем здесь
    xhr.onreadystatechange = function () {
      // если запрос принят и сервер ответил, что всё в порядке
      if (xhr.readyState === 4 && xhr.status === 200) {
        // выводим то, что ответил нам сервер — так мы убедимся, что данные он получил правильно
        result.innerHTML = this.responseText;
      }
    };
    // преобразуем наши данные JSON в строку
    var data = JSON.stringify({ "name": name.value, "lastname": lastname.value });
    // когда всё готово, отправляем JSON на сервер
    xhr.send(data);
  }
</script>
</body>
</html>


на сайте у меня nginx, в его установках я воткнул

add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Headers" "Origin, X-Requested-With, Content-Type, Accept, Authorization";
add_header "Access-Control-Request-Methods" "GET, POST, OPTIONS";

но упорно оно пишет де

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Скажите, пожалуйста, что я делаю не так?

Спасибо!

Vlasenko Fedor 21.09.2020 13:51

https://www.elegant-nmr.com/json/json.php
пока интерпритатор php не обрабатывает файл
смотрите настройки php в nginx

Was-Ja 21.09.2020 14:14

Спасибо большое за ответ!

Поменял php на выполнялку, скомпилленую из С (что и планировал в дальнейшем использовать), но, похоже не в php, а в общих настройках nginx - все-таки я тут что-то делаю не так. Честно говоря, перепробовал уже кучу вариантов, в том числе с https://enable-cors.org/server_nginx.html но пока ничего не помогло

voraa 21.09.2020 18:17

А страница грузится откуда? С этого же сервера? По https?

Was-Ja 21.09.2020 19:26

Спасибо за содействие!

Всяко пробовал, и по https и http с того же сервера ( https://www.elegant-nmr.com/json/ttt.html ) и локально firefox из командной строки пробовал - эффект один и тот же - в логах всегда 405 ошибка.

voraa 21.09.2020 19:46

405 Method Not Allowed — указанный клиентом метод нельзя применить к текущему ресурсу. В ответе сервер должен указать доступные методы в заголовке Allow, разделив их запятой. Эту ошибку сервер должен возвращать, если метод ему известен, но он не применим именно к указанному в запросе ресурсу,

А что такое json.out? CGI скрипт? Тогда нужно что то в настройках сервера менять. Может он не понимает, что это скрипт и думает, что это простой файл, который нужно передать. Но не запросом POST.
Попробуйте GET ему послать.

voraa 21.09.2020 19:57

По запросу
https://www.elegant-nmr.com/json/json.out
в адресной сроке браузера (Это GET) файл просто скачивается (судя по всему программа на С).
Если бы в настройках сервера было указано, что это исполнимый скрипт, он бы стал исполняться на сервере. Так по крайней мере в Аппаче. nginx я не знаю.

voraa 21.09.2020 20:17

Странная проблема с этим nginx.
Похоже он не может запускать CGI скрипты
https://coderoad.ru/11667489/%D0%9A%...BD%D0%B0-Nginx


Часовой пояс GMT +3, время: 21:49.