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

Source: Internet
Author: User
Tags call back

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.