设置全局基本URL

Question

我正在使用jQuery：这是为AJAX请求存储 base url 值的最佳方式，每个脚本都能以某种方式引用它而无需手动更改每次更新？我应该将它存储在window对象，html，全局变量还是什么？非常感谢提前。

Answer 1

你可以创建自动执行的功能：

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

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

现在，你需要一个网址...

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

我不希望它是全球性的......

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

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

或者你可以创建一个对象。

Answer 2

这会被一些人视为危险或不好的做法（请参阅下面的警告），但它可以让您保持ajax调用干净（没有明确的URL连接或方法调用）。

这是通过覆盖$.ajax方法的默认行为来实现的，以便在将调用传递给真正的$.ajax方法之前在URL上添加我们自己的预处理。

这种方法与使用$.ajaxSetup有相同的缺陷，所以我会从他们的文档中提供相同的警告：

  

此处指定的设置将影响对$ .ajax或的所有调用   基于Ajax的衍生产品，例如$ .get（）。这可能导致不良后果   因为其他调用者（例如插件）可能会期待这种行为   正常的默认设置。出于这个原因，我们强烈建议   反对使用此API。相反，在。中明确设置选项   调用或定义一个简单的插件来执行此操作。

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