CODEWITHSUNDEEP
javascriptajax
Mfuon Leonard
Mfuon Leonard

Reputation: 192

How to write one javascript function to perform an ajax request without repeating to avoid code-smell without using JQuery library

i have a javascript code that uses objects and attributes to perform different ajax requests. i want to find a way that i can optimize my code to avoid repetition and code-smell. i have an object trip that has list which should fetch the details from the database and append to my servlet defined with a path ./trips/action/ . No JQuery needed

 var trip = {
    list: function(){
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    document.getElementById('ajax-content').innerHTML = ajax.responseText;
                }
            }
        }

        ajax.open("GET", "./trips/action", true);
        ajax.send();
    },
    add: function(){
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    document.getElementById('ajax-content').innerHTML = ajax.responseText;
                }
            }
        }

        ajax.open("GET", "./trip/addTrip.jsp", true);
        ajax.send();
    },

    save: function(){
        var me = this;
        var ajax = new XMLHttpRequest();

        var depatureDate = document.getElementById('depatureDate').value;
        var arrivalDate = document.getElementById('arrivalDate').value;
        var route = document.getElementById('route').value;
        var vehicle = document.getElementById('vehicle').value;
        var price = document.getElementById('price').value;

        var params = 'depatureDate=' + encodeURIComponent(depatureDate) 
            + '&arrivalDate=' + encodeURIComponent(arrivalDate)
            + '&route=' + encodeURIComponent(route)
            + '&vehicle=' + encodeURIComponent(vehicle)
            + '&price=' + encodeURIComponent(price);

        console.log(params);

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    me.list();
                }
            }
        }

        ajax.open("POST", "./trips/action/add", true);
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ajax.send(params);
    }

  }

Upvotes: 0

Views: 240

Answers (1)

jcubic
jcubic

Reputation: 66590

You can create utility functions:

var utils = {
    ajax: function(url, method, params, callback) {
        if (typeof callback == 'undefined') {
            callback = arguments[1];
            params = null;
        }
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function() {

            if (ajax.readyState == 4){
                if (ajax.status == 200){
                    if (typeof callback == 'function') {
                        callback(ajax.responseText);
                    }
                }
            }
        }

        ajax.open(method, url, true);
        if (params) {
            ajax.send(params);
        } else {
            ajax.send();
        }
   },
   get: function(url, params, callback) {
       this.ajax(url, 'GET', params, callback);
   },
   post: function(url, params, callback) {
       this.ajax(url, 'POST', params, callback);
   }
};

and you can use it in your code:

var trip = {
    list: function(){
        util.get("./trips/action", function(data) {
            document.getElementById('ajax-content').innerHTML = data;
        });
    },
    ...
};

Upvotes: 2

Related Questions