Ajax post запрос — рабочий пример

govnoproger.ru > javascript >

Бесит вот что: когда начинаешь что-либо писать, хочется скопипастить дабы не парится.
И когда начинаешь копировать видишь — либо код кривой, либо не кроссбраузерный.

В итоге пришлось разбираться самому. Вот рабочий пример post через ajax.

<html>
<head>
</head>
<body>
<script type="text/javascript">
//кроссбраузерное решение. Скопипастил с выкипедии.
//тут мы создаём объект в зависимости от браузера
function createRequestObject() {
  if (typeof XMLHttpRequest === 'undefined') {
    XMLHttpRequest = function() {
      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch(e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch(e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e) {}
      try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch(e) {}
      throw new Error("This browser does not support XMLHttpRequest.");
    };
  }
  return new XMLHttpRequest();
}

function vote() 
{
//эта функция сработает при клике на кнопку.
	req =new XMLHttpRequest(); //new обязательно -иначе в ие и хроме не пашет
    if (req) {       
        req.open("POST", 'script.php', true); //скрипт к которому обращаемся
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // заголовок в посте это обязательный атрибут
        req.onreadystatechange = processReqChange; // обработчик приёма ответа
        req.send('gfgdf=fdfsd'); // значения
    }
}

function processReqChange()
{
var statusElem = document.getElementById('vote_status')
  try {
    if (req.readyState == 4) {
        // для статуса "OK"
        if (req.status == 200) {
           	statusElem.innerHTML = req.responseText;
        } else {
            alert("Не удалось получить данные:\n" +
                req.statusText);
        }
    }
  }
  catch( e ) {
      // alert('Ошибка: ' + e.description);
      // В связи с багом XMLHttpRequest в Firefox приходится отлавливать ошибку
      // Bugzilla Bug 238559 XMLHttpRequest needs a way to report networking errors
      // https://bugzilla.mozilla.org/show_bug.cgi?id=238559
  }
}


  </script>
  
  <input value="Голосовать!" onclick="vote()" type="button" />

<div id="vote_status">Здесь будет ответ сервера</div>
</body>

</html>

Приёмник для нашего javascript скрипта.

<?php
print_r($_POST);
?>

Пример работы:
При нажатии на кнопку подгрузится страница выкипедии. Блог разорвёт.

Здесь будет ответ сервера

Ajax post запрос — рабочий пример

Рекомендую:

Архивы