JSONP实现

注：后台使用python的tornado框架

jsonp原理是使用script标签请求的文件不被跨域限制，并且返回的数据会被当成js代码执行(弊端是只能发送get请求)

前端代码

<script type="text/javascript">
        function jsonp(data){
            console.log(data);
            console.log(data.you)

        }

    </script>
    <script type="text/javascript" src="http://127.0.0.1:8080/why.js"></script>

tornado服务端

server.py文件

import tornado.ioloop
import tornado.httpserver
# 加载路由urls文件
import urls

port = 8080

# 服务器对象
print("服务器加载。。。")
server = tornado.httpserver.HTTPServer(urls.urls)

server.listen(port)

print("服务器已启动，端口：" + str(port))
tornado.ioloop.IOLoop.current().start()

urls.py文件

class HeadHandles(tornado.web.RequestHandler):
    """docstring for HeadHandles"""
    def get(self) :
        args = self.get_query_argument('key',None)
    strs = "no args"
    if args :
        strs = "you trans is " + args
    print("jsonp接收成功")
    self.finish("jsonp({you:'"+strs+"'})")
        # 路由配置
    urls = tornado.web.Application([
    (r'/', HeadHandles),
    (r'/why\.js', HeadHandles)
    ],static_path = static, debug = True)

结果

进阶

动态生成script标签
###前端代码

    let script = document.createElement("script");
    var args = "传参"    
    script.src = 'http://localhost:8080/why.js?key=' + args;                    
    document.querySelector("body").appendChild(script);

结果

注意此处中文请求依旧会被uri编码

扩展

注意到script标签不会被跨域限制，试想img标签是否会被跨域限制

前端代码

    let img_jsonp = document.createElement('img');
    // 试用img标签跨域
    img_jsonp.src = 'http://localhost:8080/why.js?key=345';
    document.querySelector("body").appendChild(img_jsonp);

服务端

import tornado.web,os
# 此处只有tornado的路由代码，并没有服务启动代码
static = os.path.join(os.path.dirname(__file__),"static")
class HeadHandles(tornado.web.RequestHandler):
    """docstring for HeadHandles"""
    def get(self) :
        self.set_header("Content-Type","pplication/javascript")
        args = self.get_query_argument('key',None)
        strs = "no args"
        if args :
            strs = "you trans is " + args

        print("jsonp接收成功" + args)
        self.finish("jsonp({you:'"+strs+"'})")
urls = tornado.web.Application([
    (r'/', HeadHandles),
    (r'/why\.js', HeadHandles)
    ],static_path = static, debug = True)

结果

结果显示正常的向服务端发送请求，但由于是img标签所有返回的数据不会当成js代码执行