Javascript Ajax调用中的相对路径问题

Question

好的，我有一个具有以下功能的 JavaScript 文件：

function AskReason() {
    var answer = prompt("Please enter a reason for this action:", "");
    if (answer != null)
        DoReason(answer);
}

function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    }
    catch (e)
    { alert('XMLHttpRequest not working'); }
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    { alert('Msxml2.XMLHTT not working'); }
    try {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    { alert('Microsoft.XMLHTTP not working'); }
    alert("XMLHttpRequest not supported");
    return null;
}

function DoReason(reason) {
    var xmlHttpReq = createXMLHttpRequest();
    var url = "/Shared/AskReason.ashx?REASON=" + reason;
    xmlHttpReq.open("GET", url, true);
    xmlHttpReq.send(null);
}

这行：

    var url = "/Shared/AskReason.ashx?REASON=" + reason;

是什么导致了问题。

在 VS 2010 中调试应用程序 - 此调用适用于我的 ashx 处理程序。

当我将项目移动到虚拟目录时 - 例如 http://localhost/myapp

此代码将中断，我必须将 javascript 更改为：

var url = "http:// localhost/myapp/Shared/AskReason.ashx?REASON=" + Reason;

关于如何修复此问题以在两种环境中工作或在将应用程序部署到服务器时仅接受手动更改的任何想法？

谢谢， 麦克风

Answer 1

Pointy 的方式 有效，但你必须知道提前确定要部署的位置。

或者，不要以 / 开头相对路径：

var url = "Shared/AskReason.ashx?REASON=" + reason;

这将相对于当前文档的位置进行解析。因此，如果当前文档是：

http://localhost/myapp/index.aspx

...那么这将解析为

http://localhost/myapp/Shared/AskReason.ashx?REASON=foo

Answer 2

以“/”开头的路径（没有协议和主机）是相对于主机的根。如果您的应用程序位于“http://whatever/myapp”，那么您的根相对路径必须以“/myapp”开头。

当您在涉及某种页面模板机制的服务器端环境中工作时，一个常见的技巧是让路径的该部分成为某种配置变量，以便您可以使用如下路径编写页面：

<a href='${root}/something/something'>click me</a>

然后“ root”变量根据“/myapp”或其他内容的配置进行扩展。

Answer 3

我遇到了类似的问题，需要绝对 URL，但从本地主机到生产服务器时引用中断。我通过检查“localhost”字符串是否存在于以下位置来解决这个问题：

var environ = window.location.host;

然后您可以简单地执行以下操作：

if (environ === "localhost") {
    var baseurl = window.location.protocol + "//" + window.location.host + "/" + "shared/";
} else {
    var baseurl = window.location.protocol + "//" + window.location.host + "/";
}

然后您可以在需要引用的任何 url 前面添加 baseurl 。

Answer 4

url

var url = "/Shared/AskReason.ashx?REASON=" + reason; 

正在根目录中查找文件[因为它是绝对路径]，实际上

http://localhost/Shared/AskReason.ashx

您应该包含虚拟目录的名称或确定适当的结构：

不带 / 开始将为您提供相对路径...如果您需要使用 ../Shared/ 符号风格来导航目录，或者最后使用服务器 Directory 命令来确定当前路径。

Answer 5

我对 ASP.NET MVC 也有同样的问题，我的 AJAX 调用是在单独的 .js 文件上。它看起来是这样的：

 return $.ajax({
            type: "POST",
            url: '/Dashboard/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });

当然，这在我的本地工作得很好。但是，当部署在 IIS 中的子目录上时，例如，

wwwroot/appsite/subdomainfolder/

这将触发 404 Not Found，因为它没有在 URL 上附加子域文件夹。

如果我删除

“/”

如果 URL 开头有

http://localhost/subdomainfolder/Dashboard/Dashboard/ExecuteReader

，则会生成如下所示的 URL：这又会触发 404 Not Found 问题。

因此，我的解决方法有两个选项：

删除反斜杠并删除控制器的名称（本例中为仪表板）：

return $.ajax({
            type: "POST",
            url: '/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });

或者保持原样，只需在 URL 开头添加双句点：

return $.ajax({
            type: "POST",
            url: '../Dashboard/Execute',
            contentType: "application/json; charset=utf-8",
            data: filter,
            dataType: "json",
        });