解決跨域

剛剛送回一個朋友，坐在辦公室，因而打開博客，寫了這個隨筆，上一將咱們說到了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解決（個人重點）

未完待續》》》我回去睡覺了，明天接着寫