<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Отправка POST-запросов через JavaScript

Отправка POST-запросов через JavaScript

Уже достаточно давно многие сайты обладают динамическими страницами, то есть они обновляются без перезагрузки. Это достигается путём обращений к серверу через JavaScript, в большинстве случаев, это POST и GET запросы. И практически всегда такие сайты используют для этого Ajax. И далеко не все знают (к сожалению), что Ajax - это не отдельный язык, а всего лишь библиотека JavaScript. Вывод: Ajax - это лишь удобный способ отправить POST-запросы, но всё это можно сделать и без его помощи. Вот как отправить POST-запросы через JavaScript без Ajax, я расскажу в этой статье.

Мы с Вами сейчас решим классическую задачу - это суммирование двух чисел, заданных пользователем. То есть мы с Вами считаем из текстовых полей 2 числа, отправим их на сервер, получим ответ и выведем на страницу. И всё это без перезагрузки страницы.

Начнём с простого: написание PHP-кода:

<?php
  $a = $_POST["a"];
  $b = $_POST["b"];
  echo $a + $b;
?>

Здесь всё элементарно, поэтому даже не буду комментировать. А вот теперь более сложная часть - клиентская:

<script type="text/javascript">
  /* Данная функция создаёт кроссбраузерный объект XMLHTTP */
  function getXmlHttp() {
    var xmlhttp;
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  }
  function summa() {
    var a = document.getElementById("a").value; // Считываем значение a
    var b = document.getElementById("b").value; // Считываем значение b
    var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
    xmlhttp.open('POST', 'test.php', true); // Открываем асинхронное соединение
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку
    xmlhttp.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b)); // Отправляем POST-запрос
    xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
      if (xmlhttp.readyState == 4) { // Ответ пришёл
        if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
          document.getElementById("summa").innerHTML = xmlhttp.responseText; // Выводим ответ сервера
        }
      }
    };
  }
</script>
<div>
  <input type="text" name="a" id="a" />
  <br />
  <input type="text" name="b" id="b" />
  <br />
  <input type="button" value="Сумма" onclick="summa()" />
  <p>Сумма равна: <span id="summa"></span></p>
</div>

HTML-код я комментировать не буду, поскольку он совершенно прозрачный. А вот к JavaScript я немного добавлю, несмотря на подробные комментарии. Во-первых, функция getXmlHttp() является универсальной. Вы её можете смело копировать в свои скрипты. Её задача вернуть такой XMLHTTP, чтобы он работал в любом браузере. Потому что самый популярный вариант - это new XMLHttpRequest(), однако, он не работает, например, в IE6. Другие варианты также не являются универсальными, поэтому здесь мы просто подбираем под любой браузер рабочий вариант.

Я написал также в комментариях про "асинхронную работу". Есть ещё синхронный вариант. Отличие только в том, что в синхронном пока не будет получен ответ от сервера, браузер работать не будет, он просто повиснет. Мне трудно придумать такую задачу, где это необходимо, поэтому я сразу написал асинхронный вариант. Он работает следующим образом: мы отправляем запрос и ждём ответа, но при этом браузер не виснет. А когда ответ приходит (xmlhttp.readyState == 4), то мы сразу обрабатываем ответ. Вот это и есть асинхронный вариант работы, он чуть-чуть сложнее, но только его и нужно использовать (за исключением очень редких случаев).

Вот таким способом отправляются POST-запросы через JavaScript. Как видите, Ajax нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (54):

fmeilja fmeilja 18.04.2012 21:15:38

Извиняюсь за невежество, но что значат эти try{}catch{}

Ответить

Admin Admin 18.04.2012 21:30:01

http://myrusakov.ru/exception-javascript.html

Ответить

RussianPro RussianPro 19.04.2012 16:29:03

Ахренеть... и в каких случаях это может понадобиться?

Ответить

Admin Admin 19.04.2012 16:33:10

Для создания динамики на страницах, без "левых" библиотек.

Ответить

soffrick soffrick 12.05.2012 15:54:57

Спасибо, то что нужно :)

Ответить

mischa.samolkaev mischa.samolkaev 17.07.2012 09:49:35

а на на стороне сервера в этом примере echo - передача ответа, а не вывод?

Ответить

Admin Admin 17.07.2012 10:44:36

Это вывод результата и ничего больше.

Ответить

mischa.samolkaev mischa.samolkaev 17.07.2012 11:13:38

responseText содержит все что бало echo?

Ответить

Admin Admin 17.07.2012 12:17:51

Да, в нём результат работы echo и будет.

Ответить

mischa.samolkaev mischa.samolkaev 17.07.2012 12:29:05

т.е на сервере должно выводиться толко то что является ответом яваскрипту?

Ответить

