JSON VS JSONP with Correct Content Type

Learn JSON and JSONP with correct content Type

Published March 19, 2020

What is JSON
JSON Example
Content Type of JSON
What is JSONP
JSONP Example
Content Type of JSON-P
Example Of json
Example Of jsonp

What is JSON

JSON Stands for JavaScript Object Notation.
JSON is standard format that is human readable used to transmit information from one server to another server.

JSON Example

{“Name”: “Travis”, “Age”: 23, “salary”: 60000}

Content Type of JSON

Content-Type: application/json

What is JSONP

JSONP stands for JavaScript Object Notation with Padding.
JSONP is a method for sending JSON data without worrying about cross-domain issues.
It is useful for making cross domain requests, which are often otherwise forbidden by browsers for security reasons.
JSONP does not use the XMLHttpRequest object.
JSONP uses the html <script> tag instead.

JSONP Example

functionCallback({“Name”: “Travis”, “Age”: 23, “salary”: 60000});

Content Type of JSON-P

Content-Type: application/javascript

Example index.php

To understand this example you need to watch the video.


    <button onclick="getJSON()">
        JSON Testing
    </button>

    <br><br>

    <button onclick="FindCode()">
        JSONp Testing
    </button>

    <script src="https://code.jquery.com/jquery-git.js"></script>
    <script>
        function FindCode() {

            //console.log("FindCode just called!");
            $(document).ready(function() {

                url_jsonp = 'jsonp.php?ranking=8&name="Jason"';
                $.ajax({
                    url: url_jsonp,
                    dataType: "jsonp"
                });


            })
        }

        function getJSON() {
            url_json = 'json.php';
            $.get(url_json, function(value, status) {

                //console.log(value);
                //console.log(status);

                value.forEach(function(item){
                    console.log(item);
                });

            });
        }

        function promoteManager(title) {
            console.log("Promoting " + title + " to Manager position with benefits");
        }

        function promoteDirector(title) {
            console.log("Promoting " + title + " to Director position with benefits");
        }

    </script>

Example json.php


    header('Content-Type: application/json; charset=utf-8');
    
    $data = [ 'a', 'b', 'c' ];
    echo json_encode($data);

Example jsonp.php

    header('Content-Type: application/javascript; charset=utf-8');

    $ranking = $_GET["ranking"];
    $name = $_GET["name"];


    echo ' function promoteManager(title) {
        console.log("Promoting " + title + " to Manager position with benefits");
    }

    function promoteDirector(title) {
        console.log("Promoting " + title + " to Director position with benefits");
    }';

    if ($ranking == 9){
        //echo "Name: ". $name . " ranking: " . $ranking;
        echo "promoteManager('.$name.')";
    }        
    elseif ($ranking == 8){
        //echo "Name: ". $name . " ranking: " . $ranking;
        echo "promoteDirector('.$name.')";
    }

JSON (JavaScript Object Notation) and JSONP (JSON with padding) seems similar but they are different.

The MIME media type for JSON text is application/json. The default encoding is UTF-8. (Source: RFC 4627).

JSONP is handled different than JSON, in a web browser. JSONP is treated as a regular JavaScript script and therefore it should use application/javascript

Please note: text/javascript is now obsolete, for details click here. You should use application/javascript when using javascript. However, due to legacy reasons, text/javascript is still widely used and it has cross-browser support (which is not always a case with application/javascript MIME type, especially with older browsers).

For a list of all available content type visit iana.org