Is JSONP a gadget? Solve cross domain problems?

Browser homology policy

Restrict js from sending requests to other domain names, and the browser debugging error is as follows

 

 

 

JSONP is a solution

The browser does not block requests from tags with src attributes. So you can send a request using < script src = "xxxxx" > < / script >

However: the returned data (string) needs to conform to the syntax of js. The server side is specially supported. For example, return functionName(arg...)

This scheme is called JSONP

For example, the interface of a TV station to query the latest program list is supported:

http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
Interface return string: list({data:[xxxx...]})
This string can be parsed into executable actions when it is put into js, and the parameters contain the data that the server wants to provide to the client. As long as the front-end has the js function list, it can process the obtained data by itself

Example: create < scrript SRC = '' > < / script > tag for normal js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-2.2.3.min.js"></script>
</head>
<body>
    <h1>Get results from background</h1>
    {{ result }}
    <h1>front end js Direct to other domain names get request</h1>
    <input type="button" value="Click launch js request" onclick="getContent();"/>
    <div id="container"></div>
</body>
    <script>
        function getContent(){
            //////////Ordinary on js p////////////////
            // utilize js Send a request to the query weather interface, and the returned by the interface is js Function string and pass parameters in the function
            // The browser will not block the src Attribute label get Request, so as to realize cross domain request
            let tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);
            // After adding an element to the browser, it contains src Properties are sent immediately get Request to target site
            // The returned data is qualified js Syntax functions: such as list({data:[({data:xxx,,,,,,,)own js This function must be created in advance to obtain data for corresponding processing
            // After the tag is added and the data is obtained, the tag can be deleted immediately
            document.head.removeChild(tag);
        }
        // Create support jsonp Function returned by the interface of
        function list(arg) {
            console.log(arg)
        }

    </script>
</html>

Click the button to send a request to view the obtained data

 

 

 

ajax initiates cross domain requests

Parameter Description:

dataType: 'jsonp', / / data type
jsonp:'callback', / / indicates the query parameter name passed to the backend url when sending the request
jsonpCallback: 'list' / / indicates the value corresponding to the query parameter name passed to the backend url when the request is sent
//The combination of the values of jsonp and jsonpCallback in the url is equivalent to adding? callback=list
The actual url of the last request is similar to: http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1596885252309
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-2.2.3.min.js"></script>
</head>
<body>
    <h1>Get results from background</h1>
    {{ result }}
    <h1>front end js Direct to other domain names get request</h1>
    <input type="button" value="Click launch js request" onclick="getContent();"/>
    <div id="container"></div>
</body>
    <script>
        function getContent(){

            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
                type:'POST',
                dataType: 'jsonp',
                jsonp:'callback',   // Indicates that the request is sent to the back end url Query parameter name in
                jsonpCallback: 'list' // Indicates that the request is sent to the back end url The value corresponding to the query parameter name in
                // jsonp and jsonpCallback The values of are combined in url Equivalent to in url Added in?callback=list
            })
        }
        // Create support jsonp Function returned by the interface of
        function list(arg) {
            console.log(arg)
        }

    </script>
</html>

 

Posted by satanclaus on Wed, 25 May 2022 11:07:00 +0300