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

govnoproger.ru > javascript > Ajax post запрос — рабочий пример

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

В итоге пришлось разбираться самому. Вот рабочий пример 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);
?>

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

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

Рекомендую:

9.2.2011 | последняя редакция: 17.03.2012 |
  1. оффтоп:
    может сделаешь очередной обзор гавносайтов? очень нужно посмотреть бэки)

  2. admin
    10.2.2011 в 16:31

    Да я думаю что не особо нужно после всего написанного:
    http://govnoproger.ru/seo/oni-skryivayut-svoi-govno-saytyi-a-myi-ih-vidim
    http://govnoproger.ru/seo/obzor-govnosaytov-chast-3-statyi
    http://govnoproger.ru/seo/obzor-govnosaytov-chast-2
    http://govnoproger.ru/seo/otkuda-tits-obzor-govnosaytov

    Вот. Вынесешь огромную кучу говносайтов. Просто смотришь всю сетку и всё, там и бэки можно попалить, а паля бэки видим ещё гс и так далее…

  3. Сергей
    7.3.2012 в 00:17

    В 28-й строке судя по всему должно быть

    req = createRequestObject();

  4. admin
    7.3.2012 в 12:48

    Верно — в том случае, если хочешь использовать эту конструкцию.

  5. Хехех
    7.11.2012 в 14:42

    admin :Верно — в том случае, если хочешь использовать эту конструкцию.

    Скорее так :Верно — в том случае, если хочешь использовать эту говноконструкцию.