CODEWITHSUNDEEP
javascriptphpjqueryajax
Lori
Lori

Reputation: 59

jQuery AJAX request to remote API blocked

I have been successfully accessing data from an external weather data service API for some time now using PHP cURL. Sometimes it takes a few seconds, sometimes up to 15 seconds for this web service to process my request. Therefore, I would like to perform this operation asynchronously.

I am trying jQuery AJAX to send this GET request now. However, it keeps throwing the following error:

"No Access-Control-Allow-Origin header is present on the requested resource".

I'm aware of the "same origin policy" restrictions, and have been researching it extensively here on stackoverflow and the jQuery docs. The docs say that JSONP requests are not subject to this restriction. When I try to designate JSONP as the dataType, I get an "unexpected token" syntax error.

I have the user entering in their zip code into a form text box, then click the button to submit. This sends the GET request to the web service. I'm very comfortable with PHP, but a newbie with jQuery and AJAX. I appreciate the help with this, and look forward to the day when I can help others as I've been helped here.

Here is the jQuery code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnGetETo').click(function () {
            var resultElement = $('#resultDiv');

            var requestData = $('#txtZip').val();
            $.ajax({

                url: 'http://et.water.ca.gov/api/data?appKey=B51CF64B-C37B-406A-83F1-1DBD8CE40EEF&targets=94805&startDate=2015-07-01&endDate=2015-07-01&dataItems=day-asce-eto,day-eto,day-precip&unitOfMeasure=E;prioritizeSCS=Y',                 
                method: 'get',
                data: { q: requestData },
                dataType: 'json',
                success: function (response) {
                    if (response.message != null) {
                        resultElement.html(response.message);
                    }
                    else {
                        resultElement.html('ETo: ' + response.DayAsceEto[0].value);
                    }
                },
                error: function (err) {
                    alert(err);
                }
            });
        });
    });
</script>

Upvotes: 0

Views: 736

Answers (1)

Rich Churcher
Rich Churcher

Reputation: 7654

Unfortunately, it seems that the API in question does not support JSONP. In fact, they seem to have gone out of their way to make it difficult to query via JavaScript.

Here's how to test for JSONP (not foolproof, but most mainstream JSONP-enabled services will respond correctly). Take whatever URL you were planning to send, and add &callback=foo to the end of it. (If there are no other query string parameters of course, use ? instead of &.)

If the server supports JSONP, the response should look like:

foo({
  ...
});

If not, it'll look like:

{
  ...
}

As you can see, the only difference is that JSONP-enabled servers can wrap the JSON in a function of arbitrary name. Some servers will insert a little extra code for safety/convenience. For example, the following output was generated by the JSONplaceholder API using the URL http://jsonplaceholder.typicode.com/users/1?callback=foo:

/**/ typeof foo === 'function' && foo({
  "id": 1,
  "name": "Leanne Graham"
  ...
});

The upshot of all this is that it's the API provider's fault, not yours. If I were giving them feedback I'd make the following suggestions:

  1. Handle cross-origin requests correctly.
  2. Allow fallback to JSONP.

Upvotes: 1

Related Questions