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, Oct 21 '13 at 08: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](http://devlicio.us/blogs/scott_seely/archive/2010/09/07/how-jsonp-works-and-some-bits-about-implementing-it-in-wcf.aspx).) — nnnnnn, Oct 21 '13 at 09:22

score 9 · Accepted Answer · edited May 23 '17 at 12:01

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?.

Thank you very much. It helped a lot. Following link contains my snippet using jquery and php. [http://pastebin.com/kWnWVXDh] — Mohan Annasamy, Oct 21 '13 at 13:21
hey @Saranya, can u share any link complete demo! it will be really helpful! plz — Vikrant, Mar 17 '15 at 06:16
hey @Saranya , how about the post json-p, could you elaborate more about it. — S Gaber, Jun 16 '16 at 07:17

score -1 · Answer 2 · answered Oct 21 '13 at 11:41

-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 '13 at 11:41

napo

869
9
19

Cross domain ajax request to a json file using JSONP

2 Answers2

Linked