среда, 26 декабря 2018 г.

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

Комментариев нет:

Отправить комментарий