Как послать POST-запрос, используя технологию AJAX
В данной инструкции я напишу, как послать POST-запрос с помощью технологии AJAX. Использовать POST-запрос необходимо, когда нужно передать серверу довольно большой объем данных (в силу ограничений спецификации невозможно передать, скажем, 10 килобайт через один GET-запрос).
Инструкция
Что вам понадобится:
- Блокнот или любой другой текстовый редактор
- Хостинг или домашний виртуальных хостинг (Apache, к примеру)
1 шаг
Создаем скрипт, который будет обрабатывать запрос (файл “ajax.php”). Данный файл вернет объект, который будет содержать параметр “res” с значением “ok” или “error” – верность данных. В случае ошибки также будет передан параметр “msg” – сообщение для выдачи пользователю (через “alert”), в случае удачи – “x1” и “x2” – переданные данные и удвоенные переданные данные.
<?php
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”:
<HTML><HEAD>
<META content="text/html; charset=windows-1251" http-equiv="Content-Type"><TITLE>Пример POST-запроса в технологии AJAX</TITLE>
</HEAD><BODY>
Введите данные: <INPUT type="text" id="data"> <INPUT type="button" value="Отправить" onclick="javascript:SendPOST()"><BR><BR>
Результат:<br>x1: <span id="x1"></span><br>x2: <span id="x2"></span>
<SCRIPT language="JavaScript" type="text/javascript" src="./script.js"></SCRIPT>
</BODY></HTML>
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']);
Запросить инструкцию
Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!
Обсуждение
не зря afjl32fsjl234jkls [url=://google.ca/]google[/url] посоветовал ваш сайт
Ваш комментарий