LOGO AJAX учебник
Ajax JavaScript POST

POST

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

Например, в блогах посетители обычно могут вводить свои комментарии к записям в HTML-форму, после чего они передаются серверу методом POST и он помещает их на страницу.

При этом передаваемые данные (в примере с блогами — текст комментария) включаются в тело запроса.

Аналогично с помощью метода POST обычно загружаются файлы на сервер.

В отличие от метода GET, метод POST при многократном повторении одних и тех же запросов может возвращать разные результаты

Например, после каждой отправки комментария будет появляться одна копия этого комментария.

При результатах выполнения 200 (Ok) и 204 (No Content) в тело ответа следует включить сообщение об итоге выполнения запроса.

Если был создан ресурс, то серверу следует вернуть ответ 201 (Created) с указанием URI нового ресурса в заголовке Location.

Сообщение ответа сервера на выполнение метода POST не кэшируется.

Javascript POST

Если вы не читали предыдущую статью, лучше начните с нее.

Итак начнем разбирать отправку уже непосредственно формы.

В отличие от GET, здесь нам придется сначала упаковать форму, прежде чем начать отправлять.

Дело в том, что когда мы находимся в браузере, то при нажатии кнопки Submit он сам всю форму упаковывает и отсылает.

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

Упаковка формы заключается в написании строчки, где будут указаны имена полей, а также их значения, причем все это дело должно быть в urlencoded формате.

Вручную это делать непрактично.

Поэтому напишем функцию, которая этим занимается автоматически, вне зависимости от количества и содержания полей.

"Дайте мне форму и я ее упакую!"
// фукнция Автоматической упаковки формы любой сложности
function getRequestBody(oForm) { 
	var aParams = new Array();
	for(var i = 0; i < oForm.elements.length; i++) {
		var sParam = encodeURIComponent(oForm.elements[i].name);
		sParam += "=";
		sParam += encodeURIComponent(oForm.elements[i].value);
		aParams.push(sParam);
	}
	return aParams.join("&");
}
// функция возврщает строку в которой и содержаться поля формы в нужном формате
Отправка формы ничем не отличается от метода GET, если строка параметров уже сформирована.

Используя функцию ajaxGet() и createXMLHttp() напишем функцию
ajaxPost()
function postAjax(url, oForm, callback) { // функция Ajax POST
	// создаем Объект
	var oXmlHttp = createXMLHttp();
	// получение данных с формы
	var sBody = getRequestBody(oForm);
	// подготовка, объявление заголовков
	oXmlHttp.open("POST", url, true);
	oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// описание функции, которая будет вызвана, когда придет ответ от сервера
	oXmlHttp.onreadystatechange = function() {
		if (oXmlHttp.readyState == 4) {
			if (oXmlHttp.status == 200) {
				callback(oXmlHttp.responseText);
			} else {
				callback('error' + oXmlHttp.statusText);
			}
		}
	};
	// отправка запроса, sBody - строка данных с формы
	oXmlHttp.send(sBody);
}
url - это непосредственно адрес куда идет запрос.
oForm - Объект формы, с которого берутся данных для отправки
callback - параметр. тип function (функция)

Чтобы получить то что нам отправит сервер, надо организовать функцию в одним параметром. например:
//выведет нам полученный текст на экран в виде сообщения.
function printPost(text) { 
	alert(text); 
}
В качестве формы будем передавать выражение document.forms[0] получает объект формы по правилам JavaScript
postAjax('pro_post.php', document.forms[0], printPost);

Пример

Для компактности упакуем наши 3 функции в один JavaScript файл
ajax_POST_UTF8.js
function createXMLHttp() {
		if (typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla
			return new XMLHttpRequest();
		} else if (window.ActiveXObject) { // для Internet Explorer (all versions) 
			var aVersions = [
				"MSXML2.XMLHttp.5.0",
				"MSXML2.XMLHttp.4.0",
				"MSXML2.XMLHttp.3.0",
				"MSXML2.XMLHttp",
				"Microsoft.XMLHttp"
			];
			for (var i = 0; i < aVersions.length; i++) {
				try {
					var oXmlHttp = new ActiveXObject(aVersions[i]);
					return oXmlHttp;
				} catch (oError) {}
			}
			throw new Error("Невозможно создать объект XMLHttp.");
		}
	}
// фукнция Автоматической упаковки формы любой сложности
function getRequestBody(oForm) {
	var aParams = new Array();
	for (var i = 0; i < oForm.elements.length; i++) {
		var sParam = encodeURIComponent(oForm.elements[i].name);
		sParam += "=";
		sParam += encodeURIComponent(oForm.elements[i].value);
		aParams.push(sParam);
	}
	return aParams.join("&");
}
// функция Ajax POST
function postAjax(url, oForm, callback) { 
	// создаем Объект
	var oXmlHttp = createXMLHttp();
	// получение данных с формы
	var sBody = getRequestBody(oForm);
	// подготовка, объявление заголовков
	oXmlHttp.open("POST", url, true);
	oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// описание функции, которая будет вызвана, когда придет ответ от сервера
	oXmlHttp.onreadystatechange = function() {
		if (oXmlHttp.readyState == 4) {
			if (oXmlHttp.status == 200) {
				callback(oXmlHttp.responseText);
			} else {
				callback('error' + oXmlHttp.statusText);
			}
		}
	};
	// отправка запроса, sBody - строка данных с формы
	oXmlHttp.send(sBody);
}
Подключим этот файл к форме, на которой будет делать AJAX запрос
form_post.html
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<script LANGUAGE='JavaScript' src='ajax_POST_UTF8.js'></script>
	<script>
		function showResult(d) {
			document.getElementById('displayText').innerHTML = d;
		}

		function do_post_ajax() {
			postAjax('pro_post.php', document.forms[0], showResult);
		}
	</script>
	<form>
		Проверка POST
		<br>напишите яблоко<br>
		<input type=text name=ge1>
		<br>напишите огурец<br>
		<input type=text name=ge2><br>
	</form>
	<a href="JavaScript:do_post_ajax()">проверить POST</a>
		<div id="displayText"></div>
</body>
</html>
Роль файла приемника будет выполнять
pro_post.php
<?php
header("Content-Type: text/html;charset=utf-8");
if (!empty($_POST["ge1"])) {
    print '<b>' . $_POST["ge1"] . '</b> пришло<br>';
} else {
    echo 'нет значения';
}
if (!empty($_POST["ge2"])) {
    print '<b>' . $_POST["ge2"] . '</b> пришло<br>';
} else {
    echo 'нет значения';
}
Результат

Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_post.zip