How to make a JSONP request from Javascript without JQuery

Question

Can I make a cross-domain JSONP request in JavaScript without using jQuery or other external library  I would like to use JavaScript itself and then parse the data and make it an object so I could use it  Do I have to use an external library  If not  how can I do it

User · Answer

the way I use jsonp like below   function jsonp uri        return new Promise function resolve  reject            var id         Math round 10000   Math random             var callbackName    jsonp callback     id          window callbackName    function data                delete window callbackName               var ele   document getElementById id               ele parentNode removeChild ele               resolve data                      var src   uri     amp callback     callbackName          var script   document createElement  script            script src   src          script id   id          script addEventListener  error   reject            document getElementsByTagName  head   0     document body    document documentElement  appendChild script              then use  jsonp  method like this   jsonp  http   xxx cors   then function data       console log data         reference   JavaScript XMLHttpRequest using JsonP  http   www w3ctech com topic 721  talk about the way of use Promise

User · Answer

If you are using ES6 with NPM  you can try node module  fetch-jsonp   Fetch API Provides support for making a JsonP call as a regular XHR call   Prerequisite  you should be using isomorphic-fetch node module in your stack

User · Answer

Please find below JavaScript example to make a JSONP call without JQuery   Also  you can refer my GitHub repository for reference   https   github com shedagemayur JavaScriptCode tree master jsonp   x000D   x000D  window onload   function    x000D      var callbackMethod    callback     new Date   getTime    x000D   x000D      var script   document createElement  script    x000D      script src    https   jsonplaceholder typicode com users 1 callback   callbackMethod  x000D   x000D      document body appendChild script   x000D   x000D      window callbackMethod    function data   x000D          delete window callbackMethod   x000D          document body removeChild script   x000D          console log data   x000D        x000D    x000D   x000D   x000D

User · Answer

Lightweight example  with support for onSuccess and onTimeout   You need to pass callback name within URL if you need it   var  jsonp    function      var that          that send   function src  options        var callback name   options callbackName     callback         on success   options onSuccess    function            on timeout   options onTimeout    function            timeout   options timeout    10     sec      var timeout trigger   window setTimeout function          window callback name    function            on timeout           timeout   1000        window callback name    function data         window clearTimeout timeout trigger         on success data              var script   document createElement  script        script type    text javascript       script async   true      script src   src       document getElementsByTagName  head   0  appendChild script          return that          Sample usage    jsonp send  some url callback handleStuff         callbackName   handleStuff       onSuccess  function json           console log  success    json              onTimeout  function            console log  timeout                timeout  5       At GitHub  https   github com sobstel jsonp js blob master jsonp js

User · Answer

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

User · Answer

Just pasting an ES6 version of sobstel s nice answer   send someUrl    error d     encodeURI JSON stringify json       amp callback c    c   5       then  json    gt  console log json        catch  err    gt  console log err    function send url  callback  timeout        return new Promise  resolve  reject    gt            let script   document createElement  script           let timeout trigger   window setTimeout      gt                window callback         gt                 script parentNode removeChild script              reject  No response              timeout   1000           window callback     data    gt                window clearTimeout timeout trigger              script parentNode removeChild script              resolve data                     script type    text javascript          script async   true         script src   url          document getElementsByTagName  head   0  appendChild script

User · Answer

Get JSONP data for cross-domain AJAX requests     private     link http   cameronspear com blog exactly-what-is-jsonp      param   String  url      The URL of the JSON request     param   String  callback The name of the callback to run on load     var loadJSONP   function   url  callback             Create script with url and callback  if specified      var ref   window document getElementsByTagName   script     0        var script   window document createElement   script         script src   url    url indexOf          1     amp             callback     callback          Insert script tag into the DOM  append to  lt head gt       ref parentNode insertBefore  script  ref            After the script is loaded  and executed   remove it     script onload   function              this remove                        Example         Function to run on success var logAPI   function   data         console log  data          Run request loadJSONP   http   api petfinder com shelter getPets format json amp key 12345 amp shelter AA11    logAPI

User · Answer

I have a pure javascript library to do that https   github com robertodecurnex J50Npi blob master J50Npi js  Take a look at it and let me know if you need any help using or understanding the code    Btw  you have simple usage example here  http   robertodecurnex github com J50Npi

