为什么要进行跨域,jsonp又是什么?
由于本地浏览器有“同源机制”,我们用ajax向服务器发送请求只能向自己的服务器发送请求,而不能向别人的服务器发送请求(并不是不能发送,发送成功之后,无法获得返回值,返回值会被浏览器自动拦截),所以就诞生了jsonp来进行跨域发送请求,jsonp并不是指特殊的语法,而是对跨域的一种称呼。jsonp是通过一种特殊的方式来进行ajax请求。
在html标签中,前辈们发现,只要带有src属性的标签,都可以无视浏览器的“同源机制“,可以从不同的服务器获取图片如:img,iframe,script
等那么我们就可以通过这个特殊的属性,对数据进行封装,让数据满足一定的格式,能够被获取到,一般采用script标签,因为script脚本,方便我们操作。
那么如何通过src来进行跨域呢,我们通过src向目标服务器发送请求,服务器返回我们的请求,虽然这次浏览器不会拦截,但是我们要按照js的语法来进行发送数据,否则一样是无法拿到数据的,现在默认的规则就是,我们将数据封装在函数中,例如服务器封装了数据:list(data)
,用这种形式返回数据,我们可以将list看作是一个函数,而数据则作为参数,我们只要在本地定义了这个函数,然后将其中的参数拿出来就实现了跨域:
代码,原生js代码:
<body>
<button id="jsp1" onclick="jsonp() ">这是jsonp按钮(原生方式)</button>
<script>
function jsonp() {
var ele = document.createElement('script')
向下面这个url发送请求,如果目标地址返回了你func(data)这样的形式
ele.src = "地址"
ele.setAttribute('class','a')
document.head.appendChild(ele)
ele.remove()
};
function func(arg){
console.log(arg)
这样就可以打印出服务端发过来的数据
}
</script>
</body>
当然jquery已经为我们封装好了一套用法,让我们更简便的使用jsonp跨域:
<body>
<button id="jsp">这是jsonp按钮(ajax方式)</button>
<script>
$("#jsp").click(function(){
$.ajax({
url:'地址',
type:'get',jsonp格式,只能通过get方法,这里不管填什么都是会是get方式
dataType:’jsonp',
jsonp:'callback',
jsonpCallback:'func'
})
})
function func(arg){
console.log(arg)
这样就可以打印出服务端发过来的数据
}
</script>
</body>