Jsonp How does the cross-domain and front-end code work together?

JSONP (json with Padding)(JSON data fill )

is a "usage pattern" of JSON that can be used to address cross-domain data access issues in mainstream browsers.

cross-domain generation is due to the browser's same-origin policy . (For security)

Different sources:

1. Protocol differs: HTTP and HTTPS

2. main domain different www.domain001.com and www.domain002.com

3. Port number differs http://localhost:8088 and http://localhost:9000.

JSONP principle is: Non-homologous sites can call each other <script src= "http://www.oop.im/data.php?callback= jquery33107585929035461674_1530774352156&_=1530774352157"></script>

The SRC attribute contains resources that are not affected by the same-origin policy and have cross-domain capabilities.

Front-End Code:

$ (function () {$.ajax ({url: ' http://www.oop.im/data.php ', type: ' GET ', DataType: ' Jsonp ', Jsonp: ' Callback ', success: Function (res) {Console.log (res);});})

　　Note: 1.dataType: the "JSONP" DataType property must be set correctly "Jsonp".

2.JSONP: The attribute needs to be set with the parameters of the background contract, if not set by default is also callback. When set to other parameters such as Jsonwrap, the Request URL link will become: http://www.oop.im/data.php? Jsonwrap =jquery3310687844059098403_1530775709409&_=153077570

The Blue callback is JSONP: "Callback", set, the keyword can also be agreed with the background into other strings (such as Showjson).

The red string is a randomly generated string of jquery, and the background wraps the data as a parameter in the random string function as an argument to the foreground.

Background code:

$data = Json_encode (' msg ' = ' cross-domain test ', ' status ' =>true); Echo $_get[' callback ']. ' ('. $data. ') ';

　　

Background PHP obtains the random string in the red box through the $_get ("callback") global function, and returns the string as the function name of the package data to the foreground.

Jsonp How does the cross-domain and front-end code work together?