Question

New to Ajax calls. Need some pointers to start my learning but want to do it with a real example.

This link: http://api.tumblr.com/v2/blog/david.tumblr.com/info?api_key=API_KEY

returns this to my browser which is a good example of data I’ll be using:

{
    "meta": {
        "status": 200,
        "msg": "OK"
    },
    "response": {
        "blog": {
            "title": "David\u2019s Log",
            "posts": 3981,
            "name": "david",
            "url": "http:\/\/www.davidslog.com\/",
            "updated": 1348785660,
            "description": "\u201cMr. Karp is tall and skinny, with unflinching blue eyes and a mop of brown hair. He speaks incredibly fast and in complete paragraphs.\u201d \u2013 NY Observer",
            "ask": false
        }
    }
}

I think I could use this as a start but definitely open to other ways:

var tumblrURL = "david.tumblr.com";

jQuery.ajax({
    url: "http://api.tumblr.com/v2/blog/" + tumblrURL + "/info",
    data: {api_key: "MY_PRIVATE_API_KEY"},
    dataType: "jsonp",
});​

But I am lost as to proper ways to parse out and get the different bits returned and use them as vars or for tests in the call.

For example, how do I get “status” or the “name”?

When the status is a 200 then I would want to make a var out of the name (“david”) and use it for other options.

Or, if the status is a 404 then I would want to do something else (like return an error).

Please, no flames. I’m trying to learn and if I get a few examples or pointers I will be able to move on to more interesting stuff. I’m OK with other aspects of jQuery so those issues should be fine.

Thanks!

Answer 1

The jQuery.Ajax function takes an optional function parameter success:

success(data, textStatus, jqXHR)

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

You could set this to your own function, which would automatically execute once the request succeeds – providing you with the entire JSON blob you receive as a normal Javascript object. In your case, you could get the status of the request at data.meta.status – or the name at data.response.blog.name.

Note that jQuery also allows for error handlers on Ajax requests, called automatically in a similar way: error(jqXHR, textStatus, errorThrown).

---

Example code:

jQuery.ajax({
    url: "http://api.tumblr.com/v2/blog/" + tumblrURL + "/info",
    data: {api_key: "MY_PRIVATE_API_KEY"},
    dataType: "jsonp",
    success: function(data, textStatus, jqXHR) {
        // Do whatever you'd like in here with your data
        console.log("Got a response from " + data.response.blog.name);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // Do whatever you'd like in here with your ERROR data
        alert("Got an error: " + textStatus);
    }
});​