How to make an AJAX call with pure javascript?

Question

I am new to Ajax and Javascript so i need this example to be converted into ajax using pure javascript.How I can call this javascript as ajax and its functionality.need method like Common.prototype.ajax = function(method, url, data, callback) {}; Common.prototype.ajaxGet = function(url, callback) {}; Common.prototype.ajaxPost = function(url, data, callback) {};

    function Common() {
        console.log("Common Contructor fires!");
    }

    Common.prototype.setEvent = function(evt, element, callback) {
        var obj_idfier = element.charAt(0);
        var elementName = element.split(obj_idfier)[1];
        if (obj_idfier == '#') {
            var _ele = document.getElementById(elementName);
            _ele.addEventListener(evt, callback, false);
        } else if (obj_idfier == '.') {
            var _els = document.getElementsByClassName(elementName);
            for (var i=0; i<_els.length; i++) {
                _els[i].addEventListener(evt, callback, false);
            }
        } else {
            console.log("Undefined element");
            return false;
        }
        return this;
    };

    Common.prototype.getInnerHtml = function(id){
       return document.getElementById(id).innerHTML;
    };

    Common.prototype.setInnerHtml = function(ele, val){
       ele.innerHTML = val;
    };

    Common.prototype.getVal = function(ele){
       return ele.value;
    };

    Common.prototype.setVal = function(ele, val){
       ele.value = val;
    };


 function Calculator() {
console.log("Calculater Constructor");
}


Calculator.prototype = new Common;

Calculator.prototype.init = function() {
  var _this = this;
  var _ele = document.getElementById("math");
  var _numEle = document.getElementById("number");

      this.setEvent("click", ".control", function() { 
          console.log(this.value);
          var _num = _this.getInnerHtml('math');
          _num = _num + "" + _this.getVal(this);
          _this.setInnerHtml(_ele, _num);
      });

      this.setEvent("click", ".input", function() { 
          console.log(this.value);
          var _num = _this.getInnerHtml('math');
          _num = _num + "" + _this.getVal(this);
          _this.setInnerHtml(_ele, _num);
      });

      this.setEvent("click", ".clear", function() { 
          console.log(this.value);
          _this.setInnerHtml(_ele, "");
          _this.setInnerHtml(_numEle, "");
      });

      this.setEvent("click", ".submit", function() { 
          console.log(this.value);
      var _num = _this.getInnerHtml('math');
          _num = eval(_num+""+ _this.getVal(this));
          _this.setInnerHtml(_numEle, _num);
      });       

      };
      var calcObj = new Calculator();
     calcObj.init();

lyosef · Accepted Answer · 2015-07-01 08:43:17Z

1

You can build a general method for xhr calls:

function xhr (type, url, data, options) {
  options = options || {};
  var request = new XMLHttpRequest();
  request.open(type, url, true);
  if(type === "POST"){
      request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  request.onreadystatechange = function () {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400) {
        options.success && option.success(parse(this.responseText));
      } else {
        options.error && options.error(this.status);
      }
    }
  };
  request.send(data);
}

function parse(text){
  try {
     return JSON.parse(text);
  } catch(e){
     return text;
  }
}

And then user it for specific HTTP methods:

Common.prototype.ajax = function(method, url, data, callback) {
    return xhr(method, url, data, {success:callback});
}

Common.prototype.ajaxGet = function(url, callback) {
    return xhr("GET", url, undefined, {success:callback});
}

Common.prototype.ajaxPost = function(url, data, callback) {
    return xhr("POST", url, data, {success:callback});
}

answered Jul 1, 2015 at 8:43

lyosef

6,2422 gold badges29 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

david george Over a year ago

but how can i implement this in my example??

lyosef Over a year ago

just add those two chuncks of code in your program (before "function Calculator()")

Collectives™ on Stack Overflow

How to make an AJAX call with pure javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related