Mfuon Leonard Mfuon Leonard - 5 months ago 15
Ajax Question

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

}

Answer

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;
        });
    },
    ...
};
Comments