jsop之---实现过程

最新推荐文章于 2022-04-24 01:56:00 发布

weixin_30933531

最新推荐文章于 2022-04-24 01:56:00 发布

阅读量123

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/jinxf/p/9164360.html

版权

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" οnclick="Jsonp1();" value='提交'/>
    </p>

    <p>
        <input type="button" οnclick="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

转载于:https://www.cnblogs.com/jinxf/p/9164360.html

weixin_30933531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsop之---实现过程

JSONP（JSONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域）跨域访问，非同源访问<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>&l...
复制链接

扫一扫