Need to write Javascript/Jquery based Cross domain Request

Question

Hi I have to write Rest API call which will serve cross domain request

I have checked with Mozilla (rest client) with request and it serves me data now how to write via jquery/javascript in html.

{"POST to adengine":{"method":"POST","url":"http://xxx.com/Advertisement/1.0/GetAds","body":"aid=Apposaurus_xxx","overrideMimeType":false,"headers":[["Content-Type","application/x-www-form-urlencoded"]]}}

Here is my sample code in html

<html>
<title></title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

JSONTest = function() {
    var resultDiv = $("#resultDivContainer");
    $.ajax({
        url: "http://xxx.com/Advertisement/1.0/GetAds",
        type: "POST",
        data:  "aid=Apposaurus_xxx",        
        overrideMimeType:'false',
        crossDomain: 'true',
        dataType: 'jsonp',
        headers:{"Content-Type":'application/x-www-form-urlencoded'},

        success: function (result) {
            switch (result) {
                case true:
                     processResponse(result);
                    break;
                default:
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        }    
});
};
</script>
</head>
<body>


<div id="resultDivContainer"></div>

<button type="button" onclick="JSONTest();">JSON</button>

</body>
</html>

Where i am wrong?

basic variables appid and useragent are missing Did you read the api? — Musa
– Musa, Commented Feb 7, 2013 at 6:05
When I create a form with the posted values and submit it I don't get valid JSONP back so you must be missing a parameter. I get html with js code back. Works fine in an iframe or setting the src of a script tag but doesn't do much for xmlhttprequest asking for jsonp — HMR
– HMR, Commented Feb 7, 2013 at 6:30
With headers":[["Content-Type","application/x-www-form-urlencoded"]] it will serve you data. I checked with Mozilla firefox (Rest Plugin) — Vandana
– Vandana, Commented Feb 7, 2013 at 6:35
jsfiddle.net you can check your code here, there seems some syntax error — Shanta
– Shanta, Commented Feb 7, 2013 at 6:52

Saeed Neamati · Accepted Answer · 2013-02-07 06:07:54Z

0

Cross Domain Request should be accomplished using JSONP. JSONP stands for JSON with Padding. I'll try to explain it here a little.

How do you want to fetch data (script when we talk about JSON) from server? You have two ways:

An ajax request, which is done behind the scene using an instance of XMLHttpRequest object, and which is limited to be sent only to the same domain,
A simple HTTP Get request, which is done via inserting a <script> tag somewhere in the HTML document, mostly in the head section.

The second technique is not limited to Cross-Domain Policy. However, let's examine how browser works as our agent in these two scenarios:

ajax scenario: developer code => browser => request => server => response => browser => developer code. This means that when you use ajax, browser on behalf of you creates an HTTP Request (with X-Requested-With: XMLHttpRequest header field) and sends it to the server, then it gets the response base, *but it gives you the response back, so that as the developer, you have the opportunity to analyse response and do whatever you want to do with it.

HTTP Get scenario: developer code => script tag in head => browser => request => server => response => browser => response execution.

See? When you use JSONP, or when you insert in simple <script> tag in head, browser gets the script back from the server, but it runs script and that's the end. You haven't been hooked into the response, and you don't have control over it. Thus, you need to provide a callback function for it. callback({}) differs from {} in point that when it gets executed, it gives you the opportunity to get the result and do something with it.

edited Feb 7, 2013 at 6:07

answered Feb 7, 2013 at 6:01

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vandana Over a year ago

You are right! What do i need to do for that. Does that means data comes from server should use the JSONP format? Something else as well. Thanks!

HMR Over a year ago

datatype is already set to jsonp so that could not be the issue

Shanta Over a year ago

[stackoverflow.com/questions/319065/… can refer this question

HMR Over a year ago

Not the issue here, please read api.jquery.com/jQuery.ajax where datatype is jsonp as the code posted by op. Issue could be missing request headers, missing post values or the code block in success: function

HMR Over a year ago

Can't find api documentation for this service but posting the values through a form just gets me html response not jsonp, maybe it can return jsonp but I could not find how.

|

HMR · Accepted Answer · 2013-02-07 06:15:25Z

0

Could you change your code slightly and tell us what is logged to the console? Please do not use IE as it has a horrible implementation of console.log (showing Object.Object). Chrome or Firefox with Firebug will do a better job.

Suggested changes:

        success: function (result) {
console.log("here is the result:",result);
//            switch (result) {
//                case true:
//                     processResponse(result);
//                    break;
//                default:
//                    resultDiv.html(result);
//            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
console.log("this is the error",arguments);
//        alert(xhr.status);
        }

answered Feb 7, 2013 at 6:15

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Collectives™ on Stack Overflow

Need to write Javascript/Jquery based Cross domain Request

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related