Как послать POST-запрос, используя технологию AJAX
В данной инструкции я напишу, как послать POST-запрос с помощью технологии AJAX. Использовать POST-запрос необходимо, когда нужно передать серверу довольно большой объем данных (в силу ограничений спецификации невозможно передать, скажем, 10 килобайт через один GET-запрос).
Инструкция
Что вам понадобится:
Блокнот или любой другой текстовый редактор
Хостинг или домашний виртуальных хостинг (Apache, к примеру)
1 шаг
Создаем скрипт, который будет обрабатывать запрос (файл ajax.php ). Данный файл вернет объект, который будет содержать параметр res с значением ok или error верность данных. В случае ошибки также будет передан параметр msg сообщение для выдачи пользователю (через alert ), в случае удачи x1 и x2 переданные данные и удвоенные переданные данные.
Затем в той же папке создаем файл 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);
}
function SendCallback(answer)
{
var ans = eval( ( + answer + ) ); // Преобразуем полученный в данных объект из текстового вида
if (ans.res== error ) { alert(ans.msg);return; }
if (ans.res!= ok ) { alert( Странный ответ И не error , и не ok );return; }
document.getElementById( x1 ).innerHTML=ans. 1;
document.getElementById( x2 ).innerHTML=ans. 2;
}
/*
Параметр 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 "]);