jsonp原理与实验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jsonp跨域请求</title>
    </head>
    <body>
        <input type="button" onclick="jsonpRequest();" value="跨域请求"/>
        <script>
            tag=null;
            function jsonpRequest(){
                tag=document.createElement(‘script‘);//动态的创建script标签,再添加src属性,src可以实现跨域请求。
                tag.src="http://..."//list([11,22,33,44]),返回值会调用该函数;
                document.head.appendChild(tag);
                
            }
            function list(arg){
                console.log(arg);
                document.head.remove(tag);//动态删除标签
            }
        </script>
    </body>
</html>

1,jsonp的原理:动态的创建script标签,通过该标签的src属性实现跨域操作。操作完后,会自动的删除刚刚动态创建的标签。

jsonp原理与实验

上一篇:js+canvas实现任意数字、字符生成图形验证码,根据后端接口返回的数据,生成图形验证码


下一篇:子页面iframe跨域执行父页面定义的JS方法