Отправка 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 нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.

Дата добавления: 2015-10-31