This article mainly introduces jquery to solve the problem of cross-origin access on the client. ajax () supports cross-origin in get mode, which is implemented in jsonp mode. if you need a friend, refer to "cross-origin access" on the client, which has always been a headache, fortunately there is jQuery help, from the jQuery-1.2 after the cross-domain 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:
The 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:
The 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.