JSONP Help (No jQuery)

Question

I'm trying hard here to figure out how to do a JSONP request, but everywhere I look for reference material is all jQuery examples. I can read the jQuery source, but I wanted a clean and simple example. I'm building a library for something and I dont want to include jQuery, so please, no jQuery $.getJSON. I know how to do use that.

My server spits out the normal callback({"foo":"bar"}) response with a content-type: application/json; charset=utf-8 MIME.

So if I put in a script tag like (using Twitter since I KNOW their API works):

<script src="http://twitter.com/users/oscargodson.json?callback=test"></script>

Or dynamically. Either works and I get the JSON, its the next step I can't figure out.

If I do just console.log(test) after the script loads I get: Uncaught ReferenceError: test is not defined

Why? How, after i get the response from the server, do I then pass that to myself? On my own server if i do callback = {"foo":"bar"} callback works and returns an object, but not the way above. How come? Ive only used AJAX libraries to do this, but for this project I need to code it myself :)

x10 · Accepted Answer · 2011-05-14 07:58:46Z

3

If you set "callback=test", then in your client code you need to have a function called "test" that takes the json value from the server and handles it for you.

JQuery does just that, with a dynamically-generated function name.

function test(data) { console.log(data) }
get_jsonp("http://www.example.com/?callback=test")

answered May 14, 2011 at 7:58

x10

3,8401 gold badge26 silver badges32 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2011-05-14 08:02:13Z

1

A simple script inclusion should do the job:

function test(res) {
    // TODO: manipulate the results here like for example showing
    // the created_at property
    alert(res.created_at);    
}

window.onload = function() {
    var script = document.createElement("script");
    script.src = 'http://twitter.com/users/oscargodson.json?callback=test';
    document.body.appendChild(script);
};

And here's a live demo.

Obviously you shouldn't forget that browsers might cache static resources such as scripts so if you want to ensure fresh information you could adapt some timestamp to the url.

answered May 14, 2011 at 8:02

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Collectives™ on Stack Overflow

JSONP Help (No jQuery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related