Jquery solves the problem of Client Cross-origin access, and jquery Client Cross-Origin

Jquery solves the problem of Client Cross-origin access, and jquery Client Cross-Origin

Client "cross-origin access" has been a headache, fortunately there is jQuery help, from the jQuery-1.2 after the cross-origin problem will be solved. I encountered a cross-origin problem in the project. I took this opportunity to give a thorough understanding of the Cross-origin problem and read the relevant materials and my own practices. This solved the cross-origin problem. Record it for reference.

JQuery. ajax () supports cross-origin in get mode, which is implemented in jsonp mode.

Real case:

Copy codeThe Code is as follows:
$. Ajax ({
Async: false,
Url: 'http: // www.mysite.com/demo.do', // cross-origin URL
Type: 'get ',
DataType: 'jsonp ',
Jsonp: 'jsoncallback', // default callback
Data: mydata,
Timeout: 5000,
BeforeSend: function () {// jsonp mode this method is not triggered. The reason may be that if dataType is specified as jsonp, it is no longer an ajax event.
},
Success: function (json) {// call back function pre-defined by jquery on the client. After obtaining json data on the Cross-origin server, the callback function is dynamically executed.
If (json. actionErrors. length! = 0 ){
Alert (json. actionErrors );
}
GenDynamicContent (qsData, type, json );
},
Complete: function (XMLHttpRequest, textStatus ){
$. UnblockUI ({fadeOut: 10 });
},
Error: function (xhr ){
// Jsonp mode. This method is not triggered.
// Handle request errors
Alert ("request error (Check related network conditions .)");
}
});

Note:

Copy codeThe Code is as follows:
$. GetJSON ("http://www.mysite.com/demo.do? Name1 = "+ value1 +" & callback =? ",
Function (json ){
If (json. attribute name = value ){
// Execute the code
}
});

This method is actually an advanced encapsulation of the $. ajax ({...}) api in the previous example. Some underlying parameters of $. ajax APIs are encapsulated and invisible.

On the server side, Use callback = request. getParameter ("callback") to obtain the jsonp32440980 to be called back by the jQuery end.
Then return the following code: "jsonp32440980 (" + json array to be returned + ")";
Jquery will dynamically load and call this through the callback method: jsonp32440980 (json array );
This achieves the purpose of cross-Origin data exchange.
The most basic principle of jsonp is to dynamically Add a consistent one (QQ space is a large number of cross-Origin data exchanges using this method ). JSONP is a Script Injection action, so it also has certain security risks.

Note: jquey does not support cross-origin post.
This is because, although the use of post + dynamic iframe can achieve the purpose of post cross-origin (there is a js cool who just put jquery1.2.5 in this way), this is an extreme way to do so, it is not recommended. It can also be said that the cross-origin of the get method is legal, and the post method is considered illegal from the security point of view, the demand for cross-origin access on the client side also attracted w3c's attention. It is said that the html5 WebSocket standard supports cross-Origin data exchange and should also be an optional cross-Origin data exchange solution in the future.