JQUERY Autocomplete using PHP and cross-site problem

Question

Hi,

I am trying to load a series of cities/countries in a textbox to display using jquery autocomplete. To do this, I attach the autocomplete to the textbox and call a PHP routine called SEARCH.php. This works fine if SEARCH is on the same server.

When I try to call search from a different server (in this case, an ASP server), I get a javascript PERMISSION DENIED error, I guess due to the cross-scripting issue. The problem is caused by the line

xhr.open(type, s.url, s.async);

in jquery1.3.2

Is there any solution to this?

Thanks for any help

Answer 1

The easiest solution is to have a script on your server call the other server's script and then return the results from your server.

Answer 2

Hi Michael,
I assume that your PHP and ASP servers run on a different (sub)domain - if so, then you assume correctly that this is a cross-domain scripting limitation as defined by Javascript standards.

As far as I know, there is no pure Javascript solution with good cross-browser compatibility (some browsers may have more relaxed restrictions). In the long run we can all hope this to be resolved by Cross-Origin Resource Sharing which is being defined as part of HTML5:
http://www.w3.org/TR/access-control/

Ways how you can work around this today:

1. Use a server-side proxy script
   You can create a new script on your PHP server (i.e. ASP-Proxy.php) which would fetch the data from the ASP server. This will allow you to avoid the cross-domain limitation, since the PHP script would reside on the same server as the Search.php script which you confirmed works correctly.
   Google revealed this very simple implementation, but there is a lot of more robust and/or safe scripts out there.

2. Use flash to perform the query
   Flash has its own mechanism for handling cross domain requests, so you can use a small Flash object on your site to serve as a client-side proxy for your jQuery script. I'm not a Flash developer, so someone else will have to advise here:
   http://www.google.com/search?q=flxhr+jquery
   
   Note that you might need to create a cross-domain policy file in the root of your ASP server for this to work:
   http://www.google.com/search?q=crossdomain.xml