CODEWITHSUNDEEP
javascriptjqueryajaxfunction
EasyBB
EasyBB

Reputation: 6574

Ajax functionality with my own library

I am writing my own small library as jQuery just doesn't cut it for me, and honestly I'd rather not, as I'd rather know exactly what is going on in my code! Anyways I am trying to write an ajax function that would be written like so _$.ajax() but the problem is I'm not getting the functionality that I need as its saying that the CORS is not valid, yet I know it should be as when I use $.get || $.post it works fine...

Function:

 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(); 
       }
    };

EDIT I've updated my code, as to user3165879 answer to provide a functionality. I am getting the xhr.response text, though for some reason whenever I try to alert``consoleorreturn it it just says undefined.

I want to be able to write my code as so:

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

As you can see I don't have a real done inside my code as I'm not positive where to start, never really fully understood the process of ajax. Couldn't find any clear cut documentation to this.

Upvotes: 1

Views: 104

Answers (1)

php-dev
php-dev

Reputation: 7156

I think you should call the done option on readystate = 4 and status = 200

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

};

Hope it helps

Upvotes: 1

Related Questions