Cross domain ajax request to a json file using JSONP

Question

I want to access a JSON file which is in domain1 (example.com) from domain2 (example2.com). For example,

$.ajax({
    type:'get',
    url: 'http://example.com/vigneshmoha.json',
    success: function(data) {
        console.log(data);
    },
    statusCode: {
        404: function() {
            console.log('Status code: 404');
        }
    }
});

I want to make this ajax request to example.com from some other domain (ie) example2.com.

I have tried JSONP. I couldn't understand how it works. Can someone please explain the way its work?

Does the domain serving the JSON actually support JSONP? (Or is it your domain so you can make it support JSONP?) — nnnnnn
– nnnnnn, Commented Oct 21, 2013 at 8:55
Sorry, I don't really have the patience to write a tutorial from scratch when there are any number of "how to implement jsonp" tutorials already out there on the web. (E.g., here's one.) — nnnnnn
– nnnnnn, Commented Oct 21, 2013 at 9:22

Community · Accepted Answer · 2017-05-23 12:01:05Z

9

Your service has to return jsonp, which is basically javascript code. You need to supply a callback function to the service from your ajax request, and what is returned is the function call.

Below is a working example.

ajax request:

$.ajax({
            crossDomain: true,
            type:"GET",
            contentType: "application/json; charset=utf-8",
            async:false,
            url: "http://<your service url here>/HelloWorld?callback=?",
            data: {projectID:1},
            dataType: "jsonp",                
            jsonpCallback: 'fnsuccesscallback'
        });

server side code returning jsonp (c#):

public void HelloWorld(int projectID,string callback)
    {

        String s = "Hello World !!";
        StringBuilder sb = new StringBuilder();
        JavaScriptSerializer js = new JavaScriptSerializer();
        sb.Append(callback + "(");
        sb.Append(js.Serialize(s));
        sb.Append(");");
        Context.Response.Clear();
        Context.Response.ContentType = "application/json";
        Context.Response.Write(sb.ToString());
        Context.Response.End();
    }

Refer What is JSONP all about?.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Oct 21, 2013 at 10:02

Saranya

2,00818 silver badges20 bronze badges

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

3 Comments

Mohan Annasamy Over a year ago

Thank you very much. It helped a lot. Following link contains my snippet using jquery and php. [pastebin.com/kWnWVXDh]

Vikrant Over a year ago

hey @Saranya, can u share any link complete demo! it will be really helpful! plz

S Gaber Over a year ago

hey @Saranya , how about the post json-p, could you elaborate more about it.

napo · Accepted Answer · 2013-10-21 11:41:08Z

-1

Have you tried calling it as:

$.getJSON('http://example.com/vigneshmoha.json?callback=foo', null, function(data) {
          console.log(data);
});

And see what happens?

answered Oct 21, 2013 at 11:41

napo

8691 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Cross domain ajax request to a json file using JSONP

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related