使用jQuery AJAX请求时相对路径和绝对路径的区别

Question

我在一个测试服务器上遇到了AJAX请求难以正常工作的问题。在我的开发机器上一切都正常，但是一旦上传到服务器上，所有的AJAX请求都停止工作了。我发现，如果我将相对路径（例如："index.php"）更改为绝对路径（"http://example.com/index.php"），请求就可以正常工作，但我不明白其中的原因。

示例请求：

jQuery.post('index.php', {id: 1234, action: 1, step: 1}, function(data) { /* something */ });

这个不起作用，它甚至没有在Firebug控制台中显示。虽然成功处理程序被调用，但这非常令人困惑。

这个完全正常：

jQuery.post('http://example.com/index.php', {id: 1234, action: 1, step: 1}, function(data) { /* something */ });

有人能解释一下为什么 AJAX 请求会表现出这种行为吗？x_X

- fresskoma

---

检查本地和公共服务器上 PHP 短标签的差异，有时这可能是问题所在。 - Sarfraz

你是否正在使用URL重写？在正常情况下，它应该按照你上面定义的方式工作。 - Shoaib Shaikh

是的，我在使用URL重写。每个URL都被重写为index.php。这是Typo3 Realurl设置... - fresskoma

Answer 1

尝试在你的第一个示例中在index.php之前添加/，以强制从根目录查找。仔细检查确保您的目录结构与index.php所在位置完全相同。

- Sampson

---

如果是这个问题，那我不应该收到404响应吗？在我的情况下，请求甚至没有出现在Firebug中...这很奇怪...不过我会尝试加上/的。 - fresskoma

我不了解你的项目，所以无法给出答案。 - Sampson

Answer 2

如果您正在使用URL路由，例如在MVC框架中，它将始终相对于执行运行的页面，这并不一定与您地址栏中的URL匹配。

考虑以下文件结构：

mysite/index.php
mysite/resources/javascript/my_javascript.js
mysite/resources/css/my_css.css

通常情况下，MVC框架将所有页面请求路由到单个文件中，例如index.php (http://www.mysite.com/index.php )。这使得使用相对URL变得非常容易，因为资源和脚本始终在相同的相对路径中。 Javascript始终位于/resources/javascript/ CSS始终位于/resources/css/ 无论浏览器地址栏中输入什么内容，都不会改变这个路径。它可能是：

http://www.mysite.com/index/
http://www.mysite.com/kittens/
http://www.mysite.com/kittens/cute/
http://www.mysite.com/kittens/fluffy/
etc..

- dalemac

---

JavaScript在客户端运行时，如何知道服务器使用的路由方法？例如，客户端不应该知道所有内容都通过index.php进行传输。 - brettwhiteman

Brett，它不会。你为什么想要它呢？ - dalemac

Answer 3

这是一篇旧的文章，因此很抱歉要再次提起它。但它显然与我的问题相关，并且在谷歌上是一个热门结果。

通过解决同样的问题后，我已经找到了答案。

无论您从哪里运行脚本，请求的文件相对于 /

例如，在我的文件结构中，我有一个名为js的文件夹。其下是我的ajaxProcess.js文件。我试图读取的xml文件位于同一目录中，因此按照标准规则，ajax调用的url应该简单地是url：'myfile.xml'，但这并没有起作用。

经过一些尝试后，我将我的xml放在/中并再次运行了ajax。 很奇妙！

经过更多实验，我发现完全不重要从哪里调用js，它仍将默认为/

最终，我将我的xml放在一个名为 'xml' 的文件夹中，现在以下ajax将从任何地方都可以正常工作：

$.ajax({
        type:'get',
        dataType: 'xml',
        url: 'xml/class.xml',
        success: function(xml){
            $(xml).find('class').each(function(){
                //code here
            })
        }
    });

- Ben

---

它与 / 无关，而是相对于浏览器地址栏中的 URL。如果您的目录结构中有多个层次的 HTML 文件，则这将成为一个重要的区别。 - Paul

Answer 4

我认为避免这种问题的最好方法是在HTML头部设置javascript的配置文件。您可以在页面头部包含以下内容：

<script>
        var url = "http:\/\/www.yourdomain.com\/application";
        var path = "\/path\/on\/server\/to root folder";
</script>

另一种方法是将这些变量附加到window对象中：

 <script>
window.myUrl = "http:\/\/www.yourdomain.com\/application";
...
    </script>

因此，您稍后可以在js文件中使用这些变量：

jQuery.post( url+'/index.php', {id: 1234, action: 1, step: 1}, function(data) { // something });

在头部的脚本可以根据您的应用程序配置进行自动生成，因此当应用程序部署时，URL和路径变量会相应更改。

- RB_

Answer 5

应尤其使用相对路径，特别是当您的URL基础可能会更改，例如拥有可以使用两个或多个域的站点或API调用；例如 TLD/ccTLD。 在这些情况下，如已在某处提到的那样，只需确保您以/开头启动相对链接。 这将将您的请求定位在当前URL的基础上。 从那里，只需找到正确的目标文件，一切都会很好。

/folder-at-root(not-root)/inner-folder/target-file

不要像在 PHP 中那样诱惑自己使用 ../ 返回目录。前端，即 Ajax 操作的地方，对此毫不知情。

- Ajowi