retrieve RESTful data using JQuery ajax() method

Question

I am trying to pull in information from Asana API via JQuery.ajax() method. But no desired result is returned, or error showed.
Here is my partial code in JavaScript:

$(document).ready(function () {

    $('#buttonCallAjax').click(function () {
        jQuery.support.cors = true;
            $.ajax(
                {
                    type: "GET",
                    url: "https://app.asana.com/api/1.0/users/me",
                    data: "{}", 
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    dataType: "jsonp",
                    success: function (data) {


                        alert(data);

                    },
                    error: function (msg, url, line) {
                        alert('error trapped in error: function(msg, url, line)');
                        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);

                    }
                });
        });

    });

I have read a lot about ajax() method, but still figured out some options parameters in this method, like data, dataType(because this is cross-domain request, I used jsonp).
Can someone please help with successfully pulling in information from Asana API?

I don't believe their service returns jsonp by default. Please check the documentation and ensure it supports jsonp. I'd suspect there's some querystring option that would do it. — Justin Summerlin, Jul 01 '12 at 06:24
Are you using a debugging tool such as Firebug for Firefox? Chrome has a built in one as well. This way you can actually see the HTTP-Request go out and it will show you the status code and you can view the headers and body of the response. — Despertar, Jul 01 '12 at 06:25
Looks like that API call , needs authorization and your not providing any — tsukimi, Jul 01 '12 at 06:27
To Despertar: Yes, I am using Firebug for Firefox, and using firebug I can check status is 200 OK, and under Net option, in the response option there is information I want. Also, When I have the html which includes the javascript run in firefox(I mean clicking on the button), it only shows "msg = [object Object], url = parsererror, line = Error: jQuery172019258527724872776_1341163430791 was not called". BUt I do see the contents I want in the response via firebug. Thanks a lot!!! — lxx22, Jul 01 '12 at 17:59
To Tsukimi, yes, I have thought of this problem, but I don't know where to add the authorization (Asana API gives each user a unique API key) in the ajax method? Thanks a lot! — lxx22, Jul 01 '12 at 18:02

Justin Summerlin · Answer 1 · 2012-07-02T09:11:38.723

1

After a little research, it doesn't look like Asana's API supports returning JSONP right now.

Additionally, after some probing of my own, it doesn't look like they support CORS either, so cross-origin XHRs look out of the question. Granted, I didn't test with proper authentication, and their service may be configured to only grant CORS headers to requests that are authorized.

You can, alternatively, have a server-side script issue a generic web request to the API and proxy the results back to your UI.

edited Jul 02 '12 at 09:11

answered Jul 01 '12 at 06:34

Justin Summerlin

4,938
1
16
10

"add CORS to your server responses to authorize XHR requests against Asana's api service"? Do yo mean add "jQuery.support.cors = true", otherwise I did not get what you mean about add CORS. Thanks a lot. – lxx22 Jul 02 '12 at 05:17
Sorry, I was confused. CORS are headers their service can set that allow browsers to perform XHR requests against another domain. But it doesn't appear to me that they support that either. – Justin Summerlin Jul 02 '12 at 09:13

tsukimi · Accepted Answer · 2012-07-02T02:31:52.553

Even though it looks as though the Asana API currently doesnt support JSONP, if in the future they do and you need to do authentication you can do it with the below code.

$.ajax( {
  url : 'https://app.asana.com/api/1.0/users/me',
  dataType : 'jsonp',
  beforeSend : function(xhr) {
      xhr.setRequestHeader('Authorization', 'Basic ' + btoa(API_KEY + ":"));

  }
);

The btoa function encodes to base64 but its not supported on all browsers so you may need to use some other library, if you need to support older browsers.

Update

The username name can also be set directly with jQuery no encoding or setting headers.

 $.ajax( {
  url : 'https://app.asana.com/api/1.0/users/me',
  dataType : 'jsonp',
  username : API_KEY
 });

When using JS to access the API your API_KEY is going to be there on the page in clear text.Maybe this stuff should be done on the server side.

retrieve RESTful data using JQuery ajax() method

2 Answers2

Linked