Can someone explain me how to make a REST call using jQuery/Javascript? I tried using the .getJSON() and .ajax(), but neither helped me.

This is the REST URL :

.svc/forecastbyzipcode?zipcode=94954&date=2010-01-15&format=json&key=API_KEY

Code:

$.getJSON('.svc/forecastbyzipcode?zipcode='+zip+'&format=json&key=**<KEY HERE>**',

    function(data)
    {

        alert(data.AQI);
    }

);

$.ajax({
    url: '.svc/forecastbyzipcode',
    type: 'GET',
    data: 'zipcode='+zip+'&format=json&key=**<KEY HERE>**',
    success: function() { alert('get pleted'); }
});

Can someone explain me how to make a REST call using jQuery/Javascript? I tried using the .getJSON() and .ajax(), but neither helped me.

This is the REST URL :

http://ws1.airnowgateway/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=94954&date=2010-01-15&format=json&key=API_KEY

Code:

$.getJSON('http://ws1.airnowgateway/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode='+zip+'&format=json&key=**<KEY HERE>**',

    function(data)
    {

        alert(data.AQI);
    }

);

$.ajax({
    url: 'http://ws1.airnowgateway/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode',
    type: 'GET',
    data: 'zipcode='+zip+'&format=json&key=**<KEY HERE>**',
    success: function() { alert('get pleted'); }
});

• javascript
• rest
• jquery

• 3 Start Googling for "cross domain ajax." – Matt Ball Commented Dec 20, 2011 at 21:09
• 1 @RoyiNamir Still considered cross-domain... "However, the mon moniker for these requests, cross-domain, tends to be misleading. While a request from one domain to another is obviously cross-origin, browsers are much more picky than that. For example, a request from foo.domain. to bar.domain. is just as much cross-origin request as one to abc.. That’s not quite as intuitive as the traditional cross-domain scenario, but requires the same consideration." - encosia./… – Alex Commented Dec 20, 2011 at 21:11
• Yep, by default browsers doesn't allow javascript to perform requests to different domains / protocols.. of course, there are several workarounds to this – redShadow Commented Dec 20, 2011 at 21:12
• Also, question title should be updated to something like "How to make cross-domain requests using jquery"... – redShadow Commented Dec 20, 2011 at 21:14
• @RoyiNamir np - Jayaram feel free to follow the link I've provided, in my ment above, to gain more insight on the topic... – Alex Commented Dec 20, 2011 at 21:17

1 Answer 1

there are a couple of problems. First, you need to add &callback=? to the end of the querystring to allow the crossdomain.

$.getJSON('http://ws1.airnowgateway/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=94954&format=json&key=B868EA39-1D92-412A-96DE-DCF5ED30236D&callback=?',

  function(data)
  {
    alert(data.forecast[0]);
  }

);

You will then get an Uncaught SyntaxError: Unexpected token : error. This is because you are expecting json data, but the headers on the server are sending text/html - not application/json. Take a look at the console when you run this fiddle, you'll see the errors.

Therefore, you can't get the data from cross domain because you have to be using jsonp - which requires the header to be sent correctly.

If this is your api, then you just need to send the correct header, otherwise, you need to get with the developers there and ask them to fix it.

Alternatively

If neither of those above options work, you could always create a proxy script that would get the contents of the json feed for you and echo it out. Here's one in PHP:

<?php
// myproxy.php

header('Content-type: application/json');
$zip = $_GET['zip'];
$results = file_get_contents('http://ws1.airnowgateway/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=' . $zip . '&format=json&key=B868EA39-1D92-412A-96DE-DCF5ED30236D');

echo $results;
?>

Then, you would just point your $.getJSON to this script on your server:

$.getJSON('/myproxy.php?zip='+zip,

  function(data)
  {
    var mydata = jQuery.parseJSON(data);
    alert(mydata.forecast[0]);
  }

);