How to write JSONP Ajax request on pure js?

Question

$.ajax( { url : '', data: {}, dataType:'jsonp',  jsonpCallback: 'callbackName', type: 'post'
        ,success:function (data) {
        console.log('ok');
        },
        error:function () {
        console.log('error');
        }
        });

How do I write the same functionality in pure JS?

You use XMLHttpRequest. Lots of examples on how to do this out there. Here's one: http://codeislife.org/javascript/pure-javascript-ajax-190 Just search the google for "pure javascript ajax" — joelmdev, May 16 '14 at 18:30
I tried this code. But it throws an error, as well as all 'Error in request' — user2231356, May 16 '14 at 18:45
JSONP and `POST` - am I missing something? JSONP is actually a way to (cross site) request data by a `script` tag that's injected to the page DOM (naturally leading to a `GET` request), executing the function call defined in the Javascript response to handle the data. From this point @Kevin B's answer is perfectly correct. Your API looks strange. — try-catch-finally, May 16 '14 at 19:11
@joelmdev ironically, this question pops at the top of the results for me. — rr-, Jan 03 '15 at 13:57

score 8 · Answer 1 · edited Nov 23 '15 at 22:16

8

var xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST", 'http://forexplay.net/ajax/quotes.php');
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if(xmlhttp.status == 200){
            console.log('Response: ' + xmlhttp.responseText );
        }else{
            console.log('Error: ' + xmlhttp.statusText )
        }
    }
}
xmlhttp.send(data);

I'm always forgetting about capital and small letters in XMLHttpRequest

edited Nov 23 '15 at 22:16

Hasse Björk

1,431
13
19

answered May 16 '14 at 18:31

desu

455
2
18

I tried this code. But it throws an error, as well as all 'Error in request' – user2231356 May 16 '14 at 18:41
I finaly understood what did you mean. Look here [link](http://stackoverflow.com/a/20035319/3641231) – desu May 16 '14 at 18:55
2

xmlhttp.status == 2 xmlhttp.responseText – user956584 Sep 08 '14 at 21:17
This is not JSONP... – matronator May 17 '23 at 22:52

score 7 · Accepted Answer · answered May 16 '14 at 18:59

7

In this particular case, you aren't making an ajax call at all, instead you're making a JSONP request. Luckily, these are incredibly easy to replicate and work in all browsers.

var s = document.createElement("script"),
    callback = "jsonpCallback_" + new Date().getTime(),
    url = "http://forexplay.net/ajax/quotes.php?callback=" + callback;
window[callback] = function (data) {
    // it worked!
    console.log(data);
};
s.src = url;
document.body.appendChild(s);

answered May 16 '14 at 18:59

Kevin B

94,570
16
163
180

Note, this performs a GET request, it isn't possible to perform a POST jsonp request. – Kevin B May 16 '14 at 19:01
but what if I need to run the code recursively? – user2231356 May 16 '14 at 19:14
.... really? put it in a function. – Kevin B May 16 '14 at 19:15
JSONP was intended to request data cross domain. The way Kevin shows is perfectly right. I would rather challenge why the TO is sending JSONP on `POST` where pure JSON would be ok OK. – try-catch-finally May 16 '14 at 19:15

How to write JSONP Ajax request on pure js?

2 Answers2

Linked