0

I'm relatively new to Javascript and I'm stuck trying to obtain a JSON data from an URL using AJAX.

The url returns an array on characters that I want to request/obtain and then handle the data to show it in html. That url is: http://stark-tundra-9859.herokuapp.com/locations

The code that I'm using is the following, and the problem is that it appears as if I received nothing for response. Besides I dont know what the request info variable should be:

function ajax_request() {

requestInfo='';

var params = JSON.stringify(requestInfo);

$.ajax({
  type: "GET",
  url: 'http://stark-tundra-9859.herokuapp.com/locations',
  data: params,
  contentType: "application/json",
  dataType: "json",
  converters: {
    'text json': true
  },

  success: function(response) {
    $("#responseParagraph").html(response);

  },
  error: function(error) {
    $("#responseParagraph").html(error.responseText);

  }
});

}

@agam360, I also have done a version of this code using JQUERY and I do receive a message in the console which goes as follows:

GET http://stark-tundra-9859.herokuapp.com/locations 200 OK 198ms

Response header Connection keep-alive Content-Length 154 Content-Type application/json;charset=utf-8 Server thin 1.5.1 codename Straight Razor X-Content-Type-Options nosniff

Request header Accept application/json, text/javascript, /; q=0.01 Accept-Encoding gzip, deflate Accept-Language es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3 Connection keep-alive Host stark-tundra-9859.herokuapp.com Origin null User-Agent Mozilla/5.0 (Windows NT 6.1; rv:16.0) Gecko/20100101 Firefox/16.0

The code used to receive that answer is the following:

function json_request() {

$.getJSON(url,
    function(data) {
        alert(data);
        $('#responseParagraph').append("<p>"+data.responseMessage+"</p>");
    });

}

In this JQUERY very It seems as if I dont receive the DATA from the JSON request correctly. Maybe I am handling it erronously?

I would greatly appreciate any help in advance!

Jose Sabas
  • 43
  • 1
  • 1
  • 5
  • 3
    Since this appears to be a foreign domain and it seems to only return JSON (and not JSONP), you can't use Ajax to directly connect to it. See http://en.wikipedia.org/wiki/Same_origin_policy. – Felix Kling May 31 '13 at 14:12
  • 1
    Is your website also running on `stark-tundra-9859.herokuapp.com`? – gen_Eric May 31 '13 at 14:12
  • Also, I don't you can use `contentType: "application/json"` (or `JSON.stringify`) with a GET request (P.S. `contentType` is for the request, not the response). – gen_Eric May 31 '13 at 14:16
  • It is indeed a foreign domain (which I set up for testing), so @FelixKling which one would be my solution here to request this JSON data from this URL? – Jose Sabas May 31 '13 at 14:24
  • @JoseSabas, isn't the json_request() working? what happens now? – funerr May 31 '13 at 14:40
  • @agam360 I do get a responde with the function json_request() but it appears as if I am not receiving the data from the URL, or probably I'm handling it wrongly? – Jose Sabas May 31 '13 at 14:44
  • @JoseSabas, what does alert(data) show? nothing? (try console.log(data) instead). In addition, are you sure you haven't seen any messages in the console looking like: "...s not allowed by Access-Control-Allow-Origin. "? – funerr May 31 '13 at 14:45

1 Answers1

2

To answer this question I will need to ask you two things:
1) On what domain are you running this script? (on the same server as "http://stark-tundra-9859.herokuapp.com/" ?)
Because that URL does not allow CORS (Cross-Origin Resource Sharing)

2) Open up your console (in chrome: Ctrl+shift+j) and tell us what error message
you get, if you get any.

If your answer to the first question is no (meaning you are not running the script on the same host) then, if you have control over that page, enable CORS by sending the following header (please read some info about this, related to security before implementing):

Access-Control-Allow-Origin: *

More language specific implementations can be found on enable-cors.org (You can also read about 'JSONP' implementations regarding cross domain requests - if your not willing to use CORS).

On the other hand, (your answer is yes), we will need to see your server-side related code, and any error messages thrown on the client side.

Note: From what I see (as to now - 5 minutes after posting my answer), the http://stark-tundra-9859.herokuapp.com/locations URL returns a "500 - Internal server error" - Your problem seems to be related to server side of things.

Update, You need to acess your data as a JSON object after you got it,
like so:

data[0].lat // will hold the lat value of the first object in the JSON wrapper object

As to implementing JSONP with jQuery, I ran a quick search in SO, here is something you will probably want to take a look at: jQuery AJAX cross domain

Community
  • 1
  • 1
funerr
  • 7,212
  • 14
  • 81
  • 129
  • Thanks @agam360, To answer your questions: 1)No, I'm not running this script on the same domain. 2) The console appears blank, no messages at all. – Jose Sabas May 31 '13 at 14:31
  • Do you have any control over that page? can you allow (or did you try to allow) CORS? did you try using JSONP? – funerr May 31 '13 at 14:32
  • I beleive it is possible for me to add CORS (never heard of it before though). And NO I havent try using JSONP, why yo say so, should it work with JSONP? – Jose Sabas May 31 '13 at 14:39
  • @JoseSabas, Client-side code (that isn't originating from the same host) can't just request every page it desires if not allowed by the page/host. To overcome this situation you can use CORS (allow external JavaScript to access your page) or JSONP which does a neat trick in order to achieve the same result. If you are running the script externally (e.g. from a different host) and you want it to access that page, use one of those techniques. – funerr May 31 '13 at 14:43
  • All right @agam360 perfect, thanks. I'll try to make my way with JSONP. Anny suggestions to achieve that neat trick ?, lol – Jose Sabas May 31 '13 at 14:48
  • @JoseSabas, did you really get things working? if not try using what I wrote in my updated answer section, and my comment in your question. – funerr May 31 '13 at 14:51
  • thanks bro, right now Im reading all the documentation to try to make this work. I'll post any problems later and I will let you know, – Jose Sabas May 31 '13 at 15:14