Общее представление об AJAX. Часть 3

Отправка запроса POST

При отправке запроса GET все параметры указываются как составная часть URL. А при отправке запроса POST эти данные указываются в теле самого запроса HTTP. Следует, однако, иметь в виду, что если требуется доступ к этим параметрам на стороне сервера, то необходимо правильно сформировать HTTP-заголовок Content-type. Это делается с помощью метода setRequestHeader() следующим образом:

var XMLHttp = getXMLHttp();
XMLHttp.open("POST", "post.php", true);
XMLHttp.onreadystatechange = handlerFunction;
name = encodeURIComponent("Вася");
surname = encodeURIComponent("Пупкин");
XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttp.send("name=" + name + "&surname=" + surname);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    window.alert("Returned data: " + XMLHttp.responseText);
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Приведенный выше сценарий отправляет по указанному адресу POST-запрос. Скрипт post.php просто возвращает полученные данные:

<?php
  header('Content-Type: text/plain; charset=UTF-8');
  if (isset($_POST['name']) && isset($_POST['surname'])) {
    echo $_POST['name'] . ' ' . $_POST['surname'];
  } else {
    echo 'No data sent';
  }
?>

Разумеется, по запросу POST можно предоставить любой другой сценарий в рамках соответствующей серверной технологии или же отправить простой текстовой файл.

Ссылки по теме:

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

  1. Светлана:

    Очень хорошие статьи. Спасибо!

    А не подскажите, как вместо этих строк
    [ name = encodeURIComponent("Вася");
    surname = encodeURIComponent("Пупкин"); ]
    взять значения из полей формы?

  2. admin:

    Светлана, взять значения из полей формы можно с помощью getElementByID(), если поле формы имеет уникальный ID или так:
    inputValue = document.forms['myform'].elements['someInput'].value
    Рекомендую прочитать:
    Доступ к элементам формы
    Доступ к элементам формы (продолжение)

Оставьте свой отзыв