Кроссбраузерный XmlHttpRequest (xhr)

Сегодня немного отдалимся от CSS и HTML и перейдем к Javascript. Речь пойдет о XmlHttpRequest.

XmlHttpRequest - это апи для пересылки различных данных между браузером и веб-сервером по Http-протоколу. Вообщем вы можете слать запрос на удаленный сервер не перегружая страницу. Очень удобная вещь.

Работая над одним проектом, я столкнулся с проблемой кроссбраузерности при использовании XHR.. как Вы думаете о чем это я? Конечно же о полюбившимся мною IE6 :). С ним всегда все наперекосяк. Вот я и решил написать свою реализацию XmlHttpRequest, точнее описать что-то вроде класса который бы все делал сам, был бы легок в эксплуатации.

И так представляю вашему вниманию функцию создающую кроссбраузерный XmlHttpRequest:

function Xhr(options) {
  this.method = 'post';
  this.onSuccess = function() {
  };
  this.onFailure = function() {
  };

  if (options) {
      for (var o in options)
          this[o] = options[o];
  }
  if (window.XMLHttpRequest) this.request = new XMLHttpRequest();
      else if (window.ActiveXObject) this.request = new ActiveXObject("Microsoft.XMLHTTP");

  this.onreadystatechange = function() {
      if (this.request.readyState == 4)
          if (this.request.status == 200) {
              this.onSuccess(this.request.responseXML, this.request.responseText);
          }
          else this.onFailure();
  };

  var xhr = this;
  this.request.onreadystatechange = function() {
      xhr.onreadystatechange();
  };

  this.send = function(url, data) {
      this.request.open(this.method, url, true);
      if (this.method == 'post') {
          this.request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          this.request.setRequestHeader('Content-length', data.length);
      }
      this.request.send(data);
  };
}

Теперь мне стоит немного рассказать об этом коде. И так Вы видите функцию, которой на вход передаются параметры (опции), относительно которых и будет строиться наш XHR. Пойдем по порядку

• method - метод передачи данных, может быть POST или GET.
• onSuccess - это функция которая будет выполняться при удачном выполнении запроса.
• onFailure - функция которая будет выполняться при возникновении ошибки(можно выводить какое-то сообщение).

Ну вот все нужные параметры переданы, а дальше идет проверка на ActiveX. Если таковые компоненты присутствуют значит это никто иной как Internet Explorer 6.

Теперь небольшой примерчик использования.

Допустим у Вас есть текстовое поле(textarea) в котором люди пишут свои комментарии.

<textarea rows='5' cols='100' name='comment' id='comment'></textarea>
<input type='button' name='send' value='Отослать' onclick='send();'/>

Наша задача принять значение текстового поля и передать их на сервер не перегружая страницу. Создадим функцию которую сможем поместить в виде события(event) на нашу кнопку отправки.

function send() {
    var xhr = new Xhr({
        method:'post',
        onSuccess:function() { alert('Спасибо за комментарий'); },
        onFailure:function() { alert('Произошла ошибка!!!'); }
    });
    var commentValue = document.getElementById('comment').value;
    xhr.send('/commented', 'commentText=' + commentValue);
}

Метод send у XHR шлет запрос на сервер по урлу '/commented' и передает параметр 'commentText' - это текст комментария. А на сервере мы просто получаем параметры и используем их в своих целях.

Хух! Вот и все. Напомню, что этот XmlHttpRequest работает во всех браузерах. Удачного использования.