Ajax call on different server

Question

I am sending ajax call on different server using script mentioned below.

$(document).ready(function() {
var uniqcod=$(".piczhu-widget").attr('id'); 

    $.ajax({
        url:'File Path...',
        type:'post',
        data:{uniId:uniqcod},
        success: function(result){
            $('.abcClass').html(result);
            }
        });
    });

Script is not receiving any response . This script is working fine on the same server. Is there any additional parameter to use to send call on different server?

Answer 1

This should fix the issue using JSONP :

$.ajax({
    url:'File Path...',
    type:'post',
    data:{uniId:uniqcod},
    dataType: 'jsonp', // use JSONP
    success: function(result){
        $('.abcClass').html(result);
        }
    });
});

Answer 2

This is because of cross-domain policy. It's a security thing. I recommend you to send that request to a PHP file with cURL that is located on your server (your domain).

But you need to have cURL installed on your server: http://curl.haxx.se/ If you're using Debian based server you can do it by: sudo apt-get install php5-curl

Example:

<?php
$data = $_POST['data'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "URL FOR REQUEST");
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);    
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                                                                                                                           

$result = curl_exec($ch);

echo $result;

?>

Answer 3

you need to use either jsonp or cors for cross domain ajax. The code given below is an example for cors

Example code:

jQuery.support.cors = true; 

function CrosDom_ajax(url) {
        if (window.XDomainRequest
        && $.browser.msie
        && $.browser.version < 10) {
        xdr = new XDomainRequest();
        if (xdr) {
            xdr.onload = function () {
               alert(xdr.responseText);

            };
            xdr.open("get", url);
            xdr.send();
        }
        }
        else {
            $.ajax({
                url: url,
                success: function (response) {


                },
                error: function (data) {
                }
            });
         }
    }

Also you need to Write the following code in server side, to allow cross domain access

Response.AppendHeader("Access-Control-Allow-Origin", "*");           

Answer 4

Best and accepted method is to use JSONP to communicate with a different server. JSONP is a great away to get around cross-domain scripting errors.

Read the below links

What is JSONP all about?

jsonp with jquery

What are the differences between JSON and JSONP?

http://api.jquery.com/jQuery.getJSON/