Jquery getJson Request is getting cancelled

Question

When I run our Analytics app on a localhost, (from the debugger) it loads perfectly. However when I upload to the server, the GET requests are cancelled.

This is a screen shot of the network response:

How would you suggest I fix this?

Here is the response code from the server

/**
     * Sends a JSON response for an object (200)
     * @param objectToEncode
     * @throws Exception
     */
    private void sendJSONResponse(Object objectToEncode, Request baseRequest, HttpServletResponse response) throws Exception{

        //Encode object into JSON
        String jsonString = new Gson().toJson(objectToEncode);
        byte[] utf8JsonString = jsonString.getBytes("UTF8");

        response.setContentLength(utf8JsonString.length);
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/x-json;charset=UTF-8");           
        response.setStatus(200);

        try {
            //Actually send the response
            response.getWriter().write(jsonString);

        } catch (Exception e) {

            // TODO: handle exception
            e.printStackTrace();
        }

    }

Javascript request:

/*
         Draws the chart for average session length by day
         */
        function drawUsersGender() {

            //Apit to get the data from
            var api = GET_USERS_SEX;

            //Request data (using jquery/ajax)
            $.getJSON(api,function(data){

                //Start a days and seconds array
                var result = [['gender', 'number']];

                //Iterate over the genders
                for (var gender in data){

                    //Get the value pair and push
                    var entry = [gender, parseInt(data[gender])];
                    result.push(entry);
                }

                //Parse to google data
                var data = google.visualization.arrayToDataTable(result);

                //Display options
                var options = {
                    title:'Gender for registered users',
                    'width':600,
                    'height':400
                };

                //Draw the chart
                var chart = new google.visualization.PieChart(document.getElementById('genderChart'));
                chart.draw(data, options);
            });
        }

Answer 1

Instead of $.getJSON, you need to use

$.ajax({
     url:GET_USERS_SEX,
     dataType: 'jsonp',
     success:function(json){
         // handle the json response
     },
});

This is because normal JSON responses need to come from the same server. JSONP does not have the cross-domain restriction.

Or you could make sure that you are requesting the JSON with the exact same domain name as you use in the browser url.