JSONP Tutorial

In this section, we will introduce the concept of JSONP to you.

Jsonp (JSON with Padding) is a "usage pattern" for JSON, allowing web pages to retrieve data from other domains (websites), i.e., cross-domain data retrieval.

Why do we need a special technology (JSONP) to access data from different domains (websites)? This is due to the same-origin policy.

The same-origin policy, proposed by Netscape, is a well-known security policy, and all browsers that support JavaScript use this policy.

JSONP Application

1. Server-side JSONP Format Data

If a client wants to access: https://www.tutorialpro.org/try/ajax/jsonp.php?jsoncallback=callbackFunction.

Suppose the client expects the returned data: ["customername1","customername2"].

The actual data displayed returned to the client is: callbackFunction(["customername1","customername2"]).

The server-side file jsonp.php code is:

jsonp.php File Code

<?php
header('Content-type: application/json');
// Get the callback function name
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
// JSON data
$json_data = '["customername1","customername2"]';
// Output data in JSONP format
echo $jsoncallback . "(" . $json_data . ")";
?>

2. Client-side Implementation of callbackFunction

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

Page Display

<div id="divCustomers"></div>

Complete Client-side Page Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP Example</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.tutorialpro.org/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

Using JSONP with jQuery

The above code can be implemented using jQuery as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP Example</title>
    <script src="https://cdn.static.tutorialpro.org/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$(document).ready(function(){
    $.ajax({
        url: "https://www.tutorialpro.org/try/ajax/jsonp.php",
        dataType: "jsonp",
        jsonp: "jsoncallback",
        success: function(response){
            var html = '<ul>';
            for(var i = 0; i < response.length; i++)
            {
                html += '<li>' + response[i] + '</li>';
            }
            html += '</ul>';
            $('#divCustomers').html(html);
        }
    });
});
</script>
</body>
</html>

$.getJSON("https://www.tutorialpro.org/try/ajax/jsonp.php?jsoncallback=?", function(data) {

var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
    html += '<li>' + data[i] + '</li>';
}
html += '</ul>';

$('#divCustomers').html(html);

}); </script> </body> </html>

❮ Json Parse Json Intro ❯