使用没有跨域限制的方式
JSONP
script标签的src属性中的链接可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
我们来看 一个天气查询查询的jsonp接口 https://query.asilu.com/weather/baidu/
我们先来看看 请求 https://api.asilu.com/weather/?city=${‘重庆’}&callback=weather会返回什么
`/** api.asilu.com **/weather({"city":"重庆","pm25":"62","weather":[{"date":"周三 09月16日","icon1":"http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3","icon2":"http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3","weather":"阴转小雨","wind":"北风微风","temp":"23 ~ 20℃"},{"date":"周四","icon1":"http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/8","icon2":"","weather":"小雨转阴","wind":"北风微风","temp":"22 ~ 19℃"},{"date":"周五","icon1":"http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/5","icon2":"","weather":"多云转晴","wind":"东北风微风","temp":"24 ~ 19℃"},{"date":"周六","icon1":"http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/1","icon2":"","weather":"晴转多云","wind":"东北风微风","temp":"28 ~ 21℃"}],"date":"2020-11-24","s":1606147200});`
我们看到请求结果是一段js代码 调用了weather函数 而给weather函数传的数据就是我们需要的数据
那weather到底是哪来的?
其实就是我们自己写的函数,比如我的weather函数是这么写的,在拿到data之后更新dom
通过src访问jsonp接口时需要自己写一个weather函数接受 data数据 或者对data数据进行操作
function weather(data) {
const city = document.querySelector('.city');
const weather = document.querySelector('.weather');
city.innerText = data.city;
weather.innerText = data.weather[0].weather;
}
用AJAX封装的JSONP
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "get",
async: false,
url: "https://api.asilu.com/weather/?city=${'重庆'}&callback=weather",
dataType: "jsonp",
jsonp: "callback", //请求php的参数名
jsonpCallback: "weather", //要执行的回调函数
success: function(data) {
console.log(data);
}
});
});
</script>