Sunday, July 7, 2013

JSONP Tutorial

This is an advanced tutorial with working example you must know jQuery and JSONP foundations. JSONP bypass browser's "same origin" policy.


json.php is in webroot folder serve data to anyone.
file:json.php
<?php
header('Content-type: application/json;charset=UTF-8');
header('Access-Control-Allow-Origin: *');
$n = 'mike';
$ln = 'larson';
$out = array( 'name'=>$n, 'lastname'=>$ln );
echo "callNow(".json_encode($out).")";
?>
file:index.html:
<!DOCTYPE HTML>
<head>
    <title>Working with JSONP</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function(){
     $.ajax(
        {
           type: "GET",
           dataType: "jsonp",
           url: "http://maxh.heliohost.org/json.php?callback=callNow",
        } );
 });
    function callNow(data){ 
          alert(data.name + " " + data.lastname); 
    }
    </script>
</head>

<body>

</body>
</html>
This way anyone can consume data from your server as shown in index.html.

No comments:

Post a Comment