zoukankan      html  css  js  c++  java
  • JSONP

    JSONP,它有个限制,只能用GET请求,并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源:

    <html>
    <head>
        <script src="http://example.com/abc.js"></script>
        ...
    </head>
    <body>
    ...
    </body>
    </html>

    JSONP通常以函数调用的形式返回,例如,返回JavaScript内容如下:

    foo('data');

    这样一来,我们如果在页面中先准备好foo()函数,然后给页面动态加一个<script>节点,相当于动态读取外域的JavaScript资源,最后就等着接收回调了。

    以163的股票查询URL为例,对于URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice,你将得到如下返回:

    refreshPrice({"0000001":{"code": "0000001", ... });

    因此我们需要首先在页面中准备好回调函数:

    function refreshPrice(data) {
        var p = document.getElementById('test-jsonp');
        p.innerHTML = '当前价格:' +
            data['0000001'].name +': ' + 
            data['0000001'].price + ';' +
            data['1399001'].name + ': ' +
            data['1399001'].price;
    }

    //最后用getPrice()函数触发:

    function getPrice() {
        var
            js = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
        js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
        head.appendChild(js);
    }

    就完成了跨域加载数据。

  • 相关阅读:
    web component的理解
    cdn
    const 命令
    let 的含义,及let 与 var 的区别
    选择器
    Qt5:Qt中一些函数功能介绍
    给软件工程师自学的建议
    Qt5:渐变效果的实现
    Wayland软件库 :替代 X Window 的软件库
    Qt5:窗口各类位置
  • 原文地址:https://www.cnblogs.com/dreambin/p/7992131.html
Copyright © 2011-2022 走看看