[SalesForce] restful call to external analytics API via visualforce/apex

So I'm trying to access Woopra analytic's restful API via apex/visualforce. I am wondering a couple of things:

1) The API returns a JSON object via the usual POST/GET method… would it be best to call the API through apex, or would it be better (or even possible) to do a jquery/ajax style call from a VF page?

2) IF I were to need to do this in apex, how would I translate the following:

var params = {
  website: 'yourwebsite',
  segment: [
    {
      did: {
        operator: 'AND',
        filters: [
          {
            scope: 'actions',
            key: 'name',
            match: 'match',
            value: 'quote'
          }
        ]
      },
      are: {
        operator: 'AND',
        filters: []
      }
    }
  ]
  // optional parameters
  offset: 0,
  report_id: -1 //paging   
};

$.ajax({
  type: 'POST',
  url: 'http://www.woopra.com/rest/search'
  crossDomain: true,
  beforeSend: function(wrq) {
    wrq.setRequestHeader('X-Api-Version', '2.0');
    wrq.setRequestHeader('X-Access-Id', APP_IDXXXXXXXX);
    wrq.setRequestHeader('X-Access-Secret', SECRET_KEYXXXXXXX);
  },
  data: params
});

my best shot is:

    public global class WoopraData
    {
        @future (callout=true)
           public string json;
            public string response;
        public static void sendRequest() {

            HttpRequest req = new HttpRequest();
            HttpResponse res = new HttpResponse();
            Http http = new Http();

            req.setEndpoint('http(s)://www.woopra.com/rest/report`');
            req.setMethod('POST');
            req.setBody('website=XXXXXXXXX.com'+'&segment=did: {operator: \'AND\', filters: [ {scope:\'actions\', key : \'name\', mathch:\'match\', value: \'quote\'}]}, are: {
        operator: \'AND\',
        filters: []
      }
    }
  ]);
            req.setCompressed(true); // otherwise we hit a limit of 32000

            try {
                res = http.send(req);
                json = res.getbody();
                response = convertresponst(json);
            } catch(System.CalloutException e) {
                System.debug('Callout error: '+ e);
                System.debug(res.toString());
            }

        }

        public string convertresponse(string json)
        {
           try{
            JSONObject j = new JSONObject( json );
           }
           catch(Exception e){}

            results = j.getValue('totalvisits').values[0].dnum.format();
            return response;
        }
        public static testMethod void testMe() {
            WebServiceCallout.sendRequest();
        }
    }

… How would I go about 1) writing this correctly, and 2) displaying this on a VF page (very simply, I just want to get the data to appear)?

Any push in the right direction will help immensely (mainly, trying to translate the API call into APEX, or helping me figure out how ot make the call directly from the page.

Here is the API documentation:

http://www.woopra.com/docs/developer/analytics-api/

And My references so far are:

http://blogs.developerforce.com/developer-relations/2012/10/not-calling-the-rest-api-from-javascript-in-visualforce-pages.html

http://developer.force.com/cookbook/recipe/accessing-docusign-api-from-salesforcecom-to-send-contracts-for-esignatures

http://techblog.appirio.com/2010/01/calling-rest-web-service-json-with-apex.html

http://wiki.developerforce.com/page/Apex_Web_Services_and_Callouts

http://blog.jeffdouglas.com/2009/03/16/restful-web-service-callout-using-post/