解决跨域

刚刚送回一个朋友，坐在办公室，因而打开博客，写了这个随笔，上一将咱们说到了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解决（个人重点）

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