javascript - 我自己的库的 Ajax 功能

Question

我正在编写自己的小库，因为 jQuery 不适合我，老实说我不想这样做，因为我宁愿确切地知道我的代码中发生了什么!无论如何，我正在尝试编写一个 ajax 函数，其编写方式如下 _$.ajax() 但问题是我没有获得我需要的功能，因为它说 CORS 不是有效，但我知道它应该像我使用 $.get || 时一样$.post 它工作正常...

功能:

 var ajax = {
     url: null,
     type: "GET",
     cache: null,
     data: null,
     content: null,
     state: 0,
     xhr: null,
     timeout:0,
     responseType: "",
     done:function(data){
     //not sure on here
     },
    init: function () {
      var ids = ['MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
      if (window.XMLHttpRequest) {
        ajax.xhr = new XMLHttpRequest();
      } else {
        for (var i = 0; i < ids.length; i++) {
            try {
                ajax.xhr = new ActiveXObject(ids[i]);
                break;
            } catch (e) {
                throw e;
            }
        }
    }
    ajax.xhr.open(ajax.type, ajax.url, true);
    ajax.xhr.setRequestHeader("Content-type", ajax.content !== null ? ajax.content : "application/x-www-form-urlencoded");
    if(ajax.cache !== null){
    ajax.xhr.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2005 00:00:00 GMT");
    }
    ajax.process();
},
process: function () {
    ajax.xhr.onreadystatechange = function () {
        if (ajax.xhr.readyState == 4) {
           if(ajax.xhr.status == 200){
           if(typeof ajax.done != 'undefined'){
              ajax.done(ajax.xhr.responseText);
                      //old way was ajax.completion = ajax.xhr.responseText 
                      //then in the ajax.ajax it would return(ajax.completion);
             }else{
             return false;
             }
           }
        }
    };
    if (ajax.type.toUpperCase() === 'GET') {
        ajax.xhr.send();
        ajax.state = 1;
    } else if (ajax.type.toUpperCase() === 'POST') {
        ajax.xhr.send(data);
        ajax.state = 1;
        }
        return (ajax.response);
},
ajax: function (opts) {
     ajax.url = opts.url,
     ajax.type = opts.type !== undefined ? opts.type : ajax.type,
     ajax.cache = opts.cache,
     ajax.content = opts.content,
     ajax.data = opts.data;
     ajax.responseType = opts.responseType ? opts.responseType : ajax.responseType;
     ajax.timeout = opts.timeout ? opts.timeout : ajax.timeout;
     opts.done(ajax.done);
     ajax.init(); 
       }
    };

编辑我已经更新了我的代码，针对 user3165879 答案提供了功能。我收到了 xhr.response 文本，但由于某种原因，每当我尝试alert``console或return它时，它只是说未定义。

我希望能够这样编写代码:

 var content;
 _$.ajax({
    type:"GET",
    url:"whatever.url.com",
    done:function(data){
    content+= data;  
  }
});

正如你所看到的，我的代码中没有真正的完成，因为我不确定从哪里开始，从来没有真正完全理解ajax的过程。找不到任何明确的文档。

Answer 1

我认为你应该在readystate = 4和status = 200上调用done选项

xhr.onreadystatechange = function() {
 if(xhr.readyState== 4){
   if(xhr.status==200){
     if(typeof opts.done != 'undefined'){
         opts.done(xhr.responseText);
     }
   } else {
    return false;
   }
  }

};

希望对你有帮助