Using JavaScript to implement various Cross-domain methods _ basics

First, some concepts

① Traditional ajax: Interactive data format--custom string or XML description;

Cross-domain-Resolved by server-side proxy.

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

③json: A data Interchange format. Based on plain text, is native JS support.

Format: Two data type descriptors: curly braces {}, square brackets []. Delimiter comma, map character colon, definition double.

④JSONP: A Cross-domain Data interchange protocol, unofficial.

　　1, The Web page calls the JS file, which can be cross-domain. Extensions: Any label with SRC attributes has cross-domain capabilities.

　　2 . Cross-domain server dynamically generate data and save to JS file (usually JSON suffix) for client invocation.

　　3, in order to facilitate the use of data by the client, the formation of an informal transport protocol, known as JSONP. The focus of this protocol is to allow the user to pass a callback parameter to the server, and then the server returns the data with the callback parameter as the function name wrapped around the JSON data, so that clients can customize their own functions to automatically process the return data.

Second, JSONP implementation

Instance 1--client unilaterally receives:

① Client--Creates a function object on the client setting, named Callfunc, for receiving the server's JS data and processing it.
The core of JS data is that the call to the Callfunc function is accompanied by a parameter, which is the value of the data object.

Copy Code code as follows:

<script type= "Text/javascript" >
var callfunc = function (data) {
Alert (data from the ' Remote JS file: ' + Data.result ');//data is a server-side JSON data object.
};
</script>
<script type= "Text/javascript" src= "http://other domain js files. com/remote.js" ></script>

② server-Directly call the function in the client JS and pass in the data.

Copy Code code as follows:

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

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

Copy Code code as follows:

<script type= "Text/javascript" >
callback function after getting flight information query result
var Flighthandler = function (data) {
Alert (' The result of your enquiry is: Ticket price ' + data.price + ' yuan, ' + ' + ' + data.tickets + ' Zhang. ');
};
Dynamically add script for linked server JS files.
Passing a code parameter in the URL address matches a key,callback parameter in the JSON data tells the server that the local callback function is named Callfuncname.
var url = "Http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";
var script = document.createelement (' script ');
Script.setattribute (' src ', url);
Inserts a SCRIPT element into the head header when the page is loaded
document.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 highly efficient.