在开发测试中,难免会在不同域下进行跨域操作,比如jsonp跨域，其实jsonp跨域原理就是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。那jsonp跨域原理优缺点是什么?下面来我们就来给大家讲解一下。
1.jsonp优点：
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
2.jsonp缺点：
它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
jsonp如何实现跨域?
我们要用过利用srcipt标签的src属性来实现，那么我们如何做呢，我们来看一段简单的代码，为了方便，我这里使用jQuery：
$('#btn')
.click(function ()
{
var frame = document.createElement('script');
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
$('body')
.append(frame);
});可以看到，让我们点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址,注意：这里必须使用scipt标签，否则返回的数据不会被当作js执行)，src地址是"localhost:3000/article-list",这个src地址，就是我们请求的服务端接口。注意，这里我们有是那个参数，name,age和callback，name和age不说了，这跟我们平时普通的get请求参数无异。主要说下callback这个参数，callback参数就是核心所在。为什么要定义callback呢?首先我们知道，这个get请求已经被发出去了，那么我们如何接口请求回来的数据呢，callback=func则可以帮我们做这件事。我们继续看下边的代码
<button id = "btn" > 点击 < /button> <
script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" > </script> <
script >
$('#btn')
.click(function ()
{
var frame = document.createElement('script');
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
$('body')
.append(frame);
});
function func(res)
{
alert(res.message + res.name + '你已经' + res.age + '岁了');
}
</script>这里可以看到，我们声明了一个func函数，但没有执行，你可以想一下，如果服务端接口到get请求，返回的是func({message:'hello'})，这样的话在服务端不就可以把数据通过函数执行传参的方式实现数据传递了吗。
服务端代码实现：
接下来，我们看服务端应该如何实现：
router.get('/article-list', (req, res) =>
{
console.log(req.query, '123');
let data = {
message: 'success!'
, name: req.query.name
, age: req.query.age
}
data = JSON.stringify(data)
res.end('func(' + data + ')');
});ok，接下来当我们点击提交的时候，就获取到了服务端反回的数据。如下：
这样下来，就完成了实现jsonp的跨域。
其实jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据，整个过程实际非常简单易懂，最后大家如果想要了解更多json相关知识，敬请关注奇Q工具网。
推荐阅读：