CODEWITHSUNDEEP
phpajaxjquery
Hai Truong IT
Hai Truong IT

Reputation: 4187

Error when using ajax from domain other

In host1 with domain http://domain1 I am using ajax with structure:

  1. index.php (that is include ajax)
  2. config.php (connect database)
  3. get_city.php

code here:

index.php
$(document).ready(function(){
   $('.nation').change(function(){
        var id = $(this).val();
        var dataString = 'id='+id;
        $.ajax({
           type: 'POST',
           url: '**http://domain1/get_data.php**',
           data: dataString,
           cache: false,
           success: function(html) {
                $('.city').html(html);
           } 
        });
   });
});

in get_city.php:

<?php
include 'config.php';
$id = $_POST['id'];
if($id) {
    $query = mysql_query("Select * From  jos_city Where nation_id = id");
    while($row = mysql_fetch_array($query)) {
        $id = $row['id'];
        $name = $row['city_name'];
        echo '<option value="'.$id.'">'.$name.'</option>';
    }
}

When I use the other host with domain http://domain2, then ajax can't load 

 $(document).ready(function(){
       $('.nation').change(function(){
            var id = $(this).val();
            var dataString = 'id='+id;
            $.ajax({
               type: 'POST',
               url: '**http://domain1/get_data.php**',
               data: dataString,
               cache: false,
               success: function(html) {
                    $('.city').html(html);
               } 
            });
       });
    });

I think, the error occurs when calling the url: 'http://domain1/get_data.php' from domain1 to domain2. Has anybody got an idea, why this might happen?

Upvotes: 0

Views: 172

Answers (3)

ryryan
ryryan

Reputation: 3928

All AJAX calls must comply with the same origin rule. This rule stops AJAX from calling to another domain.

The facts:

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.

This mechanism bears a particular significance for modern web applications that extensively depend on HTTP cookies to maintain authenticated user sessions, as servers act based on the HTTP cookie information to reveal sensitive information or take state-changing actions. A strict separation between content provided by unrelated sites must be maintained on client side to prevent the loss of data confidentiality or integrity.

History:

The concept of same origin policy dates back to Netscape Navigator 2.0. Close derivatives of the original design are used in all current browsers and are often extended to define roughly compatible security boundaries for other web scripting languages, such as Adobe Flash, or for mechanisms other than direct DOM manipulation, such as XMLHttpRequest.

See this Wikipedia page for more information.

An alternative method is by calling a PHP file (on your domain) with AJAX. Then perform a cURL call. See PHP.net for more information. And here's a simple example

Upvotes: 0

Avisek Chakraborty
Avisek Chakraborty

Reputation: 8309

Another way-

  1. do an AJAX call to another_file.php file (which is in same domain)

  2. from another_file.php; do a CURL request to the other domain and get response

Here is a simple CURL example

Upvotes: 1

knittl
knittl

Reputation: 265281

AJAX calls must conform to same origin policy, you cannot make plain AJAX calls to another domain.

There are, however, workarounds:

To enable developers to, in a controlled manner, circumvent the Same Origin Policy, a number of 'hacks' such as using the Fragment Identifier, or the window.name property have been used to pass data between documents residing in different domains. With the HTML5 standard a method was formalized for this: the postMessage interface, which is only available on recent browsers. JSONP and Cross-Origin Resource Sharing can also be used to enable AJAX-like calls to other domains.[2]

For supporting older browsers, the JavaScript library easyXDM can be used to provide a unified API for the postMessage interface as well as a number of hacks used to allow Cross Domain Messaging (XDM).

Upvotes: 3

Related Questions