Why does the error "inappropriate tag" appear while using JSONP?

Question

Why does the error "inappropriate tag" appear while using JSONP?

Having issues with my JSONP request - the data is not displaying and Firebug is showing an "invalid label" error.

Here is my JavaScript code:

$.ajax({
    url: link,
    dataType: "jsonp",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    jsonpCallback: "getResources"
})

function getResources(data) {
    alert(data);
    alert(JSON.parse(data));
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}

This is my JSON data:

{
    "groupStatus": [
        {
            "id": "Application Layer Configuration-ApplicationLayer",
            "time": 1332755316976,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        },
        {
            "id": "Application Layer-ApplicationLayer:nscalealinst2",
            "time": 1333431531046,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        }
    ]
}

And here is my HTML markup:

<html>
<head>
    <title>Monitor</title>
    <link href="css/gadget.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="js/gadget.js"></script>
</body>

I have been searching for a solution for days.. Any help would be greatly appreciated!

SOLUTION (update: 06.09.12)

I was able to resolve this issue by realizing that the server (REST interface) where the request was executed did not have a callback function implemented. Another approach for crossdomain requests WITHOUT using JSONP is setting the following jQuery variable:

jQuery.support.cors = true;

javascript ajax json jsonp syntax-error

Answer 1

Answer №1

When making a JSONP call, the response must wrap the JSON data in a function call. Typically, the name of the function to be called is provided in the URL. jQuery automatically includes a "callback" query string parameter in the requested URL. To handle this on your server, you can do something like:

// assuming $JSON contains your JSON content
print "{$_REQUEST['callback']}( {$JSON} );";

The purpose of adding the function name to the response is because a JSONP request is actually a script tag appended to the DOM instead of a traditional request initiated by an XMLHttpRequest object. By using JSONP, the browser can make cross-domain requests that would otherwise be restricted by the same-origin policy applied to XHR requests.

Answer 2

When making a JSONP call, the response must wrap the JSON data in a function call. Typically, the name of the function to be called is provided in the URL. jQuery automatically includes a "callback" query string parameter in the requested URL. To handle this on your server, you can do something like:

// assuming $JSON contains your JSON content
print "{$_REQUEST['callback']}( {$JSON} );";

The purpose of adding the function name to the response is because a JSONP request is actually a script tag appended to the DOM instead of a traditional request initiated by an XMLHttpRequest object. By using JSONP, the browser can make cross-domain requests that would otherwise be restricted by the same-origin policy applied to XHR requests.

Answer 3

Answer №2

If the AJAX script is on the same domain, you can specify the dataType as "json" in your code:

function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
     beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});

If the AJAX script is hosted on a different domain, the server needs to return JSONP data -- JSON data wrapped inside a function call:

callback(
    {
        "groupStatus": []
    }
);

If the server returns bare JSON data, it may result in parsing errors because JSONP requests are similar to injecting a <script src="..."> tag. To understand why using a bare JSON object literal causes a parse error, consider these examples:

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})

Answer 4

If the AJAX script is on the same domain, you can specify the dataType as "json" in your code:

function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
     beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});

If the AJAX script is hosted on a different domain, the server needs to return JSONP data -- JSON data wrapped inside a function call:

callback(
    {
        "groupStatus": []
    }
);

If the server returns bare JSON data, it may result in parsing errors because JSONP requests are similar to injecting a <script src="..."> tag. To understand why using a bare JSON object literal causes a parse error, consider these examples:

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})

Why does the error "inappropriate tag" appear while using JSONP?

Answer №1

Answer №2

Similar questions

Currently focused on designing a dynamic sidebar generation feature and actively working towards resolving the issue of 'Every child in a list must have a distinct "key" prop'

enhance user interface by dynamically updating progress bar from Razor server

Converting a model object to a DataTable in C#

Utilizing the search feature with jQuery UI autocomplete: a step-by-step guide

MySQL RESTful API: Exploring Terminology, Parameter Passing, and Returning Integers and Decimals

A compilation of web browsers and their compatible versions for the SVG engine

The functionality of AJAX is currently disabled in macOS WebView

Guidelines for aligning backend timer with a mobile application

Transmit JSON using the query string

What are some strategies to optimize debugging and troubleshoot errors in a Node.js http post request?

Transfer a session ID cookie generated by express-session to a React front end on a different domain

Modify the displayed text according to the content of the input field in HTML

Injecting JSON response data into HTML using jQuery

Enhance the material-table component by incorporating dynamic information into the lookup property

Using Three.js to apply multiple images onto a sphere and have individual control over each one

What is the most effective way to showcase dynamic labels and their values in a pie chart using chart.js?

Evaluate the functionality of an Angular controller method that interacts with the Document Object Model (

How to select the first column in a jQuery Datatable and turn it into checkboxes

What could be causing the 500 internal service error when attempting to perform an AJAX post in my Django application?

I am facing an issue with ThreeJs where my objects are not getting rendered after being added to a