JQuery ajax cross domain

Question

Hi guys, I am fed up with this problem. Here is two pages, test.php and servertest.php.

test.php

   <script src="scripts/jq.js" type="text/javascript"></script>
    <script>
    $(function(){
$.ajax({url:"testserver.php",
   success:function(){
      alert("Success");
   },
    error:function(){
       alert("Error");
   },
    dataType:"json",
    type:"get"})})
    </script>

testserver.php

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

Now my problem, When both of these files on same server(either localhost or web server), it works and alert("Success"), If it is on different sides, I mean, testserver.php in web server and test.php on localhost, its not working, alert("Error") is executing. Even if url inside ajax have changed to http://domain.com/path/to/file/testserver.php

Please any experts, its very simple to you but not me as I am new in this field.

Answer 1

You need to have a look at Same Origin Policy:

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.

For you to be able to get data, it has to be:

Same protocol and host

You need to implement JSONP to workaround it.

Answer 2

Browser security prevents making an ajax call from a page hosted on one domain to a page hosted on a different domain; this is called the "same-origin policy".

Answer 3

This is a cross-site ajax request, and it simply isn't possible.

Use $.getJSON() to retrieve your cross-site JSON response.

Answer 4

Use JSONP:

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'JSONP', // Notice! JSONP <-- P
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     },
});

php:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."('"json_encode($arr)."')";
?>

The echo might be wrong, it's been a while since I done php. In any case you need to output callbackName('jsonString') notice the quotes. jQuery will pass it's own callback name, so you need to get that from the GET params.

And as Stefan Kendall posted, $.getJSON() is a shorthand method, but then you need to append 'callback=?' to the url as GET parameter (yes, value is ?, jQuery replaces this with it's own generated callback method).

Answer 5

From the Jquery docs (link):

• Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

• Script and JSONP requests are not subject to the same origin policy restrictions.

So I would take it that you need to use jsonp for the request. But haven't tried this myself.

Answer 6

This is possible, but you need to use JSONP, not JSON. Stefan's link pointed you in the right direction. The jQuery AJAX page has more information on JSONP.

Remy Sharp has a detailed example using PHP.