zoukankan      html  css  js  c++  java
  • jsonp 解决跨域传输

    JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)

    背景: 自己的网站简称A要使用B网站提供的json数据。首先想到的是在A网站的javascript代码里通过Ajax异步请求B网站获取json数据,但是浏览器会禁止这种做法,因为A和B是不同域的。

    解决办法:浏览器允许调用不同域的javascript代码文件.<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行

    A网站

    <script type="text/javascript">
        function addScriptTag(src){
            var script = document.createElement('script');
            script.setAttribute("type","text/javascript");
            script.src = src;
            document.body.appendChild(script);
        }
        window.onload = function(){
            //调用远程服务
            addScriptTag("http://localhost:20002/MyService.ashx?callback=person");
        }
        //回调函数person
        function person(data) {
            alert(data.name + " is a " + data.sex);
        }
    </script>

    B网站  http://localhost:20002/MyService.ashx?callback=person  可以返回json数据

    jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码,改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参,所以只写了getJSON(url,[callback])):

    复制代码

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
    alert(data.name + " is a a" + data.sex);
    });
    </script>
  • 相关阅读:
    CSS同时选择器
    create-react-app之proxy
    mysql limit语句
    给tbody加垂直滚动条的具体思路
    MySql数据类型范围
    block、inline、inline-block
    javascript sourcemap
    session of express
    React中innerHTML的坑
    box-sizing
  • 原文地址:https://www.cnblogs.com/StudyLife/p/3518186.html
Copyright © 2011-2022 走看看