Cross-Domain (iii)--JSONP

First, what is JSONP?

Baidu Encyclopedia: JSONP (JSON with Padding) is a "usage pattern" of JSON that can be used to solve the problem of cross-domain data access for mainstream browsers. Because of the same-origin policy, Web pages that are generally located in server1.example.com cannot communicate with servers that are not server1.example.com, while HTML <script> elements are an exception. Using this open strategy of <script>, the Web page can get JSON data that is dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, which executes with a JavaScript interpreter instead of parsing with a JSON parser.

Second, the realization of JSONP is very simple

1. Create a script tag on the front end, set SRC, add to head (or add to body, of course).

2, the background returns a JS variable Jsonp, this JSONP is the JSON data after the request.

3, delete the script tag when the callback is complete (there are some cleanup tasks such as avoiding some browser memory leaks, etc.).

Three Simple code examples

Server-side:

<?PHP$obj=Array(' Chicken ' =>2, ' duck ' =>3);//$ob is the object to be passed$callback=$_get[' Callback '];//gets the passed-in function nameif(!$callback){    $callback= ' Jsoncallback ';//default function name to use if not passed in}//output A JS-formatted code, called with the passed-in function name, parameter for the $obj object to be passedEcho"Alert (' I am a thief, haha ');"$callback.‘ ('. Json_encode ($obj).‘);‘;?>

Client:

<Div>Chicken<spanID= "Chicken"></span>only<BR/>Duck<spanID= "Duck"></span>only</Div><Scripttype= "Text/javascript">//callback function DefinitionfunctionMycallback (obj) {//output The USN property of the object passed overdocument.getElementById ('Chicken'). InnerHTML=Obj.chicken; document.getElementById ('Duck'). InnerHTML=Obj.duck;}; Window.onload=function(){  //Create a script tag  varScript=Document.createelement ("Script"); //Set URLscript.src="Http://127.0.0.1:8081//langtao/steal.php?callback=alert (' I am a Robber '); Mycallback"; //put the tag in the document to take effectdocument.body.appendChild (script); Document.body.removeChild (script);};</Script><!--<script>$.ajax ({dataType: ' Jsonp ', data: ' Id=1 ', Jsonp: ' Callback ', url: ' http://127.0.0.1:8081//langtao/    Steal.php ', success:function (obj) {document.getElementById (' chicken '). Innerhtml=obj.chicken; document.getElementById (' duck '). Innerhtml=obj.duck;},;</script> -<!--<script>$.getjson ("http://127.0.0.1:8081//langtao/steal.php?callback=?", function (obj) {    document.getElementById (' chicken '). Innerhtml=obj.chicken;  document.getElementById (' duck '). Innerhtml=obj.duck; });</script> -

Iv. Security Issues

Jsonp Although easy to implement, but there will be some security risks, if the third party script arbitrary execution, then it can tamper with the page content, interception of sensitive data. But Jsonp is the right choice for passing data on both sides of a trusted side.

Cross-Domain (iii)--JSONP