使用我自己的库的Ajax功能

时间:2014-01-13 00:00:08

标签: javascript jquery ajax function

我正在编写自己的小型库,因为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``consolereturn时,它只是说未定义。

我希望能够编写我的代码:

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

正如您所看到的,我的代码中没有真正的done,因为我不善于从哪里开始,从未真正完全理解ajax的过程。找不到任何明确的文件。

1 个答案:

答案 0 :(得分: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;
   }
  }

};

希望有所帮助