JavaScript, JSON and JSONP

JSON and JSONP

JSONP is a method of sending JSON data without worrying about cross-domain issues. JSONP the XMLHttpRequest object is not used. JSONP using <script> tag instead.
Because cross-domain policy, request a file from another domain can cause problems. This problem did not request an external script from another domain. JSONP use this advantage and use the script tag instead of the XMLHttpRequest object request file.

<script src="demo_jsonp.php">

File server

File on the server package will result in a function call:

<?php
$myJSON = '{"name":"John", "age":30, "city":"New York"}';
echo "myFunc(".$myJSON.");";
?>

The results return a call to a function named "myFunc" of, and JSON data as a parameter. This feature ensures that there is on the client.

JavaScript function

Function named "myFunc" is located on the client, and is ready to deal with JSON data:

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

Create a dynamic script tag

Based on where you place the script tag, the above example will perform "myFunc" function when the page loads, it is not very satisfactory. Should only be created if necessary script tag:
create and insert a <script> tag when you click the button:

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

Dynamic JSONP results

The above example is still very static. By sending JSON php file to make the example dynamic and allow return JSON php file object based on the acquired information.
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 document explains:
Use of json_decode PHP function () converts the request into an object.
Access to the database, and populates the array with data requests.
Adding to the array of objects.
Use json_encode () function to convert an array JSON.
The returned object wrapped around "myFunc ()"

JavaScript example:

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 + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

Online experience

Callback

When you can not control the file server, file server how to call the correct function? Sometimes a file server provides the callback function as a parameter:
PHP file to call the function that you pass as a callback parameter:
PHP file:

<?php
$callback = trim($_GET('callback'));
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo $callback."(".$myJSON.");";
?>

javascript :

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

More JSON description