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

Solution 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.

Solution 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..

Solution 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
            })
        }
    });

Solution 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.

View more solutions

Comments

[Shoaib Shaikh]

Are you using url rewriting? In normal cases it should work as you defined above.

[fresskoma]

If this was the problem, shouldn't I get a 404 response then? In my case, the request doesn't even show up in firebug... that's the weird thing... I'll give it a try with the / though.

[Sampson]

Without knowing more about your project, I can't say.

[Paul]

It's not relative to / but rather relative to the url that is in the browser's address bar. If you have multiple levels of HTML files in your directory structure this becomes an important difference.

[developerbmw]

How does JavaScript, running on the client, know about the routing method used by the server? The client shouldn't be aware that everything is going through index.php, for example.

[dalemac]

Brett, It doesn't. Why would you want it to?