Fb
Vk (регистрация) помощь
Компьютеры
Другие категории

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

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

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

Инструкция

Уровень сложности: Несложно

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

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

1 шаг

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

Создаем скрипт, который будет обрабатывать запрос (файл “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 шаг

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

Затем в той же папке создаем файл “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 шаг

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

Теперь файл “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 шаг

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

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

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

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

Обсуждение

008_micro
Рейтинг
  1. –
  2. +
  3. 0
Sirse (16:47 02.10.2010)

не зря afjl32fsjl234jkls [url=://google.ca/]google[/url] посоветовал ваш сайт

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

717_small

Vir

новичок
написать
RSS
Рейтинг
  1. –
  2. +
  3. 1
1
14356