Изобретая велосипеды: AJAX

2 декабря 2008

короче, суть в том, что нужно мне было сделать штуку, чтобы удобно было делать запросы через ajax и не менее удобно обрабатывать ответы от них.

так вот, если раньше я таскал за собой или дикий кусок js, изменять который было сложно или некий фреймворк типа jQuery, то теперь я сделал простенький объект, который делает всю грязную работ,. а мне остается только передать параментры и функцию обработки, и поскольку я не жадный, то нате:

if (typeof jsAjax == "undefined" || !jsAjax) {
  var jsAjax = {};
}

jsAjax.ajax = typeof jsAjax.ajax != 'undefined' && jsAjax.ajax ? jsAjax.ajax : function(o) {
  var url = (typeof o === 'string') ? o : o.url;
  var callback = (typeof o.callback === 'undefined') ? function() {} : o.callback;
  var method = (typeof o.method === 'undefined') ? 'GET' : o.method;
  var type = (typeof o.type === 'undefined') ? 'text' : o.type;

  var len = (typeof o.vars === 'undefined') ? 0 : o.vars.length;
  var str="";
  for(var i = 0;i < len;i++)
  {
    if(i!='0')
    {
      str=str+'&';
    }
    str=str+o.vars[i].name+'='+escape(o.vars[i].value);
  }

  var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

  var onCompleteRequest = function () {
    if (xhr.readyState == 4)
    {
      if (xhr.status == 200)
      {

        if (type == "text") {
          r=xhr.responseText;
        } else if (type=="json") {
           r=eval('('+xhr.responseText+')');
        } else if (type=="xml") {
          r=xhr.responseXML.documentElement;
        } else {
          r=xhr.responseText;
        }
        callback(r);
      }
    }
  };

  xhr.open(method, url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.setRequestHeader('Accept-Language', 'en');
  xhr.setRequestHeader('Accept-Charset', 'utf-8');
  xhr.onreadystatechange=onCompleteRequest;
  xhr.send(str);

};

Пользоваться безумно просто, чтоб было более менее понятно, несколько примеров:

jsAjax.ajax("http://example.com/");

jsAjax.ajax({url:"http://example.com/",vars:[{name:"x",value:"y"},{name:"y",value:"x"}],method:"POST",callback:function() {alert(r);}});

jsAjax.ajax({url:"http://example.com/",vars:[{name:"x",value:"y"},{name:"y",value:"x"}],method:"POST",type:"json",callback:someFunction});

теперь по поводу параметров:

можно передать просто текст, тогда он будет считаться адресом и сделает тупой GET запрос, а можно поступить умнее и заполнить структурку состоящюю из следующих полей

url — адрес который запрашиваем
vars — список параметров запроса в виде:

[{name:"someName",value:"someValue"},{name:"someOtherName",value:"someOtherValue"}]

method — метод запроса (GET или POST)
type — тип ответа передаваемый в функцию обработки (text,json,xml)
callback — функция обработки ответа (ответ в соответствии с типом как видно из кода передается одной переменной)

вообщем вызов с полным списком переменных будет выглядеть примерно так:

jsAjax.ajax({
url:"http://somedome.com/somepage.php",
vars:[{name:"someName",value:"someValue"},{name:"someOtherName",value:"someOtherValue"}],
method: "POST",
type: "text",
callback: function (answer) { alert(answer); }
});

вот вообщем и все. 🙂
P.S. вот ссылочка на файл исходника.

Опубликовал: