JSONP

JSONP is a method to transmit JSON data without considering cross-domain issues.

JSONP does not use the XMLHttpRequest object.

JSONP usage <script> Tags are replaced instead.

Introduction to JSONP

JSONP stands for JSON with Padding.

Requesting a file from another domain may cause problems due to cross-domain policies.

There is no problem with requesting an external script from another domain.

JSONP takes advantage of this feature and uses the script tag instead of the XMLHttpRequest object.

<script src="demo_jsonp.php">

Server file

The file on the server encapsulates the result in the function call:

Example

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

Display the PHP file

The result returns a call to the function named "myFunc", with the JSON data as a parameter.

Make sure that the function exists on the client side.

Functions in JavaScript

The function "myFunc" is located on the client side and is used to process JSON data:

Example

function myFunc(myObj)  {
    document.getElementById("demo").innerHTML = myObj.name;

Try It Yourself

Create dynamic script tag

The previous example executes the "myFunc" function when the page is loaded, which is not very satisfactory depending on where you place the script tag.

The script should only be created when needed:

Example

Create and insert <script> tag when the button is clicked:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);

Try It Yourself

Dynamic JSONP Results

The previous example is still static.

Dynamic examples can be created by sending JSON to the PHP file, and then a JSON object is returned based on the information obtained from this php file.

PHP File

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

PHP File Explanation:

  • Convert the request to an object, using the PHP function json_decode().
  • Access the database and fill the array with the requested data.
  • Add an array to the object.
  • Use json_decode() The function converts the array to JSON.
  • Encapsulate the returned object with "myFunc()".

JavaScript Examples

The "myFunc" function will be called from the php file:

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x="  + JSON.stringify(obj);
    document.body.appendChild(s);
 
function myFunc(myObj)  {
    var x, txt = "";
    for (x in myObj)  {
        txt += myObj[x].name + "<br>";
     
    document.getElementById("demo").innerHTML = txt;

Try It Yourself

Callback Function

What if you cannot control the server file? How can you make the server file call the correct function?

Sometimes the server file provides a callback function as a parameter:

Example

The PHP file will call the function you pass as a callback parameter:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);

Try It Yourself