How to rewrite jquery to javascript: JsonP+ Callbacks

Question

How would one rewrite this jquery function as regular javascript?

$(document).ready(function() {
    $.ajax({
        url: 'http://192.168.1.103:8124/',
        dataType: "jsonp",
        jsonpCallback: "_testcb",
        cache: false,
        timeout: 5000,
        success: function(data) {
            $("#test").append(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('error ' + textStatus + " " + errorThrown);
        }
    });
});

Particularly

  jsonpCallback: "_testcb",
         cache: false,

Original Wrong Question: How does one set the properties of an xmlhttprequest object to recieve JsonP callbacks using regular javascript?

Updated Correct Question: How does one make JsonP Callbacks with "Pure Javascript"?

Stackoverflow isn't a code conversion tool. Do you have a particular question? — zerkms, Apr 26 '13 at 00:21
Search: http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — tymeJV, Apr 26 '13 at 00:23
It's more about adopting properties set by the above jquery function... I will provide an example. — FredTheWebGuy, Apr 26 '13 at 00:23
@zerkms Question Updated. I'd rather learn how to fish than be given one:) — FredTheWebGuy, Apr 26 '13 at 00:27
If you want an absolute minimal jsonp component check out component.io jsonp https://github.com/LearnBoost/jsonp/blob/master/index.js — Scott Puleo, Apr 26 '13 at 00:35
A cross-domain jsonp request doesn't use xmlhttprequest, it creates a script element. (jQuery hides that from you to make it easy to use.) — nnnnnn, Apr 26 '13 at 00:57

Blender · Accepted Answer · 2013-04-26T01:00:35.077

3

Send a request and see what it looks like through your browser's web developer tools:

enter image description here

So to mimic jQuery's anti-caching behavior, you can append a timestamp parameter to the URL when sending an AJAX request:

jsonp(url + '&_=' + (new Date).getTime());

As for the JSONP callback, you just pass a callback parameter:

jsonp(url + '?callback=' + callback_name);

The browser then basically calls eval(callback_name + '(' + response + ')');, so make sure that your callback function is global.

edited Apr 26 '13 at 01:00

answered Apr 26 '13 at 00:28

Blender

289,723
53
439
496

Aha! A callback parameter... – FredTheWebGuy Apr 26 '13 at 00:29
Is that the jsonpCallback: "_testcb", in the above sample? – FredTheWebGuy Apr 26 '13 at 00:30
@DudeSolutions: Yep, see my screenshot. It may be a little hard to read, but the jQuery source file isn't too complicated: https://github.com/jquery/jquery/blob/master/src/ajax/jsonp.js – Blender Apr 26 '13 at 00:30
JSONP isn't just a matter of adding a callback parameter - isn't it normally implemented by appending a script element rather than using an xmlhttprequest? At least, for cross-domain requests. (jQuery does this for you, does it not?) – nnnnnn Apr 26 '13 at 00:59
@nnnnnn: I think that's the only way you can do it. – Blender Apr 26 '13 at 01:01
@nnnnnn I can't use jQuery. I have to use the "pure" javascript equivalent of my example to get it to work server side. – FredTheWebGuy Apr 26 '13 at 01:19
@DudeSolutions: Why? Are you using Node? – Blender Apr 26 '13 at 01:22
@Blender Not Node-- PhantomJs :) – FredTheWebGuy Apr 26 '13 at 01:23
@DudeSolutions - I know you don't want jQuery, I was just indicating that jQuery hides this implementation detail from you but it is what you will have to implement for yourself. – nnnnnn Apr 26 '13 at 01:37
@DudeSolutions: You can include jQuery in PhantomJS: https://github.com/ariya/phantomjs/wiki/Page-Automation#use-jquery-and-other-libraries – Blender Apr 26 '13 at 01:38
@Blender From what I have tried Jquery can only be used to manipulate DOM objects scraped by PhantomJs- it won't compile to the runtime code.Long story short: I just want to send POST or GET data from my phantomJs app to other servers at other domains I own, to send data to various controllers at other websites. – FredTheWebGuy Apr 26 '13 at 01:43
@nnnnnn Sure enough- you're 100% right. A script is indeed appended. In the example below, a script is appended to the HEAD. See below. – FredTheWebGuy Apr 26 '13 at 16:39
A lot of concepts to grok- really, I was asking the wrong question... Here is another question that more accurately reflects what I'm trying to do....: http://stackoverflow.com/questions/16241615/curl-or-the-equivalent-of-for-server-side-javascript – FredTheWebGuy Apr 26 '13 at 17:03

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

Update:

So after a little digging I found the equivalent from this post:

function foo(data)
{
    // do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.getElementsByTagName('head')[0].appendChild(script);
// or document.head.appendChild(script) in modern browsers

Works like a charm!

edited May 23 '17 at 11:57

Community

1
1

answered Apr 26 '13 at 16:36

FredTheWebGuy

2,546
3
27
34

How to rewrite jquery to javascript: JsonP+ Callbacks

2 Answers2