JSONP cross-domain processing (demo code included)

Jsonp,ajax Cross-domain requests

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/6E/CB/wKioL1WIwJfRND4NAAI_j8DDv9A930.jpg "title=" QQ picture 20150623100411.png "alt=" Wkiol1wiwjfrnd4naai_j8ddv9a930.jpg "/>

1, a well-known problem, Ajax directly request ordinary file There is no access to cross-domain issues, no matter you are static pages, dynamic Web pages, Web services, WCF, as long as the cross-domain requests, are not allowed;

2, but we also found that the Web page when the JS file is not affected by whether or not cross-domain impact (not only that, we also found that the "src" attribute of the label has the ability to cross-domain, such as <script>, , <iframe >);

3, so can judge, the current stage if you want to through the pure Web side (ActiveX control, Server Agent, belongs to the future of HTML5 WebSocket, etc.) access to data across domains is only one possibility, that is, on the remote server to try to load the data into the JS format of the file, For client invocation and further processing;

4, it happens that we already know that there is a kind of pure character data format called JSON can be concise description of complex data, even better is the JSON is also supported by JS native, so in the client can almost arbitrary processing of this format of data;

5, such a solution is to be seen, the Web client by the same way as the call script to invoke the cross-domain server dynamically generated JS format files (usually JSON suffix), it is obvious that the server to dynamically generate JSON files, The goal is to load the data that the client needs.

6, the client in the JSON file after the successful call, but also to obtain their own required data, the rest is to do their own needs to deal with and show that the way to get remote data looks very much like Ajax, but in fact, it is not the same.

7, in order to facilitate the use of data by the client, gradually formed an informal transport protocol, people call it Jsonp, one of the main points of the protocol is to allow users to pass a callback parameter to the server, The callback parameter is then used as the function name to wrap the JSON data when the server returns data, so that the client can customize its own function to automatically process the returned data.

The JSONP cross-domain implementation code is as follows:

Customer Service side:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/CE/wKiom1WIvzey7w83AAK3IYtbOuw259.jpg "title=" 2.png " alt= "Wkiom1wivzey7w83aak3iytbouw259.jpg"/>

Service side:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/CB/wKioL1WIwQnxVNKoAADozKXYfoI685.jpg "title=" 3.png " alt= "Wkiol1wiwqnxvnkoaadozkxyfoi685.jpg"/>

Operation Result:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/CB/wKioL1WIwSmxdMDtAAEDfY5KAVA387.jpg "title=" 1.png " alt= "Wkiol1wiwsmxdmdtaaedfy5kava387.jpg"/>

Demo Code:

http://down.51cto.com/data/2062572

This article is from "Phper Xuchen-Focus on PHP Technology" blog, be sure to keep this source http://xuqin.blog.51cto.com/5183168/1664295

JSONP cross-domain processing (demo code included)