I'm using jQuery: which is the best way to store base url value for AJAX requests, in a way that every scripts can somehow reference it without manual changes for every update? Should I store it in window object, html, global variable, or what? Many thanks in advance.

I'm using jQuery: which is the best way to store base url value for AJAX requests, in a way that every scripts can somehow reference it without manual changes for every update? Should I store it in window object, html, global variable, or what? Many thanks in advance.

• javascript
• jquery
• ajax
• global-variables

Share Improve this question Follow asked Mar 5, 2014 at 14:55 JumpaJumpa 4,4191212 gold badges6060 silver badges105105 bronze badges 1

• I would store it in a global variable. – putvande Commented Mar 5, 2014 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could create function to do it automatically:

var BASE_URL = 'http://www.foo./url-root/';

function getUrl(url) {
    return BASE_URL.concat(url);
}

Now, whenervar you want a url...

var url = getUrl('bar.php');  //returns 'http://www.foo./url-root/bar.php'

I you don't want it to be global...

(function() {
    var BASE_URL = 'http://www.foo./url-root/';

    window.getUrl = function(url) {
        return BASE_URL.concat(url);
    }
})();

Or you could create a object.

This will be considered dangerous or a bad practice by some (see my warning below), but it will allow you to keep your ajax calls clean (no explicit URL concatenation or method calls).

This is acplished by overriding the default behavior of the $.ajax method to add our own pre-processing on the URLs before passing the call through to the real $.ajax method.

This approach has the same pitfalls as using $.ajaxSetup so I'll provide you the same warning from their documentation:

The settings specified here will affect all calls to $.ajax or Ajax-based derivatives such as $.get(). This can cause undesirable behavior since other callers (for example, plugins) may be expecting the normal default settings. For that reason we strongly remend against using this API. Instead, set the options explicitly in the call or define a simple plugin to do so.

Live Demo

function setBaseForAjax(base){
    var oa = $.ajax; //keep a reference to the actual ajax call
    $.ajax = function(){
        var len = arguments.length,
            newArgs = [],
            newUrl = len === 2 && (typeof arguments[0]).toLowerCase() === 'string' ? arguments[0]: null,
            newObj = len === 2 && (typeof arguments[1]).toLowerCase() === 'object' ? arguments[1] : (len === 1 && (typeof arguments[0]).toLowerCase() === 'object' ? arguments[0] : null); 

        if(newUrl){
            newUrl = base + newUrl; 
            newArgs.push(newUrl);  
        }
        if(newObj){
            newObj.url = base + newObj.url; 
            newArgs.push(newObj);    
        }
        oa.apply(window, newArgs); //call the real $.ajax method with the modified params
    }; 
}

setBaseForAjax('/echo/'); //set the base for every ajax call in the application.

$.ajax({
    url:'json/', 
    success: function(){
        alert('in for json');    
    }
}); 

$.ajax(
    'html/'
    ,{
        success: function(){
            alert('in for html');    
        }
    }
); 

$.ajax('html/', { //html wins over settings. 
    url:'json/', 
    success: function(){
        alert('in for html');    
    }
}); 

$.get('json/', function(){
    alert('in for json');
});