Как реплицировать метод jQuery ajax

Question

Проблема: Я пытаюсь реплицировать метод jQuery ajax, так как я использую XMLHttpRequest более одного раза в скрипте. Тем не менее, я не думаю, что включение jQuery в качестве зависимости необходимо, так как я использовал только три метода из библиотеки jQuery. Therefor мне нужен хороший способ репликации АЯКС метода, Jquery и до сих пор я получил это далеко, но смотрите объяснение выхода ниже примере кода:

function ajax(obj) { 
    /* 
    obj = { 
     type: 'GET', 
     url: 'my/url/', 
     success: function (response) {}, 
     error: function (response) {}, 
     isTrue: true 
    } 
    */ 

    var 
     response = null, // defaults to null 
     complete = function (resp) { 
      console.log(resp); // outputs the response 
      response = resp; 
     }, 
     error = function (resp) { 
      response = resp; 
     }, 
     request = new XMLHttpRequest(); 

    request.open(obj.type || 'GET', obj.url, obj.isTrue || true); 

    request.onreadystatechange = function (e) { 
     if (request.readyState === 4) { 
      if (request.status >= 200 && request.status < 400) { 
       complete(request.responseText); 
      } else { 
       error(request.statusText); 
      } 
     } 
    } 

    request.send(); 

    return { 
     done: function (callback) { 
      callback(response); 
     } 
    } 
} 

Затем, когда я вызываю функцию Ajax в другой функции:

var xhr = ajax({ 
      url: 'js/routes.js', 
     }).done(function (resp) { 
      console.log(resp); // outputs 'null' 
     }); 

переменной отклика равно нуль, хотя полная() функция установить переменный отклик на значения АЯКСА .responseText.

Вопрос: Как я могу вернуть значение .responseText из запроса к объекту функция Аякса возвращается, так что я могу сделать что-то с ним в функции обратного вызова, как я намерен сделать внутри .done () метод этого объекта?

Спасибо!

Answer 1

У вас есть ошибка в реализации. Функция «done» не ждет ответа.

function ajax(obj) { 
    /* 
     obj = { 
     type: 'GET', 
     url: 'my/url/', 
     success: function (response) {}, 
     error: function (response) {}, 
     isTrue: true 
     } 
     */ 

    var _callback = null, 
     response = null, // defaults to null 
     complete = function (resp) { 
      if(_callback){ 
       _callback(resp); 
      } 
      response = resp; 
     }, 
     error = function (resp) { 
      if(_callback){ 
       _callback(resp); 
      } 
      response = resp; 
     }, 
     request = new XMLHttpRequest(); 

    request.open(obj.type || 'GET', obj.url, obj.isTrue || true); 

    request.onreadystatechange = function (e) { 
     if (request.readyState === 4) { 
      if (request.status >= 200 && request.status < 400) { 
       complete(request.responseText); 
      } else { 
       error(request.statusText); 
      } 
     } 
    } 

    request.send(); 

    return { 
     done: function (callback) { 
      if(response){ 
       callback(response); 
      }else{ 
       _callback = callback; 
      } 

     } 
    } 
} 

EDIT *

рассмотреть возможность использования microlibrary вместо JQuery. Не изобретайте велосипед. http://microjs.com/#ajax