XMLHTTPRequest對象不能跨域獲取數據？！

時間 2019-12-06

標籤 xmlhttprequest 對象不能獲取數據简体版

原文原文鏈接

寫了一小段代碼，是用XMLHTTPRequest對象來獲取數據的，在本地服務器中，運行的很順利，可是轉向實際服務器（實質上就是轉向http://gumball.wickedlysmart.com獲取一個json文件過來），運行就跑不起來了。web

這就涉及到跨域獲取數據的問題了。json

我運行時的環境是這樣的：跨域

本地服務器運行當前代碼、轉向http://gumball.wickedlysmart.com獲取一個json文件過來。瀏覽器

結果：報錯。安全

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource.......服務器

什麼是跨域獲取對象呢？意思就是說，你如今所在的頁面是屬於本地服務器A的，可是你要獲取遠方的服務器B的數據，此時就屬於跨域獲取數據了。我剛纔說的問題，轉向實際服務器就不能夠運行代碼了。cookie

原來呢是由於這是瀏覽器安全策略，專門設計用來避免惡意的Javascript訪問你的web頁面和用戶的cookie。因此呢，若是你的要訪問的數據跟你的不是在同一個服務器下，使用XMLHTTPRequest是會被攔截住的。app

瀏覽器獲取獲取數據的兩種流行方法：dom

XMLHTTPRequest、JSONPjsonp

XMLHTTPRequest獲取過來的是字串，須要使用JSON.parse()解析結果；

JSONP是使用HTML中的<script>標記來獲取數據，返回的是對象；

既然使用XMLHTTPRequest不能獲取到數據，因此就使用其餘方法，使用JSONP來獲取數據更加好。爲何呢？緣由就是JSONP是基於Javascript的，返回到的就是一個對象。

這是處理更新的一個方法：

function handleRefresh(){
    
    var url = "http://gumball.wickedlysmart.com" +                     //此時咱們把url寫在了這個方法，而不是在<head>中的<script>標記中寫入url地址
                "?callback=updateSales" +
                "&lastreporttime=" + lastReportTime +
                "&random=" + (new Date()).getTime();
    var newScriptElement = document.createElement("script");     //須要動態建立<script>，由於每次一個就只能發送一個請求，因爲須要時時更新，因此就使用動態建立
    newScriptElement.setAttribute("src", url);
    newScriptElement.setAttribute("id", "jsonp");
    var oldScriptElement = document.getElementById("jsonp");
    var head = document.getElementsByTagName("head")[0];
    
    
    if(oldScriptElement == null){                              //判斷是追加或者是替換
        head.appendChild(newScriptElement);
    }else{
        head.replaceChild(newScriptElement,oldScriptElement);
        
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。