Relative URLs in AJAX requests

Question

Why does Javascript treat relative URLs differently than standard HTML? Think of the following URL (or just browse to it): http://en.wikipedia.org/wiki/Rome. Open a Firebug console (or another Javascript console) and enter the following:

var x = new XMLHttpRequest();
x.open("GET", "foo", true);
x.send("bar");

Under my system the request is sent to "http://en.wikipedia.org/wiki/foo". The "Rome" in the URL is simply ignored. The same request with a trailing slash in the URL ("http://en.wikipedia.org/wiki/Rome/") appends the "foo" to the full URL.

This seems to make it pretty hard to encode the correct URLs in Javascript. Are there any Javascript libraries that help to overcome this problem?

(I asked a similiar question before, but more jQuery specific, where this also happens. I hope I get a better answer with this somewhat more library independent question.)

@Zardoz Can you post the link to that other similar question? — Šime Vidas, Jan 22 '11 at 02:23
Of course ... I also edited the text with a link to that question: http://stackoverflow.com/questions/4754559/relative-url-does-not-get-resolved-correctly-by-jquery — medihack, Jan 22 '11 at 02:28
@Zardoz Links work the same way. If the page URL is hxxp://en.wikipedia.org/wiki/Rome and on the page is this anchor: ``, then clicking the link will open this URL: hxxp://en.wikipedia.org/wiki/foo — Šime Vidas, Jan 22 '11 at 02:35
Uuups, you are right ... it seems that I am just to pampered by Rails and not writing the links myself for a long time. I will edit my question so that it will still have some value. — medihack, Jan 22 '11 at 02:43
What do you mean by fine? So with "http://en.wikipedia.org/wiki/Rome" it will send a request to "http://en.wikipedia.org/wiki/Rome/foo"? I tried this under two different Linux systems ... both send requests to "http://en.wikipedia.org/wiki/foo". — medihack, Jan 22 '11 at 02:50

score 59 · Accepted Answer · edited Mar 16 '23 at 04:16

(updated to make it more readable)

This is how relative paths is supposed to work.

Pretend that the current address is this:

Absolute: protocol://some.domain.name/dir1/dir2/filename

If you specify only a new filename "foo", you get the same protocol, host and dirs, only the file name is changed:

Relative: foo

Absolute: protocol://some.domain.name/dir1/dir2/foo

If you specify a whole path "/dir3/filename2" you get the same protocol and hostname but with another path:

Relative: /dir3/filename2

Absolute: protocol://some.domain.name/dir3/filename2

You can also specify host name "//another.domain.name/dir5/filename3" and get the same protocol but another host, dir and filename:

Relative: //another.domain.name/dir5/filename3

Absolute: protocol://another.domain.name/dir5/filename3

What might be confusing is that a webserver internally can add a / at the end of the url if the specified url points to a directory and not to a file.

protocol://some.domain.name/somename

If "somename" is a directory the webserver might translate it to (possible with a redirect)

protocol://some.domain.name/somename/

UPDATE

As cameron said in a comment: For reference, see step 6 in section 4 of RFC 1808

Partly Cloudy · Answer 2 · 2014-01-26T21:54:50.167

0

Looks like http://code.google.com/p/js-uri/ is the library of choice for URL manipulation in general and this type of absolute-to-relative computation in particular:

new URI(potentiallyRelativeLink).resolve(new URI(window.location.href)).toString()

edited Jan 26 '14 at 21:54

answered Jan 26 '14 at 21:32

Partly Cloudy

6,508
3
27
16

Relative URLs in AJAX requests

2 Answers2

Linked