• 33、JSONP跨域


    跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域。很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域

    JSONP原理就是:将函数执行的部分,放到了服务器上面。

    JSONP的优缺点:

    优点:

    与利用XHR对象发送Ajax请求不同,JSONP可以跨越同源策略;
    JSONP的兼容性好,可以在众多浏览器中运行。

    缺点:

    只支持GET一种类型的HTTP请求,应用场景有限;
    调用失败时缺少必要的提示信息,不方便排查问题;
    存在一定的安全风险,但可以使用Referer和Token校验进行规避;
    不便于控制;
    没有回调函数的功能。

    原生JSONP跨越请求数据

    如果想获取别人服务器上的JSONP数据,你必须声明一个和别人服务器上的同名函数(也可以改名)

            <div id='btn'>
    		按钮
    	</div>
    
            <script type="text/javascript">
                // 封装成方法
    	     var btn = document.getElementById("btn");
    
    	     function JSONP(url, callback){
    	        //给传进来的匿名函数起名,并定义在全局,window.回调函数名
    	        window.jQuery1102018240398381236766_1558663885975 = callback;
    	        //创建DOM
    	        var oscript = document.createElement('script');
    	        oscript.src = url;
    	        //上树
    	        document.body.appendChild(oscript);
    	        //过河拆桥,拿完下树
    	        document.body.removeChild(oscript);
    	     }
    
    	     //发起请求
    	     btn.onclick = function(){
    	        JSONP("https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=jQuery1102018240398381236766_1558663885975&_=1558663885984", function(data){
    	            console.log(data);  //data数据是从函数执行部分传过来的
    	        })
    	     }
    	</script>
    

    jQuery的JSONP跨域

    jQuery对JSONP进行了封装,jsonCallback就是传进去的函数名字

            <div id='btn2'>
    		按钮2
    	</div>
            <script>
    	// jquery 的jsonp
    		var btn2 = document.getElementById("btn2");
    		btn2.onclick = function(){
    			$.ajax({
    			   url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=?&_=1558663885984",
    			   dataType:"jsonp",
    			   // jsonpCallback:"jQuery1102018240398381236766_1558663885975",
    			   success:function(data){
    			       console.log(data)
    			   }
    			})
    		}
    	</script>
    
    

    用jQuery跨域的时候,url中的callback后面是函数的名称,也可以自己修改函数名。
    如果url的callback后面是?号,不用写jsonpCallback回调函数,jQuery会随机的命名函数。

  • 相关阅读:
    第七周上机
    第六周作业
    第六周上机作业
    第五周上机作业
    java第四周作业
    上机作业
    第三次java作业
    java作业
    第七周作业
    JAVA第七周上机作业
  • 原文地址:https://www.cnblogs.com/zhongchao666/p/10916804.html
Copyright © 2020-2023  润新知