Understanding JSONP cross-domain requests (code example)

The content of this article is about the understanding of JSONP cross-domain requests (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have always had little knowledge about JSONP. Today I used the weekend to sort out

Wikipedia’s explanation:

JSONP (JSON with Padding or JSON-P[ 1]) is a javascript pattern to request data by loading a <script> tag. It was proposed by Bob Ippolito in 2005.[2] JSONP enables sharing of data bypassing same-origin policy. The policy disallows running JavaScript to read media DOM elements or XHR data fetched from outside the page's origin. aggregation of the site's scheme, port number and host name identifies as its origin.</script>

My understanding is:

1. The front-end writes its own function, uses the script tag to send the get request and brings the function name
2. The server-side receives the request Then get the query when the front end sends the request, add your own data and return it.
3. The content returned by the front end is actually the data object of its own function call actual parameter.

• It doesn’t matter if the explanation is a bit confusing, just speak with chestnuts.

Front-end code

nbsp;html>


    <title>Document</title>


<script>
    //编写调用函数
    function getremotedata(data) {
        console.log(data);
    }
</script>
<!--用script标签get方法把数据请求发送到后端-->
<script></script>

Back-end code

//用node编写一个简单的服务器
const http = require('http');
const urlModule = require('url');
const server = http.createServer();
server.on('request', function (req, res) {
    //urlModule.parse(req.url.url)的请求 就是这个对象
    // {
    //   protocol: null,
    //   slashes: null,
    //   auth: null,
    //   host: null,
    //   port: null,
    //   hostname: null,
    //   hash: null,
    //   search: '?callback=getremotedata',
    //   query: 'callback=getremotedata',
    //   pathname: '/',
    //   path: '/?callback=getremotedata',
    //   href: '/?callback=getremotedata' }
    // 对象结构赋值得到query是一个对象
    const {pathname: url, query} = urlModule.parse(req.url, true)
    if (url === '/') {
        var data = {
            name: '大毛',
            age: 18,
            gender: '未知'
        };
        // 解析query的请求得到前端发送的函数名称，加上括号调用此函数，函数里加实参servedata返回
        var scripteStr = `${query.callback}(${JSON.stringify(data)})`
        console.log(scripteStr)
        res.end(scripteStr)
    } else {
        res.end('404')
    }
});
server.listen('3999', function () {
    console.log('server is running 3999')
})

In this way, when the front-end sends a request, no matter what the callback is, the back-end will return the callback plus data data. Cross-domain requests are implemented.

The first thing I wrote was that the language was a bit unclear. You can understand it by typing the code yourself

Self-taught front-end for 3 months and want to find a basic front-end job

The above is the detailed content of Understanding JSONP cross-domain requests (code example). For more information, please follow other related articles on the PHP Chinese website!