Как послать POST-запрос, используя технологию AJAX

Как послать POST-запрос, используя технологию AJAX

В данной инструкции я напишу, как послать POST-запрос с помощью технологии AJAX. Использовать POST-запрос необходимо, когда нужно передать серверу довольно большой объем данных (в силу ограничений спецификации невозможно передать, скажем, 10 килобайт через один GET-запрос).

Инструкция

Что вам понадобится:

• Блокнот или любой другой текстовый редактор
• Хостинг или домашний виртуальных хостинг (Apache, к примеру)

1 шаг

Создаем скрипт, который будет обрабатывать запрос (файл ajax.php ). Данный файл вернет объект, который будет содержать параметр res с значением ok или error верность данных. В случае ошибки также будет передан параметр msg сообщение для выдачи пользователю (через alert ), в случае удачи x1 и x2 переданные данные и удвоенные переданные данные.

if($POST[ q ]== ) die( {"res": error , msg : Не пришло никаких данных! } );
echo {"res": ok , x1 :" .$POST[ q ]. , x2 :" .$POST[ q ].$POST[ q ]. } ;

2 шаг

Затем в той же папке создаем файл main.php . В этом файле должна быть некоторая форма, позволяющая ввести данные в текстовое поле и кнопку Отправить для отправки данных. В конце тела (блок BODY ) должен быть блок SCRIPT , присоединяющий скрипт, обрабатывающий события формы и результат AJAX-запроса. Итак, файл main.php :
Введите данные:


Результат:
x1:
x2:

3 шаг

Теперь файл script.js :
function SendPOST()
{
var data = document.getElementById( data ).value;
ajaxSendPOST( ajax.php , q= +encodeURI(data), SendCallback);
}

/*
Параметр data передаваемые данные, формат:
data = var1= encodeURI(var1) + var2= encodeURI(var2);
*/
function ajaxSendPOST(xmlpage,data,callback)
{
var xmlh = null;
if(window.XMLHttpRequest)
xmlh = new XMLHttpRequest();
else
try
{ xmlh = new ActiveXObject( Msxml2.XMLHTTP ); }
catch(ex) { xmlh = new ActiveXObject( Microsoft.XMLHTTP ); }
if(xmlh)
{
xmlh.open( post , xmlpage, true);
xmlh.onreadystatechange = function(x) { if(xmlh.readyState==4) callback(xmlh.responseText); }
xmlh.setRequestHeader( Accept-Charset , windows-1251 );
xmlh.setRequestHeader( Accept-Language , ru, en );
xmlh.setRequestHeader( Connection , close );
xmlh.setRequestHeader( Content-length , data.length); // Длинна отправляемых данных
xmlh.setRequestHeader( Content-type , application/x-www-form-urlencoded );
xmlh.send(data); // Именно здесь отправляются данные
}
}

4 шаг

А вот и результат (см. изображение).

Советы и предупреждения:

• Могут быть проблемы с передачей данных на русском языке. Но вы можете найти в интернете код функции "utf8_win" и использовать её так: $_POST[ "q "]=utf8_win($_POST[ "q "]);