Cross-domain Request data Solution Grooming

Transferred from: http://www.cnblogs.com/xyang/archive/2012/05/18/2507845.html

The solution for cross-domain request data solution is as follows:

1. Jsonp Way
2. Form Post mode
3. Server Proxy
4. HTML5 's Xdomainrequest
5. Flash Request

Separate description:

First, JSONP:

Intuitive understanding of:

is to dynamically register a function on the client

function A (data), and then to the server, the server returns a ({/*json*/}) to the client to run, which invokes the client's

function A (data), which enables cross-domain.

Detailed understanding of the technology thanks to the blogger's wonderful explanation, the original address:

Http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

Background of birth:

1, Ajax directly request ordinary files There is no cross-domain access to the problem, no matter is static pages, dynamic Web pages, Web services, WCF, as long as the cross-domain request, not all.

2, however, the Web page on the call JS file is not affected by this

3, further promotion, we found that all have the SRC attribute tag has cross-domain capabilities, such as:<script><iframe>

4, so, if you want to access data across domains through a pure web-side (ActiveX control, service-side agent, the future of HTML5 websocket, etc.), you can only use the following method: On the remote server to try to put the data into the JS format text, For client invocation and further processing.

5, JSON is a kind of pure character data format, and can chant JS native support.

6. This solution comes out: The Web client invokes a dynamically generated JS format file (typically a JSON suffix) on a cross-domain server in a way that is identical to the calling script.

7, the client in the JSON file after the successful call, also got the required data, the rest is to follow their own needs to deal with.

8 in order to facilitate the use of data by the client, gradually formed an informal transport protocol, called JSONP. One of the key points of the protocol is to allow the user to pass a callback parameter to the server, and then the server returns the data when the callback parameter is used as the function name to wrap the JSON data so that the client can customize its own functions to handle the returned data.

Specific implementation:

No matter jquery or ExtJS, or other support JSONP framework, they do the work behind the scenes are the same, I would like to gradually explain the JSONP in the client implementation:

1. We know that even if the code in the cross-domain JS file (which is, of course, conforms to the Web Scripting Security Policy), the Web page can be executed unconditionally.

The remote server remoteserver.com root directory has a remote.js file code as follows:

Alert (' I am a remote file ');

There is a jsonp.html page code below the local server localserver.com:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
There is no doubt that the page will pop up a prompt form that shows cross-domain invocation success.
2. Now we define a function on the jsonp.html page and then pass in the data in the remote Remote.js to make the call.
The jsonp.html page code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The Remote.js file code is as follows:
Localhandler ({"Result": "I am the data brought by remote JS"});
After running to view the results, the page successfully pops up the prompt window, showing that the local function was successfully cross-domain remote JS call, and also received the data from the remote JS. Happily, the goal of cross-domain remote data acquisition is basically realized, but another problem arises, how can I let remote JS know what the local function it should call called? After all, JSONP service providers have to face a lot of service objects, and these service objects are different local functions? We went on to look down.
3, smart developers are very easy to think, as long as the server provided by the JS script is dynamically generated on the line, so that callers can pass a parameter in the past to tell the service side "I want a call xxx function JS Code, please return to me", so the servers can follow the client's needs to generate JS script and response.
Look at the code for the jsonp.html page:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
This time the code changes relatively large, no longer directly to the remote JS file to write dead, but the code to implement dynamic query, and this is the core part of the JSONP client implementation, the focus of this example is how to complete the JSONP call the whole process.
We see the URL of the call passed a code parameter, tell the server I want to check the CA1998 flight information, and the callback parameter tells the server, my local callback function is called Flighthandler, so please pass the query results into this function to call.
Flighthandler ({    "code": "CA1998",    "price": 1780,    "tickets": 5});
As we can see, a JSON is passed to the Flighthandler function, which describes the basic information of the flight. Run the page, the successful pop-up prompt window, JSONP implementation of the entire process completed successfully!
4, so far, I believe you have been able to understand the JSONP of the client implementation of the principle of it? The rest is how to encapsulate the code to make it easier to interact with the user interface for multiple and repeated calls.
What the? You're using jquery, and you want to know how jquery implements JSONP calls? Well, then I'll give you a good one. jquery uses the JSONP code (we still use the example of the flight information query above, assuming the return JSONP result is the same):
OK, the server is very smart, this is called Flightresult.aspx Page generated a section of this code to provide to jsonp.html (service-side implementation is not demonstrated here, and you choose the language regardless of, in the final analysis is stitching strings):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
Isn't it a little strange? Why didn't I write this flighthandler function this time? And it worked! Haha, this is the credit of jquery, jquery in the processing of JSONP type of Ajax (or can not help to spit groove, although jquery also put Jsonp into Ajax, but in fact, they really are not a thing), Is it cool to automatically generate callback functions for you and take the data out for the Success property method to invoke?
Cross-domain Request data Solution Grooming