Relative vs. absolute urls in jQuery AJAX requests

Question

I'm having a hard time getting my AJAX requests to work on a staging server. It all worked fine on my development machine, but as soon as I uploaded it, all my AJAX requests stopped working. I found out that, if I change the relative urls (eg. "index.php") to absolute urls (" http://example.com/index.php ") the requests work again, but I do not understand why.

Example request:

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

This does not work, I does not even show up in the firebug console. The success handler is called though, which is very confusing.

This works just fine:

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

Can anybody explain why AJAX requests behave in this way? x_X

Answer 1

Try adding a / before index.php in your first example to force it to look from root. Double check to make sure your directory-structures are exactly the same with regards to where index.php is.

Answer 2

IF you are using URL routing, for example in an MVC framework, it will always be relative to the page the execution runs through, which does not necessarily match the URL in your address bar.

Consider the following file structure:

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

Usually, MVC frameworks route all page requests through a single file, such as index.php, ( http://www.mysite.com/index.php ). This makes it easy to use relative urls because resources and scripts will always be in the same relative path. Javascript will always be in /resources/javascript/ CSS will always be in /resources/css/

no matter what is in the browser address bar. It could be:

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

Answer 3

This is an old post, so I'm sorry to drag it out. But it was obviously relevant to my problem and it was a top result on Google.

After some experimenting with the exact same problem I've determined the answer.

No matter where you are running the script from, the requested file is relative to /

For example, in my file structure I have a folder named js. Under it is my ajaxProcess.js file. The xml file i was trying to read was located in the same directory, so following standard rules it made sense for the url of the ajax call to simply be url: 'myfile.xml' however, this did not work.

After some playing around I placed my xml in / and ran the ajax again. Vuala!

Some more playing around, and I discovered it doesn't matter where you call the js from at all, it will still default to /

I ended up placing my xml in a folder 'xml' and now the following ajax will work from anywhere:

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

Answer 4

I think that the best way to avoid this kind of problems is to set up a config file for javascripts in the head of your HTML. You can include something like that in page head:

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

Another approach is to attach these variables to window object:

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

So, later on you can use these variables inside js files:

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

script in the header can be auto-generated, based on your app config, so when app is deployed url and path variables are changed accordingly.

Answer 5

Relative paths should be used especially when your url bases may change, like having a site or API calls that can use two or more domains; example TLD/ccTLD. In these cases, as already said somewhere, just ensure that you start the relative link with / . This will position your request at the base of the current URL. From there, just locate the right target file and all will be fine.

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

Do not be tempted, as in PHP, to go back into the directory using ../ . The front-end, where Ajax operates, is unaware of those.