Js jsonp跨域

JSONP，是JSON with padding的缩写，意为填充式JSON或参数式JSON，是对JSON的一种新的应用，主要用于跨域，其原理是通过动态的创建script标签，并为其src属性指定一个跨域的URL，这里的script标签与img标签一样，都有能力不受限制的从其他域加载资源。因为JSONP是有效的js代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行；JSONP更像是一个被包含在函数调用中的JSON,形式如下：

callback({name:”kk”});

JSONP由两部分组成：回到函数和数据。回调函数是指当响应到来时调用的函数，回调函数的名字一般是在请求中指定的。而数据就是指传入回调函数中的JSON数据。代码示例：

Html:

<div id="box">

         <button id="btn">CLICK</button>

</div>

Js:

function localFn(res){

         console.log(res);

};

var btn = document.getElementById('btn');

btn.onclick = function(){

         var script = document.createElement('script');

         script.src = `https://api.douban.com/v2/book/search?q=javascript&count=1&callback=localFn`;

         document.body.insertBefore(script,document.body.firstChild);

    }

使用JSONP进行跨域的优点是简单易用，缺点是（1）安全性不高；（2）要确定请求是否失败并不容易；