How to make RESTful calls to a local web service with jQuery

Question

I am the developer of an application that in addition to its main purpose contains a RESTful web service to allow external applications to interact with it. I also ship a web UI as part of the application for configuration and usage purposes. I would like to use the built in web service for the interation between the web UI and the application using ajax calls. The problem is I can't have the web service calls be in my jquery code since the user could be accessing the web UI from anywhere and it would not know the correct address of the web service without manually editing the code? Is there a good way to over come this obstacle? It must be a pretty common to have a web UI communicate with an application's built in web service via javascript.

Here is an example of the web service call I currently am using:

$.getJSON('http://localhost:8732/api/objects/type/place?callback=?', null, function (data) {
      //$('#callback').html(data);
      $("#callback").append('<ul id="places" data-role="listview" data-theme="g">');
      $.each(data,function(i,obj){
         $("#places").append('<li><a href="#" onclick="openPlace(\''+obj.Name+'\');" >'+obj.Name+'</a></li>');
      });
      $('#places').listview();
  });

As you can see I have just put in localhost as the address to the web service, but this will only work when I access the web UI from the same machine as the service. What other way can I go about doing this? Do have t resort to using some kind of server side scripting? That is what I was hoping to avoid by using jquery and a restful web service.

Answer 1

'localhost' is simply an alias for 127.0.0.1, which is your local computer. Your computer also has a real ip address that identifies it on your local network. That likely looks something like 192.168.xx You can use that computer's actual address to talk to the webservice:

'http://192.168.xx:8732/api/objects/type/place?callback=?...'

(Of course this only works if you're connecting to that computer from the same network.)

If you're looking to make it available to "other" people you would have to publish your webservice like you publish a website..ie forward a port to that computer from that router..and use your external ip address and/or dns to hit it.

Update:

How are you serving the html? If your application is something like a router where the admin interface is web-based, you can save/use the hostname and use in your service calls back home. It would be your customer's responsibility to connect to the admin webapp..so they could use localhost, 127.0.0.1, 192.168.1.x, //someservername or some other aliased method.. All you should care about is the host?

var host = window.location.hostname;
$.getJSON('http://' + host + ':8732/api/objects/type/place?callback=?', ...

Answer 2

Use relative URLs instead of absolute ones. When you make your service public and its hostname, domain, or IP address change, these URLs will remain valid.

$.getJSON('/api/objects/type/place?callback=?', // ...

When the browser interprets this address, it will resolve using the context of that URL -- the current page's address -- and automatically prepend it with the appropriate protocol, hostname/IP, and port.