<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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 раз в сек которые обновляются на сайте, мне надо с сайта эту котировку получить для дальнейшей обработки. Подходит ли тема данного урока для решения этой задачи или надо искать что-то другое?

Ответить

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