Admin Admin 17.07.2012 13:04:47

Разумеется, надо выводить только то, что нам нужно.

Ответить

veyrona veyrona 12.10.2012 09:36:31

Просто, быстро, легко и со вкусом !

Ответить

malina95 malina95 04.11.2012 13:07:29

Михаил, скажите пожалуйста как можно после всего незаметно для пользователя обновить страницу? я просто пытаюсь сделать авторизацию без перезагрузки, но без неё не получается, всё работает но аватарка и всё остальное появляется только при обновлении страницы

Ответить

Admin Admin 04.11.2012 13:22:06

Тут уже нужно использовать DOM, либо JQuery. Добавлять одни элементы, удалять другие элементы.

Ответить

malina95 malina95 04.11.2012 13:40:16

Ясно, значит я опять прогорел с юзабилити

Ответить

kgm96.1996 kgm96.1996 02.12.2014 00:28:46

здравствуйте! при обновлении ajax страницы она возвращается к первоначальному виду. как сделать так чтобы после перезагрузки она не слетала ???

Ответить

angry_bird angry_bird 12.07.2013 23:30:07

Легко. _htmlbook.ru/html5/history

Ответить

Fabos Fabos 05.11.2012 18:09:57

Вот отправляю данные к php, через if (!defined("...")) die ("Hacking attempt!"); Не проходит, приходиться закрывать. Скажите как можно выполнить операцию без закрытия? И безопасен ли ваш ментод?

Ответить

Admin Admin 05.11.2012 18:44:12

Метод не представляет ни малейшей опасности, тут надо думать, что в PHP писать, а JavaScript и HTML - вообще клиентские языки.

Ответить

Fabos Fabos 05.11.2012 18:52:22

Я делаю проверку на содержание постов. Такой вопрос, может не по теме но охота узнать. Нужно закрыть доступ к каталогу, в котором находится php скрипт.Создаю htacess, с содержимым: [code]Order Deny,Allow Deny from all[/code] После я не могу обратиться к скрипту через post запрос.Какие выходы? Можно ли закрыть доступ к каталогу и сохранить весь процесс работы?

Ответить

Admin Admin 05.11.2012 18:54:28

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

Ответить

Fabos Fabos 05.11.2012 19:02:34

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

Ответить

Admin Admin 05.11.2012 19:03:37

Deny from all

Ответить

Fabos Fabos 05.11.2012 19:13:41

Прописал, положил. Не хочет присылать ответ php скрипт к js. На скок я понимаю.Нет выхода, или я что та не так сделал?

Ответить

Admin Admin 05.11.2012 22:23:30

Я писал, что НЕ надо засовывать обработчики в закрытые папки. Всё, что можно туда отправить - это библиотеки, а к ЛЮБЫМ обработчикам должен иметь доступ ЛЮБОЙ пользователь. Если не понимаете, почему так, а не по-другому, прочитайте про противоречие чуть выше, которое Вы требуете, и постарайтесь в него вникнуть.

Ответить

Fabos Fabos 05.11.2012 23:10:53

Спс, нашел выход.

Ответить

Surovuy Surovuy 12.11.2012 10:55:43

Михаил, подскажите, пожалуйста, а как таким же образом передать значения выбранных чекбоксов?

Ответить

Admin Admin 12.11.2012 10:58:34

Взять checkbox через JS и проверить значение свойства checked: document.my_form.check.checked

Ответить

dsmts dsmts 14.01.2013 19:01:56

А возможно таким способом вывести не одну строку, а массив например. Например, встал на фамилию в списке, а серверный скрипт вернул все данные пользователя и вывести их в таблицу.

Ответить

Admin Admin 14.01.2013 19:20:38

Можно, да. Можно принять строку в формате JSON, полученную от PHP, далее в JS уже её превратить в обычный массив.

Ответить

dsmts dsmts 14.01.2013 20:10:22

Спасибо, буду разбираться.

Ответить

sync.o sync.o 01.02.2013 20:21:41

Михаил, попробовал поюзать ваш скрипт. Столкнулся с проблемой в IE9 на сайтах с кодировкой windows-1251. Возникает ошибка при обращении к xmlhttp.responseText. Есть какие-нибудь идеи?)

Ответить

Admin Admin 01.02.2013 20:28:26

Отправка через чистый JS или с использованием Ajax всегда требует кодировки UTF-8. Поэтому если данная функциональность необходима, то надо менять кодировку сайта.

Ответить

sync.o sync.o 01.02.2013 20:37:19

Вот только спросил, сразу получилось)) Проблема решилась, когда принудительно задал кодировку ответа сервера: header('Content-type: text/html; charset=windows-1251');

Ответить

sync.o sync.o 01.02.2013 20:38:17

