解决跨域

刚刚送回一个朋友，坐在办公室，于是打开博客，写了这个随笔，上一将我们说到了ajax的见解和优点，那么这一讲我们来聊一聊ajax的缺点，以一个音乐播放器的例子（注明：这个例子只供学习交流用，）

有了ajax，我觉得我可以做好多东西了，我之前在做一个类是网页版的网易音乐播放器的时候，我就想到了，既然有了ajax，那么是不是我只要通过ajax去请求某个地址，就可以获取相关的数据了，于是我就萌生了自己写一个音乐播放器的想法，于是说干就干，那么你想做一个音乐播放器，首先得有数据，数据在这里我们通过api来取得，api大家自己在网上找，怕侵犯相关公司的利益，在这里就不放出来了（数据中也不是完整的，同样怕侵犯商业利益，），这里的数据只做参考

 

 首先我们来测试这个api，将api的地址复制粘贴到浏览器地址栏，回车

数据我就不放出来了，同样怕侵犯别个利益，数据中list包含歌曲信息

这样在这种我们看到其中包含了一个list数组，这个数组中有一首歌的信息，庄心妍 - 真的不容易,这样得到数据后我们就好办了啊

于是开始打造界面

这里界面不是我们关注的重点，我就不多说了，直接上js代码

//跨域请求
  var xhr = null;
  if(XMLHttpRequest){
      xhr= new XMLHttpRequest();
  }else{
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  var url ；

  xhr.open('GET',url,true);
  xhr.send();

  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
          if(xhr.status == 200){
              //
              var data = xhr.responseText;
          }
      }
  }*/

 

直接在离揽器中查看，发现

控制台报错，这个是因为ajax不知此file协议，于是改成http的方式访问，

这个错误就是我们今天要说的重点了，这就是因为跨域的问题导致的，ajax是不允许跨域操作的，这也是处于安全的角度考虑而设计的，那么我们如何解决这种跨域的问题列，

解决方法有三种（我知道的）

1.iframe解决（步骤太过繁琐，而且也不是我要讲的重点）

2.在服务器端设置ACCESS-CONTROL-ALLOW-Origin（这个在前端无法掌控，解决相对简单，但不安全）

3.jsonp解决（我的重点）

未完待续》》》我回去睡觉了，明天接着写