Як послати POST-запит, використовуючи технологію AJAX.


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

Інструкція Рівень складності: Нескладно Що вам знадобиться:
  • Блокнот або будь-який інший текстовий редактор
  • Хостинг або домашній віртуальних хостинг (Apache, наприклад)
1 крок

Створюємо скрипт, який буде обробляти запит (файл "ajax.php"). Даний файл поверне об'єкт, який буде містити параметр "res" зі значенням "ok" або "error" - вірність даних. У випадку помилки також буде переданий параметр "msg" - повідомлення для видачі користувачеві (через "alert"), у випадку удачі - "x1" і "x2" - передані дані і подвоєні передані дані.

2 крок

Потім в тій же папці створюємо файл "main.php". У цьому файлі повинна бути деяка форма, що дозволяє ввести дані в текстове поле і кнопку "Відправити" для відправки даних. У кінці тіла (блок " BODY ") повинен бути блок " SCRIPT ", що приєднує скрипт, що обробляє події форми і результат AJAX -запиту. Отже, файл "main.php":

Приклад POST -запиту в технології AJAX


Введіть дані:


Результат:
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']);