Calling JSONP Ajax Callback from Javascript

Question

I'm trying to send an JSONP Ajax request (from client.htm to proxy.htm), which is received by a proxy page which creates another different Ajax JSONP request to a service (proxy.htm ---> service.php). At the moment the proxy page receives the JSON format object from the service, but I'm stuck on returning the object to the first initial Ajax request. The following if the sample code I'm trying to run. Is this possible with Javascript? If so, how could I return the object to the clientCallback function.

Client.htm

// CLIENT ---> PROXY
$(document).ready(function () {
     $.ajax({
            type: 'GET',
            url: 'http://localhost/jsonp_proxy/listener.htm',
            dataType: 'jsonp',
            jsonpCallback: "clientCallback",
            success: function (theData) {
              alert("Success");
            },
            error: function (xhr, ajaxOptions, thrownError) {
              alert("Error");
            }
        });
      });
      window.clientCallback = function(results) {
        alert(results.uid);
      }

Proxy.htm

      // PROXY ---> SERVER
      $(document).ready(function () {
        $.ajax({
          type: 'GET',
          url: 'http://localhost/jsonp_server/service.php',
          dataType: 'jsonp',
          jsonpCallback: "proxyCallback",      
          success: function (theData) {
//          alert("Success");
          },
          error: function (xhr, ajaxOptions, thrownError) {
//          alert("Error");
          }
        });
      });
      window.proxyCallback = function(resultData) {
        // HOW TO CALL CLIENT CALLBACK FUNCTION
      }

Service.php

<?php
echo "proxyCallback("."{'uid': 123, 'username': 'jdirt', 'name': 'Joe Dirt'}".");";
?>

Jeremy J Starcher · Accepted Answer · 2012-09-19 17:18:44Z

1

One of the few semi-valid uses for eval:

success: function (theData) {
  eval("(" + theData + ")");
  //alert("Success");

Just as a reminder, JSONP is something of a hack and security risk. You are giving a lot of trust and control to a 3rd party.

answered Sep 19, 2012 at 17:18

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

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

4 Comments

Manny Over a year ago

Thanks for reply but this does not make it back to the client.htm page. The Ajax goes into the error function.

saml Over a year ago

Never use eval(). Use JSON.parse().

Jeremy J Starcher Over a year ago

@saml -- Normally I'd agree but JSONP is slightly different beast from JSON. JSONP is executable code that must be evaled because it contains an internal callback handler.

saml Over a year ago

@JeremyJStarcher JSONP requests will not ever return the source to you other than by passing some parameter to a function you're requested it to. You can't eval anything, because the success and failure callbacks will only get triggered when the browser finishes loading the code from the remote server, even if the callback itself throws an exception.

saml · Accepted Answer · 2012-09-19 17:21:35Z

0

Simply call window.clientCallback from window.proxyCallback.

answered Sep 19, 2012 at 17:21

saml

6,8321 gold badge37 silver badges31 bronze badges

4 Comments

saml Over a year ago

"does not work" is an extremely vague way to describe failure. What happened? What about what happened did not work the way you expected it? What did you actually try?

Manny Over a year ago

Ok, so I tried calling window.clientCallback from window.proxyCallback but when I browse client.htm the request goes into the error function of the request. I tried calling the functions without making them global and I got the same result. Calling the proxyCallback from the PHP page works fine, but I cannot seem to find a way to do the same with Javascript

saml Over a year ago

Why are you using jsonp for this?

Manny Over a year ago

In large part to an existing service that was slightly modified. The actual service is written in C#, and came with example web page that uses JSONP to get data from the service. Note that the web page and service are complete but due to design (out of my control) I find myself attempting to make this work. It seems to not be the best approach based on the your question and other replies, is this correct? If so, what is a better approach?

Collectives™ on Stack Overflow

Calling JSONP Ajax Callback from Javascript

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related