CODEWITHSUNDEEP
javascriptajaxjsonfacebook
Derek
Derek

Reputation: 2112

facebook graph api ajax XMLHttpRequest - Null result?

Summary: Keep getting null response despite public data and setting callback to enable cross domain JSON. Please help!

A similar question has been answered here

Using the new facebook graph api, ajax calls returns null (empty)

but I'm not using jquery and have tried to adapt my code to reflect that answer.

I'm trying to use a simple example to test a simple xmlhttprequest handler. I have this link in my page: 

<a href='javascript:loadXMLDoc(\"https://graph.facebook.com/btaylor?callback=methodname\",\"\")'>AJAX LINK</a>

The callback=methodname parameter is to enable cross domain JSON

I'm using a generic XMLhttprequest builder:

var req; // Request object

function loadXMLDoc(url,params){ 

    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.setRequestHeader("Content-length", params.length);
        req.setRequestHeader("Connection", "close");
        req.send(params);

    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            req.setRequestHeader("Content-length", params.length);
            req.setRequestHeader("Connection", "close");
            req.send(params);
        }
    }
}

I then have a handler :

    function processReqChange(){

     if (req.readyState == 4) {
            if (req.status == 200) {
              alert("Done");
            } else {
                //alert("There was a problem retrieving the data:\n" + req.statusText);
                alert("Status Code = "+req.status);
             alert("There was a problem retrieving the data:\n");
             alert("Failed : object = "+req);
                alert(req.responseXML);
                alert("Failed : response = "+req.responseText);
             alert("Failed : status = "+req.statusText);
            }
        }else{
     }
    }

But I keep getting a null response (statusText OK, status code 0). Any ideas?

Thanks in advance

Upvotes: 0

Views: 3112

Answers (2)

David F Mayer
David F Mayer

Reputation: 11

Remove this line and try again:

req.setRequestHeader("Connection", "close");

It sets up the connection to close automatically, often before the send is complete.

Upvotes: 1

Mike Ruhlin
Mike Ruhlin

Reputation: 3556

You can't make a cross-domain ajax request. Look into whether or not they support JSONP, or use the FB.api method from their javascript SDK http://developers.facebook.com/docs/reference/javascript/FB.api

EDIT: I didn't read your post very thoroughly when I replied. I see that you're adding the callback name to your ajax request, which isn't going to do any good because you're still making an XHR request, so it will still fail cross-domain. You seem to be misunderstanding how JSONP works.

Normally I'd just suggest using a framework like jQuery to abstract out the work that you shouldn't have to reinvent. If you're absolutely dedicated to doing this without jQuery, start by reading the wikipedia article on how JSONP works: http://en.wikipedia.org/wiki/JSON#JSONP

The basic idea is:

  1. Create a script node where the src attribute looks just like the URL you're trying to request now.
  2. The server will respond with something like : methodname({"foo": "bar"}); instead of just JSON. Since this is being requested via a script node, your browser will execute the "methodname" function and pass in the results.
  3. implement methodname(response) function to handle the response (i.e. do the work you intended to do in processReqChange)

Upvotes: 1

Related Questions