jquery solves client cross-domain access problem_jquery

Client-side "cross-domain access" has always been a headache. Fortunately, with the help of jQuery, cross-domain problems have been solved since jQuery-1.2. Since I encountered cross-domain problems in the project, I took this opportunity to inquire into the cross-domain issues, consulted relevant information and my own practice, and finally solved the cross-domain problems. Record it for reference.

jQuery.ajax() supports cross-domain get methods, which is actually done using jsonp.

Real case:

Copy code The code is as follows:

$.ajax({
async:false,
​​​​​​ url: 'http://www.mysite.com/demo.do', // Cross-domain URL
            type: 'GET',
DataType: 'jsonp',
               jsonp: 'jsoncallback', //Default callback
data: mydata,
Timeout: 5000,
                beforeSend: function(){ //This method is not triggered in jsonp mode. The reason may be that if dataType is specified as jsonp, it is no longer an ajax event
            },
Success: Function (JSON) {// Client JQuery's pre -defined Callback function. After successfully obtaining JSON data on cross -domain servers, this callback function
If(json.actionErrors.length!=0){
alert(json.actionErrors);
                                                                                                                           genDynamicContent(qsData,type,json);
             },
complete: function(XMLHttpRequest, textStatus){
                        $.unblockUI({ fadeOut: 10 });
             },
​​​​​​ error: function(xhr){
                                                                                                                                                 out out out out out out wanting out being out out over through out over over being over so so so so so so so so so so so so so so to so so so so so so so so so so so so so so so so so so so to so so so so so so so so to to to to to to to to to to to toto To to to to to to to to to to to to to to to to To To to To to to To to toss with with this method with this method method method method method method to method method to method method not to trigger
//Request error handling
alert("Request error (please check the relevant network status.)");
               }
        });

Note:

Copy code The code is as follows:

$.getJSON("
http://www.mysite.com/demo.do?name1=" value1 "&callback=?",               function(json){
If(json.property name==value){
//Execute code
                                                                                                               });

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

On the server side, use callback= request.getParameter("callback") to get the jsonp32440980 to be called back later on the jQuery side
Then return something like: "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-domain data exchange.
The most basic principle of jsonp is: dynamically adding one is consistent (qq space uses this method to achieve cross-domain data exchange). JSONP is a kind of script injection (Script Injection) behavior, so it also has certain security risks.

Note: jquey does not support post cross-domain.
This is because although the use of post to dynamically generate iframes can achieve the purpose of post cross-domain (this is how a js expert patched jquery1.2.5), this is a relatively extreme method and is not recommended. It can also be said that the cross-domain access method of get is legal, and the post method is considered illegal from a security perspective. It is better not to post as a last resort. The demand for cross-domain access on the client side seems to have attracted the attention of w3c. According to the information, html5 The WebSocket standard supports cross-domain data exchange and should be an optional cross-domain data exchange solution in the future.