• jsop之---实现过程


    JSONP(JSONP - JSON with Padding是JSON的一种“使用模式”),利用script标签的src属性(浏览器允许script标签跨域)

    跨域访问,非同源访问

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <p>
            <input type="button" onclick="Jsonp1();"  value='提交'/>
        </p>

        <p>
            <input type="button" onclick="Jsonp2();" value='提交'/>
        </p>
      底层真实的实现过程
        <script type="text/javascript" src="jquery-1.12.4.js"></script>
        <script>
            function Jsonp1(){
                var tag = document.createElement('script');
                tag.src = "http://c2.com:8000/test/";
                document.head.appendChild(tag);
                document.head.removeChild(tag);

            }
      封装后的使用方法
            function Jsonp2(){
                $.ajax({
                    url: "http://c2.com:8000/test/",
                    type: 'GET',
                    dataType: 'JSONP',
                    success: function(data, statusText, xmlHttpRequest){
                        console.log(data);

           jsonp: 'callback',     

          固定用法,加上以下两个参数,url相当于http://127.0.0.1:9000/xiaokai.html?callback=func
                     jsonpCallback: 'func'  指定对方需要返回的函数名是func
                })
            }
            function func(arg) {
                console.log(arg);
            }
        </script>
    </body>
    </html>

    基于JSONP实现跨域Ajax - Demo

  • 相关阅读:
    好的 文章链接汇总
    webpack之postcss集成
    移动端适配方法合集
    每天干的啥?(2017.3)
    每天干的啥?(2017.2)
    【2016年终总结】
    每天干的啥?(2017.1)
    PHP获取接口数据(模拟Get)
    每天干的啥?(2016.12)
    更换域名后的数据库sql的执行命令
  • 原文地址:https://www.cnblogs.com/jinxf/p/9164360.html
Copyright © 2020-2023  润新知