解决跨域

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_30699443

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/fandaxia/p/7875857.html

本文探讨了Ajax在实现音乐播放器过程中遇到的跨域问题，并介绍了几种解决跨域的方法，重点讲解了使用jsonp进行跨域请求的技术。

刚刚送回一个朋友，坐在办公室，于是打开博客，写了这个随笔，上一将我们说到了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;
          }
      }
  }*/