JSONP

Posted 认认真真,知难而进。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSONP相关的知识,希望对你有一定的参考价值。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn1">请求</button>
    <!-- <script>
    function test(data) {
        alert(data.name);
    }
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=test"></script> -->
    <script>
    function addScriptTag(src) {
        var script = document.createElement("script");
        script.setAttribute(‘type‘, ‘text/javascript‘);
        script.src = src;
        document.body.appendChild(script);
    }
    var oBtn = document.querySelector("#btn1");
    oBtn.onclick = function() {
        addScriptTag("http://127.0.0.1:8080/jsonp?callback=hello")
    };
    function hello(data) {
        console.log(data);
    }
    </script>
</body>
</html>

server.js

var http = require(‘http‘);
var url = require(‘url‘);

var querystring = require(‘querystring‘);

var server = http.createServer();

server.on(‘request‘, function (req, res) {
    var urlPath = url.parse(req.url).pathname;
    var qs = querystring.parse(req.url.split(‘?‘)[1]);
    // http://localhost:8080/jsonp?callback=test // { callback: ‘test‘ }
    if (urlPath === "/jsonp" && qs.callback) {
        res.writeHead(200, {
            ‘Content-Type‘: ‘text/plain;charset=utf-8‘
        });
        var data = {
            "name": "Monkey"
        };
        data = JSON.stringify(data);

        var callback = qs.callback + ‘(‘ + data + ‘);‘;

        res.end(callback);
    } else {
        res.writeHead(200, {
            ‘Content-Type‘: ‘text/html;charset=utf-8‘
        });
        res.end(‘Hello World\n‘);
    }
});

server.listen(‘8080‘);

  

以上是关于JSONP的主要内容,如果未能解决你的问题,请参考以下文章

JSONP原理及代码简单实现

如何发出 jsonp 请求

跨域解决方案 - JSONP

JSONP 和反对这个

JSONP回调不起作用

JSONP