JSONP--cross-domain Data interaction Protocol

First, the concept

① Tradition Ajax : Interactive Data format--custom string or XML description;

Cross-domain-addressed through a server-side proxy.

② today's best practices: Use JSON format to transfer data and use JSONP to cross domains.

③json: a data Interchange format. based on plain text, native JS support.

Format: Two data type descriptors: curly braces {}, brackets []. The delimiter comma, the identifier colon, and the definition are double-cited.

④jsonp: a cross-domain data interaction protocol, unofficial.

1, Web page call JS file, can cross the domain. Extension: Any label with the SRC attribute has cross-domain capability.

2. The cross-domain server dynamically generates data and stores the JS file (usually the JSON suffix) for the client to invoke.

3, in order to facilitate the use of data by the client, form an informal transport protocol, called JSONP. This protocol focuses on allowing the user to pass a callback parameter to the server, and then the server returns data when the callback parameter is wrapped around the JSON data as a function name, allowing the client to customize its own functions to automatically process the returned data.

Second, the realization of JSONP

Example 1--client receives unilaterally:

① Client--Creates a function object in the client settings, the name can be Callfunc, to receive the server's JS data and to process it.
The core of the JS data is that the call to the Callfunc function is accompanied by the parameter, which is the value of the data object.

< type = "Text/javascript" >    var function (data) {        alert (' Data from remote JS file: ' + Data.result '); //data is the server-side JSON data object.     }; </ Script > <  type= "Text/javascript"  src= "http://JS file for other domains. Com/remote.js"  ></script>

② server--directly invokes the function in the client JS and passes in the data.

Callfunc ({"Result": "value1"});

Instance 2--The client transmits the specified function name to the server, the server side receives the function name and calls the corresponding function to pass the data in as a parameter.

<script type= "Text/javascript" >    //callback function After getting the flight information query result    varFlighthandler =function(data) {alert (The result of your enquiry is: Fare ' + Data.price + ' yuan, ' + ' + ' + data.tickets + ' Zhang. ‘);    }; //script that dynamically adds a linked server JS file.
A code parameter is passed in the URL address that matches one of the key,callback parameters in the JSON data tells the server that the local callback function is named Callfuncname.     varurl = "Http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";    varScript = document.createelement (' script '); Script.setattribute (' SRC ', URL); //inserting a SCRIPT element into the head header when the page is loadeddocument.getElementsByTagName (' head ') [0].appendchild (script); </script>

Summary: The implementation of the code is not complex, but in the implementation of Ajax cross-domain, Frameset/iframe cross-domain, etc. is very efficient.

Source: http://www.cnblogs.com/slowsoul/archive/2013/02/14/2910661.html

JSONP--cross-domain Data interaction Protocol