User · Answer

I wrote a library to handle this  as simply as possible  No need to make it external  its just one function  Unlike some other options  this script cleans up after itself  and is generalized for making further requests at runtime    https   github com Fresheyeball micro-jsonp  function jsonp url  key  callback         var appendParam   function url  key  param               return url                    url indexOf       gt  0     amp                            key         param                      createScript   function url  callback               var doc   document                  head   doc head                  script   doc createElement  script                 script              setAttribute  src   url                head              appendChild script                callback function                    setTimeout function                        head                      removeChild script                      0                                       q                q    Math round Math random     Date now          createScript          appendParam url  key  q   function remove               window q                    function json                       window q    undefined                      remove                        callback json

User · Answer

What is JSONP  The important thing to remember with jsonp is that it isn t actually a protocol or data type  Its just a way of loading a script on the fly and processing the script that is introduced to the page  In the spirit of JSONP  this means introducing a new javascript object from the server into the client application  script  When is JSONP needed  It is 1 method of allowing one domain to access  process data from another in the same page asyncronously  Primarily  it is used to override CORS  Cross Origin Resource Sharing  restrictions which would occur with an XHR  ajax  request  Script loads are not subject to CORS restrictions  How is it done Introducing a new javascript object from the server can be implemented in many ways  but the most common practice is for the server to implement the execution of a  callback  function  with the required object passed into it  The callback function is just a function you have already set up on the client which the script you load calls at the point the script loads to process the data passed in to it  Example  I have an application which logs all items in someone s home  My application is set up and I now want to retrieve all the items in the main bedroom  My application is on app home com  The apis I need to load data from are on api home com  Unless the server is explicitly set up to allow it  I cannot use ajax to load this data  as even pages on separate subdomains are subject to XHR CORS restrictions  Ideally  set things up to allow x-domain XHR Ideally  since the api and app are on the same domain  I might have access to set up the headers on api home com  If I do  I can add an Access-Control-Allow-Origin   header item granting access to app home com  Assuming the header is set up as follows  Access-Control-Allow-Origin   quot http   app home com quot   this is far more secure than setting up JSONP  This is because app home com can get everything it wants from api home com without api home com giving CORS access to the whole internet  The above XHR solution isn t possible  Set up JSONP On my client script   I set up a function to process the reponse from the server when I make the JSONP call   function processJSONPResponse data        var dataFromServer   data     The server will need to be set up to return a mini script looking something like  quot processJSONPResponse    quot room quot   quot main bedroom quot   quot items quot    quot bed quot   quot chest of drawers quot       quot  It might be designed to return such a string if something like   api home com getdata room amp room main bedroom is called  Then the client sets up a script tag as such  var script   document createElement  script    script src      api home com getdata room amp room main bedroom    document querySelector  head   appendChild script    This loads the script and immediately calls window processJSONPResponse   as written  echo  printed out by the server  The data passed in as the parameter to the function is now stored in the dataFromServer local variable and you can do with it whatever you need  Clean up Once the client has the data  ie  immediately after the script is added to the DOM  the script element can be removed from the DOM  script parentNode removeChild script

User · Answer

My understanding is that you actually use script tags with JSONP  sooo     The first step is to create your function that will handle the JSON   function hooray json           dealin wit teh jsonz     Make sure that this function is accessible on a global level   Next  add a script element to the DOM   var script   document createElement  script    script src    http   domain com  function hooray   document body appendChild script     The script will load the JavaScript that the API provider builds  and execute it

User · Answer

Loads data asynchronously via JSONP      const load         gt      let index   0    const timeout   5000     return url   gt  new Promise  resolve  reject    gt        const callback      callback    index        const timeoutID   window setTimeout      gt          reject new Error  Request timeout             timeout        window callback    response   gt          window clearTimeout timeoutID         resolve response data               const script   document createElement  script        script type    text javascript       script async   true      script src   url    url indexOf          -1           amp       callback     callback      document getElementsByTagName  head   0  appendChild script                 Usage sample   const data   await load  http   api github com orgs kriasoft

[javascript] How to make a JSONP request from Javascript without JQuery?

Examples related to javascript

Examples related to jsonp