ajax跨域2

Posted 2020-10-15

接着昨天的写，写到关于解决跨域的问题，跨域这个名词，大家搜搜百度百科，里面有详细的介绍，我在这里就不赘述了

好在这里我来讲下关于jsonp的问题，jsonp解决跨域有两种该方案可选，1.原生js解决  2.jquery jsonp解决

下面我通过原生js来介绍下关于jsonp的原理，

客户端

function abc(data){
    console.log(data.data);
    var json =JSON.parse(data.data.lists[0])
    console.log(json);
}
<script src="test.php?callback=abc&key=123"></script>

 

服务端

<?php
  $callback = $_GET[‘callback‘];
  $txt = $_GET[‘key‘];
//逻辑处理根据自身业务来下
  echo $callback.‘（’.$txt.‘）’;
?>

这里我们来分析下上面的代码的意思，首先在客户端我们通过script标签，标签的src属性设置为我们要获取数据的地址，这样会帮我们吧数据从服务器拿到，

接着我们来分析服务器端的代码，服务器端根据传过来的querystring来得到一个键为callback的值和键位key的值，得到$callback=abc，$txt=123，最后返回给客户端abc(123),

接着客户端通过srcipt标签就拿到了abc(123),这里细心的朋友可能注意到了，我们刚好定义了一个abc()的函数，所以这时会去调用abc(data)这样我们就获取了服务端传过来的真实数据。这既是jsonp的原理（各位勿喷，这就是我自己的理解，不是直接copy过来的，所以可能有些概念不是那么严谨）

当然，如果每次都这样去获取，还是有点麻烦的，所以jquery中ajax给我们提供了更为简洁的方法

这里只需将dataType指定为jsonp就可以了，效果和上面一样

 

那么经过这样，我们已经可以通过跨域获取数据了，通过这种方式我们就可以拿到音乐数据了，感兴趣的朋友，自己可以尝试下去，在这里我就不说后面的具体细节了，得到了数据，其他都可以解决。

后话：这个音乐播放的案例是我6月份没事的是哦吼，做的玩下的，最开始不知道跨域这个问题，走了很多弯路，你并且我的第一个解决方案不是这样做的，我的第一个解决方案是用.net做后台去请求url，获得的数据中用字符串的处理办法，去除掉含有calllback（）的字符，然后前端再去请求ashx，这样做你就要自己部署服务端，吧前端页面放在同一域下