Replace an API call using $.ajax() and JSONP with a server-to-server API call

Question

I have a javascript application calling an ajax function that looks like this

$.ajax({ url: apiURL, dataType: 'jsonp', success: function(data) {
    if (data.ok) {
        //do things
}}});

the ajax url im trying to access is through etsyapi everything works fine and dandy until i try to access the application in chrome with adblock on. it makes the ajax call fail completely, returns an error with a Failed to load resource-"theActualURL" message.

I couldn't figure out how to get past this in javascript and was told that i need to do a php call to get this working.

Unfortunately, i dont know the first thing about php- ive tried to understand even the basic structure for it, and i havent been able to find any work arounds in javascript, so i think it has to be done with php.

Is there simplest way to call the ajax function in php with a dynamic url(which is passed to the php page from javascript) and have it pass the array back to javascript to maniuplate?

ive gotten this far with the php-

<?php
    $json = array();

    ????????????????????????

    $jsonstring = json_encode($json);
    echo $jsonstring; 
?>

but dont understand how to access a dynamic url from javascript.

Answer 1

If it's genuinely using jsonp you shouldn't need php. Replace your $.ajax... with:

var newScript = document.createElement('script');
newScript.src = apiURL;
document.head.appendChild(newScript);

Ignore the above, I'm out of date with jQuery. Even so, you shouldn't need php if the API endpoint is really responding with jsonp. It sounds like the url was wrong/bad if you're getting an error. Have you tried simply opening apiURL by putting it in your browser's address bar?

jsonp is a work around for cross domain ajax restrictions that wraps the returned data in a javascript function call. This allows you to load it in a script tag and the function is run with the data as a parameter when the script is executed.