Cross-origin AJAX request Solution

Same-origin policy: http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

In the AJAX application environment, the browser does not allow the XMLHttpRequest component to request cross-origin resources for security reasons. In many cases, this restriction has caused me a lot of inconvenience. Many colleagues have studied various solutions:

1. modify document. domain and the hidden IFrame to implement cross-origin requests. This scheme may be the simplest method of cross-origin requests, but it is also the most restrictive solution. First, it can only implement cross-origin requests under the same top-level domain name. In addition, when another IFrame is contained in a page, security exceptions may occur and access is denied.
2. By requesting the proxy of the current domain, the server proxy can access resources of another domain. XMLHttpRequest requests a server resource in the domain and provides the target resource to be accessed to the server. The server then acts as a proxy to access the target resource. This scheme can achieve full cross-origin access, but the consumption of the request process will be relatively large during development.

3. You can request cross-origin resource tag reference in HTML, such as Image, Script, and LINK tags. Among these tags, Script is undoubtedly the most suitable. When requesting every script resource, the browser will parse and run the functions defined in the script file, or JavaScript code that needs to be executed immediately. We can return a script or JSON object through the server, execute the parsing in the browser to achieve the purpose of cross-origin requests. Use the script tag to implement cross-origin requests. You can only use the get method to request server resources.

This method is also called ajaj or ajax without xmlHttprequest. It replaces x with j Because xml and xmlHttprequest are not used when the <script> tag is used.

I have seen many people reluctant to face up to the technical bottlenecks of ajax. In fact, AJAX should be more Ajax than AJAX, highlight the first A is to emphasize that AJAX is actually A method of asynchronous transmission, rather than the specific technology used in the end.

4. jsonp

Analysis of various solutions
The first solution requires the same root domain name, such as a .domain.com and B .domain.com.
The second solution is to request cross-origin content through WebClient (or other) classes on the server side. Note that, if you want to include cookies in WebClient requests, You need to manually add Cookies to WebClient.
The third solution is related to the JSONP that we need to talk about below.

The full name of JSONP is "JSON with padding", which uses the script tag to allow cross-origin requests. In short, JSONP is the function name that the client will use to process the request results as a parameter and pass it to the server, however, the server wraps the request result data in this function as a parameter and returns it to the client for execution.

Fourth: tags such as Image, Script, and LINK

Solution 3 Example
The Application of JSONP to implement Json data cross-origin calling requires the cooperation between the server and the client.
Client:
$. GetJSON ("http://api.flickr.com/services/feeds/photos_public.gne? Tags = cat & tagmode = any & format = json & jsoncallback =? ", Function (data) {$. each (data. items, function (I, item) {$ (" "). attr ("src", item. media. m ). appendTo ("# images"); if (I = 3) return false ;});});
Note that jsoncallback =? Is the key! The symbol is automatically replaced by the name of another callback method by Query. We will ignore the specific process and principle here. What we care about is jsoncallback =? What role does it play? Originally, jsoncallback =? After the method is replaced, the method name is passed to the server.
What do we do on the server? The server must accept the jsoncallback parameter, and then return the value of jsoncallback to the server as the JSON data method name (for example, the server is JSP)
...
String jsoncallback = request. getParameter ("jsoncallback ");
...
Out. print (jsoncallback + "({\" account \ ": \" XX \ ", \" passed \ ": \" true \ ", \" error \": \ "null \"})");

The data obtained by Jquery may be as follows:
JQUET0988788 ({"account": "XX", "passed": "true", "error": "null "})
Then you can directly parse the object on the client. Here we will not talk about how to parse objects through scripts.