Вы насчет "менять кодировку сайта" не шутите, Вконтакте на windows-1251!

Ответить

Admin Admin 01.02.2013 20:42:34

Да, Вы правы. Но постоянно слышу проблемы от людей, что с этой кодировкой у них при использовании того же Ajax проблемы. С UTF-8 таких проблем нет вообще. Поэтому всё равно лучше переходить на эту кодировку.

Ответить

Юрий В Юрий В 25.03.2013 02:37:49

Михаил, файл на сервере не грузится , а отладчик выдает . Origin null is not allowed by Access-Control-Allow-Origin. ..

Ответить

Admin Admin 25.03.2013 04:19:07

Попробуйте в другом браузере ещё.

Ответить

Юрий В Юрий В 25.03.2013 11:24:31

пробовал... Тут что-то связанное с крос-домеными запросами (с домена А на домен Б).

Ответить

Алек Алек 16.04.2013 13:04:38

Спасибо, надо добавить этот скрипт в арсенал.

Ответить

ilyadenisovid ilyadenisovid 16.04.2013 19:32:11

А как можно это прикрепить к добавлению комментариев(лучше пример)

Ответить

Admin Admin 16.04.2013 20:32:13

Пример привести не могу, тут не 10 строчек, а все 100, и это как минимум. Поэтому изучайте JS, изучайте PHP и MySQL, изучайте HTML. Без этих знаний, даже мой код не поможет. С этими знаниями Вы сами всё напишите.

Ответить

ilyadenisovid ilyadenisovid 16.04.2013 21:25:34

Михаил, сам код добавления комментариев у меня есть, с данными языками(HTML, CSS, PHP, MySQL) у меня все хорошо, я хочу увидеть пример кода js именно для комментариев

Ответить

Admin Admin 17.04.2013 04:16:59

Не вижу проблем получить на JS данные из формы, далее отправить эти данные, как в этой статье отправляются "a" и "b". Форма обычная, JS такой же, как и в статье.

Ответить

AntDant AntDant 22.06.2013 02:44:13

encodeURIComponent можно убрать

Ответить

AntDant AntDant 22.06.2013 02:46:15

xmlhttp.send("a=" + a +"&b=" + b); // Отправляем POST-запрос вот и так будет работать

Ответить

igorka81 igorka81 06.08.2013 11:20:30

Михаил нужна ваша помощь! Как поступить - есть js селекторы которые должны передать значения на эту же страницу как POST данные пробовал обрабатывать форму на php . но затирает значения после отправки Пробовал на js(генерирую submit(); но после этого нельзя операторы добавлять - данные не передаются) пробовал асинхроным запросом к этому же документу , но что-то нет самого массива POST б а ответ js мне как бы и не нужен - надо дальше запускать функцию php выборки

Ответить

slalek slalek 14.02.2014 17:44:48

Михаил, а как отправить <span id="summa"></span> в обратную связь? У меня есть калькулятор, так вот все значения отправляются кроме итоговой. Здесь есть name благодаря ему значение отправляется в POST <input type="text" name="a" id="a" /> А здесь нет возможности поставить name <span id="summa"></span> Скрипт на чистом яве без библиотек

Ответить

Vanya Vanya 20.02.2014 08:44:10

Добрый день Михаил, огромная Вам благодарность за статью! Возник один вопрос, хочу что бы функция возвращала результат, т.е. пытаюсь сделать return xmlhttp.responseText; но приходит только undefined, хотя alert(xmlhttp.responseText) все прекрасно отображает. Подскажите в чем может быть проблема?

Ответить

tikkiwiki tikkiwiki 04.03.2014 13:56:08

Как правильно возвращать в JS: http://javascript.ru/return

Ответить

AllaW AllaW 20.03.2014 00:30:44

Спасибо громадное! Я из этого примера сделала простой и элегантный скрипт для заказа обратного звонка. Долго искала в интернете что-то, чтобы просто вставить на сайт - но там все либо очень сложно и подробности платно, либо просто РНР форма обсуждается. А тут - конфетка!

Ответить

Nentra Nentra 28.08.2014 19:29:45

Помогло - наконец то нашёл то, что мне было нужно. Спасибо за статью.

Ответить

zeratul zeratul 30.06.2016 13:02:07

Здравствуйте, Михаил! Прошу Вас подсказать как решать такую задачу - есть открытый http сайт от транслирует котировки примерно 1 раз в сек которые обновляются на сайте, мне надо с сайта эту котировку получить для дальнейшей обработки. Подходит ли тема данного урока для решения этой задачи или надо искать что-то другое?

Ответить

kostya_nad kostya_nad 14.08.2017 16:07:16

в on submit return false надо было сделать, иначе в браузерах страницы рефрешнет

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.