web跨域请求——JSONP

最新推荐文章于 2020-11-20 09:23:31 发布

Flora1108

最新推荐文章于 2020-11-20 09:23:31 发布

阅读量272

点赞数 1

分类专栏： Head First HTML5笔记文章标签： jsonp web

本文链接：https://blog.youkuaiyun.com/weixin_39480464/article/details/78720077

版权

Head First HTML5笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了web跨域请求时遇到的问题及其解决方案——JSONP。通过使用<script>标签，JSONP绕过同源策略，将JSON数据包装在函数调用中返回，从而实现数据的获取。在JSONP过程中，浏览器向服务器发送请求，服务器返回包装后的JSON数据，这个数据会被预定义的回调函数执行。需要注意的是，JSONP的安全性较低，可能会执行恶意代码，因此选择可信的web服务非常重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mighty Gumball(JSON)</title>
        <script src="gumball.js"></script>

    </head>
    <body>
        <h1>Migthy Gumball Sales</h1>
        <div id="sales">

        </div>
        <script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
    </body>
</html>

javascript代码：

window.onload = function(){

}
function updateSales(sales){
    var salesDiv = document.getElementById("sales");
    for (var i = 0;i<sales.length;i++) {
        var sale = sales[i];
        var div = document.createElement("div");
        div.setAttribute("class","saleItem");
        div.innerHTML = sale.name+" sold "+sale.sales+" gumballs";
        salesDiv.appendChild(div);
    }
}