Ajax requests use jsonp for cross-origin, ajax requests jsonp

Ajax requests use jsonp for cross-origin, ajax requests jsonp

Cross-origin:Javascript has a single-source restriction. In short, different sources cannot interact with each other. so how to calculate the source is different? For example, if you access the server through A browser, you can only access the resources of server A (with the same domain name and port, in addition, the domain name and the corresponding ip address are not the same, either both domain names or ip addresses ).

The above is the cross-origin issue of js, but here we need to note that server A has no cross-origin issue. This problem only exists in js, that is: in js --> server A ---> Cross-origin resource in page A, this path is OK. this path is unavailable only for js ---> Cross-origin resources in page.

Let's talk about the jsonp in the solution. This is not a format, but a solution.

Jsonp principle:Although JavaScript has the same-source restriction, this restriction is not imposed when JavaScript files are introduced, that is:

<script type="text/javascript" src="xxx/xxxx.js"></script>

When the src attribute is introduced into the js file, there is no same-source restriction. In this case, external resources can be introduced. the principle of jsonp is here. By dynamically creating more than one line of js import statements, it uses its src attribute to access out-of-domain resources. the external resource server can return a string that can be parsed as a js statement, as shown in the following figure:

callback({"key":"value",...})  

Among them, callback is the name that needs to be specified in advance. The green part is to return to the json string, and then splice it into the above form to return directly. in this way, after js receives the concatenated string from the server, it will directly execute the local js method named callback, Which is why callback needs to be agreed in advance, make sure that this js method exists on the page side. The parameter passed in by this method is the return value on the server side.

Ajax supports jsonp, so the above troubles will be done for us, written as follows:

$.ajax({          type: 'GET',          url: "http://127.0.0.1:8080/xxx/xxx",          async: false,          dataType: "jsonp",          jsonp: "callback",          success: function(result){              .....          },          timeout:3000      });

The red text marks the call using the jsonp method. In fact, this is not a get request in the traditional sense. The actual implementation method is what we mentioned above. the callback in the red part is the part that we want to communicate with the server. This request is sent to the server, in fact:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

The server must use callback (similar to request. getParameter ("callback"), that is, take the automatically generated values such as jqueryxxxx. This value is actually the success callback method in the ajax method in which the request is sent, if the server returns

jqueryxxxx({"ret":"ok"})

The success method is automatically executed on the page, and {"ret": "OK"} is passed to the result parameter of the success method.

The above is the process of implementing cross-origin access through jsonp through ajax. We can see that no additional operations are needed, and all of them are encapsulated.